前端技术搭建弹珠小游戏（内附源码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#board {
width: 480px;
height: 320px;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
#paddle {
width: 80px;
height: 10px;
background-color: black;
position: absolute;
bottom: 0;
}
#ball {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}
.brick {
width: 75px;
height: 20px;
background-color: blue;
border: 1px solid black;
position: absolute;
}
#brick-container {
margin-top: 30px;
}
#score {
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<h1>弹珠游戏</h1>
<div id="board">
<div id="paddle"></div>
<div id="ball"></div>
<div id="brick-container"></div>
</div>
<div id="score">0</div>
</body>
<script>
let board, paddle, ball, brickCount;
let paddleX, ballX, ballY;
let brickWidth = 75, brickHeight = 20, brickPadding = 10, brickOffsetTop = 30, brickOffsetLeft = 30;
let brickRowCount = 3, brickColumnCount = 5;
let x = 3, y = -3;
let leftPressed, rightPressed;
let score = 0; // 定义分数
let gameLoop; // 定义全局变量gameLoop
function startGame() {
// 初始化分数为0
score = 0;
document.getElementById("score").innerHTML = score;
// 初始化游戏板和弹球
board = document.getElementById("board");
paddle = document.getElementById("paddle");
ball = document.getElementById("ball");
paddleX = board.offsetWidth / 2 - paddle.offsetWidth / 2;
ballX = board.offsetWidth / 2 - ball.offsetWidth / 2;
ballY = board.offsetHeight / 2 - ball.offsetHeight / 2;
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
// 初始化砖块
const brickContainer = document.getElementById("brick-container");
brickContainer.innerHTML = "";
brickCount = 0;
for (let i = 0; i < brickRowCount; i++) {
for (let j = 0; j < brickColumnCount; j++) {
const brick = document.createElement("div");
brick.className = "brick";
brick.style.left = j * (brickWidth + brickPadding) + brickOffsetLeft + "px";
brick.style.top = i * (brickHeight + brickPadding) + brickOffsetTop + "px";
brickContainer.appendChild(brick);
brickCount++;
}
}
// 初始化键盘事件
leftPressed = false;
rightPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
// 开始
gameLoop = setInterval(update, 20);
}
function keyDownHandler(e) {
if (e.keyCode === 37) {
leftPressed = true;
} else if (e.keyCode === 39) {
rightPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode === 37) {
leftPressed = false;
} else if (e.keyCode === 39) {
rightPressed = false;
}
}
function update() {
// 更新球的位置
ballX += x;
ballY += y;
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
// 判断球是否碰到边界
if (ballX < 0 || ballX + ball.offsetWidth > board.offsetWidth) {
x = -x;
}
if (ballY < 0) {
y = -y;
} else if (ballY + ball.offsetHeight > board.offsetHeight) {
// 判断球是否碰到底部，游戏结束
clearInterval(gameLoop);
alert("游戏结束，你的得分是：" + score);
startGame();
}
// 判断球是否碰到挡板
if (ballY + ball.offsetHeight > board.offsetHeight - paddle.offsetHeight && ballX + ball.offsetWidth > paddleX && ballX < paddleX + paddle.offsetWidth) {
y = -y;
score += 10; // 碰到挡板加10分
document.getElementById("score").innerHTML = score; // 实时更新分数
}
// 更新挡板位置
if (leftPressed && paddleX > 0) {
paddleX -= 5;
} else if (rightPressed && paddleX + paddle.offsetWidth < board.offsetWidth) {
paddleX += 5;
}
paddle.style.left = paddleX + "px";
console.log(brickCount, 'hasdjhsdaf')
// 判断球是否碰到砖块
const bricks = document.getElementsByClassName("brick");
for (let i = 0; i < bricks.length; i++) {
const brick = bricks[i];
if (ballY < brick.offsetTop + brickHeight && ballY + ball.offsetHeight > brick.offsetTop && ballX + ball.offsetWidth > brick.offsetLeft && ballX < brick.offsetLeft + brickWidth) {
y = -y;
brick.style.display = "none";
brickCount--;
score += 20; // 碰到砖块加20分
document.getElementById("score").innerHTML = score; // 实时更新分数
if (brickCount === 0) {
clearInterval(gameLoop);
alert("恭喜你赢得了游戏，你的得分是：" + score);
startGame();
}
}
}
}
startGame();
</script>
</html>