0
0

前端技术搭建弹珠小游戏（内附源码）

The sand accumulates to form a pagoda

✨ 写在前面

上周我们实通过前端基础实现了小人逃脱，当然很多伙伴再评论区提出了想法，后续我们会考虑实现的，今天还是继续按照我们原定的节奏来带领大家完成一个弹珠游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。

✨ 功能介绍

在这里插入图片描述

当玩家进入游戏页面后，可以看到一个有趣的弹珠游戏。玩家需要使用左右箭头键控制下方的挡板，以便接住从上方掉落的小球。如果球触碰到下方的边界线，游戏就结束了。玩家的目标是尽可能多地接住小球，并通过撞击顶部的砖块来获得高分。每次成功接住小球都会获得10分，每次碰撞砖块都会获得20分。玩家可以通过页面上的得分区域实时查看自己的得分。如果玩家成功消除所有的砖块，就会获得游戏胜利，并获得最终得分。当然你也可以通过修改游戏的参数来控制难度等级！

✨ 页面搭建

创建文件

首先呢我们创建我们的HTML文件，这里我就直接命名为 

  1. 弹珠游戏.html

了，大家可以随意命名， 文件创建生成后我们通过编辑器打开，这里我用的是VScode， 然后初始化我们的代码结构，那在这里告诉大家一个快捷键，就是我们敲上我们英文的一个 

  1. !

我们敲击回车直接就会给我们生成基础版本的前端代码结构。

在这里插入图片描述

文档声明和编码设置： 在HTML文档的头部，使用<!DOCTYPE>声明HTML文档类型，确保浏览器以正确的方式渲染网页内容。同时，设置UTF-8编码，以确保浏览器能够正确地解析和显示中文字符。下面我就开始搭建我们的DOM结构了！

DOM结构搭建

  1. <h1>弹珠游戏</h1>：这是一个页面标题，显示在页面的最上方，用于告诉用户这是一个弹珠游戏页面。
  2. <div id="board">...</div>：这是一个游戏主板区域，游戏中所有的元素都会在这个区域内展示。其中包括了一个挡板、一个弹珠和一个砖块容器。
  3. <div id="paddle"></div>：这是一个挡板，用于接住从上方掉落的小球。玩家可以通过左右箭头键控制挡板的移动。
  4. <div id="ball"></div>：这是一个弹珠，会从上方掉落到挡板下方。玩家需要使用挡板接住弹珠，否则游戏就会结束。
  5. <div id="brick-container"></div>：这是一个砖块容器，用于展示顶部的砖块。玩家需要通过撞击顶部的砖块来获得高分。
  6. <div id="score">0</div>：这是一个得分区域，用于实时展示玩家的得分。当玩家成功接住小球或者碰撞砖块时，得分会随之增加，并在这个区域中实时更新。
  1. <h1>弹珠游戏</h1><divid="board"><divid="paddle"></div><divid="ball"></div><divid="brick-container"></div></div><divid="score">0</div>

在这里插入图片描述

✨ 样式设置

我们看到了上面的的DOM已经搭建好了，但是很显然样式比较随意了，我们简单的来配置一下样式吧，其实我们本专栏也是想带领大家掌握一些逻辑所以样式方面我们就一切从简；这段CSS代码定义了弹珠游戏中各个元素的样式：

  • #board 定义了游戏面板的样式，包括宽度、高度、边框、相对定位和水平居中对齐。
  • #paddle 定义了球拍的样式，包括宽度、高度、背景颜色、绝对定位和贴着游戏面板底部。
  • #ball 定义了球的样式，包括宽度、高度、背景颜色和绝对定位。
  • .brick 定义了砖块的样式，包括宽度、高度、背景颜色、边框和绝对定位。
  • #brick-container 定义了砖块容器的样式，包括与游戏面板顶部的距离。
  • #score 定义了分数的样式，包括字体大小和居中对齐。
  1. <style>
  2.     #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;}
  3. </style>

在这里插入图片描述

✨ 逻辑部分

上面我们搭建了基本的样式，下面呢我们就通过js代码，实现我们游戏的功能吧；我们首先呢 定义了一些变量，包括游戏板(board)、球拍(paddle)、弹珠(ball)、砖块数量(brickCount)、球拍的初始位置(paddleX)、弹珠的初始位置(ballX和ballY)等。定义了砖块的宽度、高度、边距以及偏移量等参数，以及砖块的行数(brickRowCount)和列数(brickColumnCount)。初始化了游戏板、球拍和弹珠的位置，并将球拍放在游戏板的底部，将弹珠放在游戏板的中央。初始化了砖块，通过循环创建砖块，并设置砖块的位置和样式。初始化了键盘事件，用于控制球拍的移动。开始游戏循环，每20毫秒执行一次update函数，用于更新游戏状态。下面我们就来编写update等几个函数；

  1. 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;// 定义全局变量gameLoopfunctionstartGame(){// 初始化分数为0
  2.     score =0;
  3.     document.getElementById("score").innerHTML = score;// 初始化游戏板和弹球
  4.     board = document.getElementById("board");
  5.     paddle = document.getElementById("paddle");
  6.     ball = document.getElementById("ball");
  7.     paddleX = board.offsetWidth /2- paddle.offsetWidth /2;
  8.     ballX = board.offsetWidth /2- ball.offsetWidth /2;
  9.     ballY = board.offsetHeight /2- ball.offsetHeight /2;
  10.     ball.style.left = ballX +"px";
  11.     ball.style.top = ballY +"px";// 初始化砖块const brickContainer = document.getElementById("brick-container");
  12.     brickContainer.innerHTML ="";
  13.     brickCount =0;for(let i =0; i < brickRowCount; i++){for(let j =0; j < brickColumnCount; j++){const brick = document.createElement("div");
  14.             brick.className ="brick";
  15.             brick.style.left = j *(brickWidth + brickPadding)+ brickOffsetLeft +"px";
  16.             brick.style.top = i *(brickHeight + brickPadding)+ brickOffsetTop +"px";
  17.             brickContainer.appendChild(brick);
  18.             brickCount++;}}// 初始化键盘事件
  19.     leftPressed =false;
  20.     rightPressed =false;
  21.     document.addEventListener("keydown", keyDownHandler,false);
  22.     document.addEventListener("keyup", keyUpHandler,false);// 开始
  23.     gameLoop =setInterval(update,20);}

下面我们要编写的代码就是游戏的核心代码，定义了三个函数：

  1. keyDownHandler

、

  1. keyUpHandler

和 

  1. update

，分别对应键盘按下、键盘松开以及游戏状态的更新。这些函数都在 

  1. startGame

函数中被调用，用于初始化游戏并启动游戏循环。

  1. keyDownHandler

和 

  1. keyUpHandler

函数监听键盘事件。当键盘按下时，会检测按下的键是否是左箭头或右箭头，如果是则将相应的标志变量（

  1. leftPressed

或 

  1. rightPressed

）设置为 

  1. true

。当键盘松开时，同样会检测松开的键是否是左箭头或右箭头，如果是则将相应的标志变量设置为 

  1. false

。

  1. update

函数是游戏循环中最重要的函数之一，用于更新游戏状态并检测碰撞。在每次更新时，会首先更新球的位置，并检测球是否与边界相撞。如果球碰到了左右边界，则将其速度反向；如果球碰到了上边界，则将其纵向速度反向。如果球碰到了底部，则游戏结束。

接下来，该函数将检测球是否与挡板相撞。如果球碰到了挡板，则将其纵向速度反向，并将分数加10分。然后会实时更新分数。该函数也会检测球是否与砖块相撞。如果球碰到了砖块，则将其纵向速度反向，并将相应的砖块从游戏区域中移除，并将分数加20分。同样会实时更新分数。如果所有砖块都被消除，则游戏结束，弹出一个提示框，显示获得的分数，并重新开始游戏。

  1. functionkeyDownHandler(e){if(e.keyCode ===37){
  2.         leftPressed =true;}elseif(e.keyCode ===39){
  3.         rightPressed =true;}}functionkeyUpHandler(e){if(e.keyCode ===37){
  4.         leftPressed =false;}elseif(e.keyCode ===39){
  5.         rightPressed =false;}}functionupdate(){// 更新球的位置
  6.     ballX += x;
  7.     ballY += y;
  8.     ball.style.left = ballX +"px";
  9.     ball.style.top = ballY +"px";// 判断球是否碰到边界if(ballX <0|| ballX + ball.offsetWidth > board.offsetWidth){
  10.         x =-x;}if(ballY <0){
  11.         y =-y;}elseif(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){
  12.         y =-y;
  13.         score +=10;// 碰到挡板加10分
  14.         document.getElementById("score").innerHTML = score;// 实时更新分数}// 更新挡板位置if(leftPressed && paddleX >0){
  15.         paddleX -=5;}elseif(rightPressed && paddleX + paddle.offsetWidth < board.offsetWidth){
  16.         paddleX +=5;}
  17.     paddle.style.left = paddleX +"px";
  18.     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){
  19.             y =-y;
  20.             brick.style.display ="none";
  21.             brickCount--;
  22.             score +=20;// 碰到砖块加20分
  23.             document.getElementById("score").innerHTML = score;// 实时更新分数if(brickCount ===0){clearInterval(gameLoop);alert("恭喜你赢得了游戏，你的得分是："+ score);startGame();}}}}startGame();

完整代码

  1. <!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>
  2.         #board {width: 480px;height: 320px;border: 1px solid black;position: relative;margin:0 auto;}
  4.         #paddle {width: 80px;height: 10px;
  5.             background-color: black;position: absolute;bottom:0;}
  7.         #ball {width: 10px;height: 10px;
  8.             background-color: red;position: absolute;}.brick {width: 75px;height: 20px;
  9.             background-color: blue;border: 1px solid black;position: absolute;}
  11.         #brick-container {
  12.             margin-top: 30px;}
  14.         #score {
  15.             font-size: 24px;
  16.             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;// 定义全局变量gameLoopfunctionstartGame(){// 初始化分数为0
  17.         score =0;
  18.         document.getElementById("score").innerHTML = score;// 初始化游戏板和弹球
  19.         board = document.getElementById("board");
  20.         paddle = document.getElementById("paddle");
  21.         ball = document.getElementById("ball");
  22.         paddleX = board.offsetWidth /2- paddle.offsetWidth /2;
  23.         ballX = board.offsetWidth /2- ball.offsetWidth /2;
  24.         ballY = board.offsetHeight /2- ball.offsetHeight /2;
  25.         ball.style.left = ballX +"px";
  26.         ball.style.top = ballY +"px";// 初始化砖块const brickContainer = document.getElementById("brick-container");
  27.         brickContainer.innerHTML ="";
  28.         brickCount =0;for(let i =0; i < brickRowCount; i++){for(let j =0; j < brickColumnCount; j++){const brick = document.createElement("div");
  29.                 brick.className ="brick";
  30.                 brick.style.left = j *(brickWidth + brickPadding)+ brickOffsetLeft +"px";
  31.                 brick.style.top = i *(brickHeight + brickPadding)+ brickOffsetTop +"px";
  32.                 brickContainer.appendChild(brick);
  33.                 brickCount++;}}// 初始化键盘事件
  34.         leftPressed =false;
  35.         rightPressed =false;
  36.         document.addEventListener("keydown", keyDownHandler,false);
  37.         document.addEventListener("keyup", keyUpHandler,false);// 开始
  38.         gameLoop =setInterval(update,20);}functionkeyDownHandler(e){if(e.keyCode ===37){
  39.             leftPressed =true;}elseif(e.keyCode ===39){
  40.             rightPressed =true;}}functionkeyUpHandler(e){if(e.keyCode ===37){
  41.             leftPressed =false;}elseif(e.keyCode ===39){
  42.             rightPressed =false;}}functionupdate(){// 更新球的位置
  43.         ballX += x;
  44.         ballY += y;
  45.         ball.style.left = ballX +"px";
  46.         ball.style.top = ballY +"px";// 判断球是否碰到边界if(ballX <0|| ballX + ball.offsetWidth > board.offsetWidth){
  47.             x =-x;}if(ballY <0){
  48.             y =-y;}elseif(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){
  49.             y =-y;
  50.             score +=10;// 碰到挡板加10分
  51.             document.getElementById("score").innerHTML = score;// 实时更新分数}// 更新挡板位置if(leftPressed && paddleX >0){
  52.             paddleX -=5;}elseif(rightPressed && paddleX + paddle.offsetWidth < board.offsetWidth){
  53.             paddleX +=5;}
  54.         paddle.style.left = paddleX +"px";
  55.         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){
  56.                 y =-y;
  57.                 brick.style.display ="none";
  58.                 brickCount--;
  59.                 score +=20;// 碰到砖块加20分
  60.                 document.getElementById("score").innerHTML = score;// 实时更新分数if(brickCount ===0){clearInterval(gameLoop);alert("恭喜你赢得了游戏，你的得分是："+ score);startGame();}}}}startGame();</script></html>

本期推荐

《写作之光：自媒体写作方法与运营实践》从自媒体写作的基础知识讲起，结合自媒体创作者的实际运营经历，重点介绍了今日头条、知乎、小红书等平台的运营与变现方法，让读者系统地理解这些自媒体平台的创作技巧与变现思路。

在这里插入图片描述

✨ 

  1.        原创不易，还希望各位大佬支持一下 
  2.       
  3.      
  4.     
  5.    
  6.      \textcolor{blue}{原创不易，还希望各位大佬支持一下} 
  7.     
  8.    
  9.  原创不易，还希望各位大佬支持一下

👍 

  1.        点赞，你的认可是我创作的动力！ 
  2.       
  3.      
  4.     
  5.    
  6.      \textcolor{green}{点赞，你的认可是我创作的动力！} 
  7.     
  8.    
  9.  点赞，你的认可是我创作的动力！

⭐️ 

  1.        收藏，你的青睐是我努力的方向！ 
  2.       
  3.      
  4.     
  5.    
  6.      \textcolor{green}{收藏，你的青睐是我努力的方向！} 
  7.     
  8.    
  9.  收藏，你的青睐是我努力的方向！

✏️ 

  1.        评论，你的意见是我进步的财富！ 
  2.       
  3.      
  4.     
  5.    
  6.      \textcolor{green}{评论，你的意见是我进步的财富！} 
  7.     
  8.    
  9.  评论，你的意见是我进步的财富！
标签： 前端 javascript html
本文转载自: https://blog.csdn.net/JHXL_/article/details/130499028
版权归原作者 几何心凉 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端技术搭建弹珠小游戏（内附源码）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？