css怎么搞个小游戏简单 |css 两个table

/* 添加一个游戏盒子 */
.game-box {
width: 500px;
height: 500px;
background-color: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
}

现在大家可以开始制作一个简单的弹球游戏。大家需要一个球和一个板子。

/* 添加一个球 */
.ball {
width: 20px;
height: 20px;
background-color: blue;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 添加一个板子 */
.paddle {
width: 80px;
height: 10px;
background-color: #333;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}

现在大家需要添加一些交互效果来让游戏变得更加有趣。大家可以添加控制板子移动的JavaScript。

// 获取板子和游戏盒子
const gameBox = document.querySelector('.game-box');
const paddle = document.querySelector('.paddle');
// 添加事件监听器
gameBox.addEventListener('mousemove', function(e) {
// 获取鼠标在游戏盒子中的位置
const mouseX = e.clientX - gameBox.offsetLeft;
// 移动板子
paddle.style.left = mouseX + 'px';
});

最后大家需要添加一些游戏逻辑。大家可以添加一个球移动的动画和碰撞检测。

// 获取球
const ball = document.querySelector('.ball');
// 添加球移动动画
let ballX = 250;
let ballY = 250;
let speedX = 5;
let speedY = 5;
function animate() {
ballX += speedX;
ballY += speedY;
// 检测碰撞
if (ballX480) {
speedX = -speedX;
}
if (ballY480) {
speedY = -speedY;
}
ball.style.top = ballY + 'px';
ball.style.left = ballX + 'px';
requestAnimationFrame(animate);
}
animate();

现在你已经有了一个简单的弹球游戏。当然，这只是一个起点，你可以使用CSS来制作出各种各样的游戏，从而提高CSS技能。