[分享]css与js实现的小游戏

在网页设计中，CSS和JavaScript是必不可少的工具。不仅可以美化网页，还能为网页添加交互性特效。在这里，我们将使用CSS和JavaScript来编写一个简单的小游戏。//HTML //...

在网页设计中，CSS和JavaScript是必不可少的工具。不仅可以美化网页，还能为网页添加交互性特效。在这里，我们将使用CSS和JavaScript来编写一个简单的小游戏。

//HTML
<div id="game">
   <div id="ball"></div>
   <div id="paddle"></div>
</div>

//CSS
#game {
    width: 400px;
    height: 500px;
    position: relative;
}

#ball {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    left: 190px;
}

#paddle {
    width: 80px;
    height: 10px;
    background-color: black;
    position: absolute;
    bottom: 10px;
    left: 160px;
}

//JavaScript
let ball = document.getElementById("ball");
let paddle = document.getElementById("paddle");
let x = 6;
let y = -6;

function moveBall() {
    let ballTop = parseInt(window.getComputedStyle(ball).getPropertyValue("top"));
    let ballLeft = parseInt(window.getComputedStyle(ball).getPropertyValue("left"));
    let paddleLeft = parseInt(window.getComputedStyle(paddle).getPropertyValue("left"));
    if (ballTop <= 0) {
        y = -y;
    }
    if (ballLeft <= 0 || ballLeft >= 380) {
        x = -x;
    }
    if (ballTop >= 470 && ballTop <= 480 && ballLeft >= paddleLeft && ballLeft <= paddleLeft + 80) {
        y = -y;
    }
    if (ballTop > 500) {
        alert("Game Over!");
        location.reload();
    }
        ball.style.top = (ballTop + y) + "px";
        ball.style.left = (ballLeft + x) + "px";
}

setInterval(moveBall, 20);

function movePaddle(e) {
    if (e.clientX >= 40 && e.clientX <= 360) {
        paddle.style.left = (e.clientX - 40) + "px";
    }
}

document.addEventListener("mousemove", movePaddle); 

在这个小游戏中，我们需要控制球从初始位置开始坠落，并且用挡板来接住球。球碰到挡板就会反弹，如果球落到了底部，则游戏结束。在JavaScript中，我们需要实时检查球的位置和挡板的位置，使用setInterval来指定移动的时间间隔，同时监听鼠标事件，根据鼠标的移动来移动挡板。在CSS中，我们需要定义游戏区域大小、球和挡板的样式。这个游戏只是一个简单的示例，你可以根据需要来增加游戏元素，并添加更多的交互特效，使游戏更加有趣。