邢博韬贪吃蛇 - 科学教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<div class="snake" id="snake"></div>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.game-container {
width: 400px;
height: 400px;
margin: 50px auto;
position: relative;
border: 2px solid #333;
}
.snake {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}

复制代码

document.addEventListener('DOMContentLoaded', function() {
const snake = document.getElementById('snake');
let posX = 0;
let posY = 0;
function moveSnake() {
// 根据需要修改蛇的移动逻辑
// 这里只是一个简单的示例
posX += 20;
posY += 20;
snake.style.left = posX + 'px';
snake.style.top = posY + 'px';
}
setInterval(moveSnake, 200); // 每200毫秒移动一次
});

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>简单飞机大战</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>飞机大战小游戏</h1>
<div class="game-area" id="gameArea">
<div class="player" id="player"></div>
</div>
<p>左右方向键控制飞机，空格键发射子弹</p>
<script src="script.js"></script>
</body>
</html>

复制代码

body {
margin: 0;
padding: 0;
background: #000022;
color: white;
font-family: "微软雅黑", sans-serif;
text-align: center;
}
h1 {
margin-top: 10px;
}
.game-area {
position: relative;
margin: 20px auto;
width: 400px;
height: 600px;
background: linear-gradient(to bottom, #001122, #003366);
border: 2px solid white;
overflow: hidden;
}
/* 玩家飞机 */
.player {
position: absolute;
bottom: 20px;
left: 180px;
width: 40px;
height: 60px;
background: url('https://i.postimg.cc/sf3FxJWv/player-plane.png') no-repeat center center;
background-size: contain;
}
/* 子弹 */
.bullet {
position: absolute;
width: 5px;
height: 15px;
background-color: yellow;
border-radius: 3px;
}
/* 敌机 */
.enemy {
position: absolute;
width: 40px;
height: 40px;
background: url('https://i.postimg.cc/ryrt7Mp0/enemy-plane.png') no-repeat center center;
background-size: contain;
}

复制代码

document.addEventListener("DOMContentLoaded", () => {
const gameArea = document.getElementById("gameArea");
const player = document.getElementById("player");
const gameWidth = 400;
const gameHeight = 600;
const playerSpeed = 10;
let playerX = 180; // 初始位置
let bullets = [];
let enemies = [];
let score = 0;
// 移动玩家飞机
function movePlayer(direction) {
if (direction === "left") {
playerX = Math.max(0, playerX - playerSpeed);
} else if (direction === "right") {
playerX = Math.min(gameWidth - 40, playerX + playerSpeed);
}
player.style.left = playerX + "px";
}
// 创建子弹
function createBullet() {
const bullet = document.createElement("div");
bullet.classList.add("bullet");
bullet.style.left = playerX + 18 + "px"; // 子弹从飞机中间发射
bullet.style.top = gameHeight - 80 + "px";
gameArea.appendChild(bullet);
bullets.push(bullet);
}
// 创建敌机
function createEnemy() {
const enemy = document.createElement("div");
enemy.classList.add("enemy");
enemy.style.left = Math.floor(Math.random() * (gameWidth - 40)) + "px";
enemy.style.top = "-40px";
gameArea.appendChild(enemy);
enemies.push(enemy);
}
// 移动子弹和敌机
function moveObjects() {
// 移动子弹
bullets.forEach((bullet, index) => {
let top = parseInt(bullet.style.top);
top -= 10;
if (top < -15) {
bullet.remove();
bullets.splice(index, 1);
} else {
bullet.style.top = top + "px";
}
});
// 移动敌机
enemies.forEach((enemy, eIndex) => {
let top = parseInt(enemy.style.top);
top += 4;
if (top > gameHeight) {
// 敌机飞出屏幕，移除
enemy.remove();
enemies.splice(eIndex, 1);
} else {
enemy.style.top = top + "px";
}
// 检查与玩家碰撞（游戏结束）
if (
top + 40 >= gameHeight - 80 &&
parseInt(enemy.style.left) + 40 > playerX &&
parseInt(enemy.style.left) < playerX + 40
) {
alert("游戏结束！得分：" + score);
window.location.reload();
}
});
}
// 碰撞检测子弹与敌机
function checkCollision() {
bullets.forEach((bullet, bIndex) => {
const bulletTop = parseInt(bullet.style.top);
const bulletLeft = parseInt(bullet.style.left);
enemies.forEach((enemy, eIndex) => {
const enemyTop = parseInt(enemy.style.top);
const enemyLeft = parseInt(enemy.style.left);
if (
bulletTop < enemyTop + 40 &&
bulletTop + 15 > enemyTop &&
bulletLeft + 5 > enemyLeft &&
bulletLeft < enemyLeft + 40
) {
// 碰撞发生
bullet.remove();
enemy.remove();
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
score++;
// 更新标题显示分数
document.title = `飞机大战 - 得分: ${score}`;
}
});
});
}
// 控制飞机和射击
document.addEventListener("keydown", (e) => {
if (e.code === "ArrowLeft") {
movePlayer("left");
} else if (e.code === "ArrowRight") {
movePlayer("right");
} else if (e.code === "Space") {
createBullet();
}
});
// 游戏主循环
function gameLoop() {
moveObjects();
checkCollision();
requestAnimationFrame(gameLoop);
}
// 敌机生成间隔
setInterval(createEnemy, 1500);
gameLoop();
});

复制代码