昨天发了一个帖,markdown有问题,被举报了。重新发一下 还是键盘右键向右,键盘左键向左,空格发射子弹,射一下蓝色方块开始游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消遣小游戏 - yaoge2012</title>
<style>
#game-container {
width: 400px;
height: 600px;
border: 1px solid #0db53a;
margin: 0 auto;
}
.plane {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
bottom: 0;
}
.enemy-plane {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top: 0;
}
.bullet {
width: 5px;
height: 10px;
background-color: rgb(33, 178, 219);
position: absolute;
}
#score {
font-size: 24px;
margin-bottom: 10px;
}
#lives {
font-size: 18px;
}
</style>
</head>
<body>
<h1>小袁公司 - 消遣小游戏</h1>
<div id="game-container">
<div id="score">得分: 0</div>
<div id="lives">生命值: 3</div>
</div>
<script>
// 获取游戏容器
var gameContainer = document.getElementById('game-container');
// 设置游戏容器的样式
gameContainer.style.position = 'relative';
// 创建飞机元素
var plane = document.createElement('div');
plane.className = 'plane';
plane.style.left = '175px';
gameContainer.appendChild(plane);
// 创建敌机元素
var enemyPlane = document.createElement('div');
enemyPlane.className = 'enemy-plane';
enemyPlane.style.left = '175px';
gameContainer.appendChild(enemyPlane);
// 创建子弹元素
var bullet = document.createElement('div');
bullet.className = 'bullet';
// 初始化得分和生命值
var score = 0;
var lives = 3;
// 更新得分和生命值显示
function updateScoreAndLives() {
var scoreElement = document.getElementById('score');
var livesElement = document.getElementById('lives');
scoreElement.textContent = '得分: ' + score;
livesElement.textContent = '生命值: ' + lives;
}
// 移动敌机
function moveEnemyPlane() {
var currentTop = parseInt(enemyPlane.style.top);
// 敌机向下移动
enemyPlane.style.top = currentTop + 10 + 'px';
// 如果敌机超出游戏容器,则重新回到顶部
if (currentTop > gameContainer.offsetHeight) {
enemyPlane.style.top = '0px';
enemyPlane.style.left = Math.random() * (gameContainer.offsetWidth - enemyPlane.offsetWidth) + 'px';
}
// 检查是否与飞机相撞
if (checkCollision()) {
lives--;
updateScoreAndLives();
// 如果生命值为0,则游戏结束
if (lives === 0) {
alert('游戏结束!');
clearInterval(intervalId);
}
}
}
// 发射子弹
function shoot() {
var currentLeft = parseInt(plane.style.left);
// 设置子弹的初始位置
bullet.style.left = currentLeft + 22 + 'px';
bullet.style.bottom = '50px';
gameContainer.appendChild(bullet);
// 移动子弹
var bulletIntervalId = setInterval(function() {
var currentBottom = parseInt(bullet.style.bottom);
// 子弹向上移动
bullet.style.bottom = currentBottom + 10 + 'px';
// 检查是否击中敌机
if (checkHit()) {
score++;
updateScoreAndLives();
// 移除子弹和敌机
gameContainer.removeChild(bullet);
enemyPlane.style.top = '0px';
enemyPlane.style.left = Math.random() * (gameContainer.offsetWidth - enemyPlane.offsetWidth) + 'px';
// 停止移动子弹
clearInterval(bulletIntervalId);
}
// 如果子弹超出游戏容器,则移除子弹
if (currentBottom > gameContainer.offsetHeight) {
gameContainer.removeChild(bullet);
clearInterval(bulletIntervalId);
}
}, 50);
}
// 检查碰撞
function checkCollision() {
var planeRect = plane.getBoundingClientRect();
var enemyPlaneRect = enemyPlane.getBoundingClientRect();
return (
planeRect.left < enemyPlaneRect.right &&
planeRect.right > enemyPlaneRect.left &&
planeRect.top < enemyPlaneRect.bottom &&
planeRect.bottom > enemyPlaneRect.top
);
}
// 检查击中
function checkHit() {
var bulletRect = bullet.getBoundingClientRect();
var enemyPlaneRect = enemyPlane.getBoundingClientRect();
return (
bulletRect.left < enemyPlaneRect.right &&
bulletRect.right > enemyPlaneRect.left &&
bulletRect.top < enemyPlaneRect.bottom &&
bulletRect.bottom > enemyPlaneRect.top
);
}
// 监听键盘按键事件
document.addEventListener('keydown', function(event) {
// 获取当前飞机的位置
var currentLeft = parseInt(plane.style.left);
// 根据按键调整飞机的位置
if (event.key === 'ArrowLeft') {
plane.style.left = currentLeft - 10 + 'px';
} else if (event.key === 'ArrowRight') {
plane.style.left = currentLeft + 10 + 'px';
} else if (event.key === ' ') {
// 按下空格键发射子弹
shoot();
}
});
// 每隔一段时间移动敌机
var intervalId = setInterval(moveEnemyPlane, 100);
</script>
</body>
</html>