JS 实现小游戏 打砖块
2024-06-11 09:17:19
文章目录
- 1. 概述
- 2. 游戏场景
- 3. 实现砖块布局
- 4.小球和挡板
- 5.挡板运动
- 6.挡板边界
- 7.小球运动
- 8.小球边界
- 9.碰撞检测 (重点复杂点)
- 10.音效处理
1. 概述
这是一个游戏，这不仅仅是一个游戏，我们的目标不是为了开发游戏，而是为了掌握常见函数和基本开发思路 (多练多练)
实现代码之前 先有思路 实现具体的功能 和进行不断的调式
以下是本人在培训时期老师写的代码 思路图为老师所画
2. 游戏场景
场景为css 和 html 组成
直接上代码
代码如下
<style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {background-color: aliceblue;}h2 {text-align: center;margin: 20px auto;}#box {background-color: white;width: 1000px;height: 500px;box-shadow: 0 0 3px darkcyan;margin: 20px auto;position: relative;}P {display: block;width: 100px;/* 砖块样式 */height: 40px;position: absolute;box-shadow: -2px -3px -6px black;}#baffle {position: absolute;width: 200px;height: 16px;border-radius: 8px;background-color: brown;left: 454px;top: 484px;}#ball {z-index: 99;width: 30px;height: 30px;background: rgb(117, 85, 74);box-shadow: #888 2px 2px 3px;position: absolute;top: 454px;left: 534px;border-radius: 50%;}</style></head><body><h2>打砖块</h2><div id="box"><!-- 小球 --><div id="ball"></div><!-- 挡板 --><div id="baffle"></div></div>网页效果如下:
3. 实现砖块布局
技术准备:
代码实现:
// 让js代码在网页加载后执行window.onload = function () {//获取场景对象var _box = document.querySelector("#box");// ----------------------- 砖块处理部分//定义行数var rows = 3;//计算一行放多少砖块var cols = Math.floor(_box.offsetWidth / 100);//声明一个保存砖数的数组var brickArrs = []//循环 创建砖块for (var i = 0; i < rows; i++) {//循环创建多行for (var j = 0; j < cols; j++) {//循环创建一行中的多个砖块//创建砖块 p 标签var _p = document.createElement("p");_p.style.backgroundColor ="#" + Math.random().toString(16).substr(2, 6);//p 标签定位;位置_p.style.left = j * 100 + "px";_p.style.top = i * 40 + "px";//将砖块添加到场景中_box.appendChild(_p);//将砖块保存到数组中brickArrs.push(_p)}}
网页实现效果:
4.小球和挡板
代码详情在第一段里
5.挡板运动
技术实现:
让挡板运动起来 用左右方向键控制
代码实现:
//-----------挡板运动var _baffle = document.querySelector("#baffle")var _speed = 20document.onkeydown = function(e) {//获取事件对象var e = e || window.event//判断用户按下的按键var keyCode = e.keyCode//用户按下，控制挡板运动switch(keyCode) {case 37:console.log("向左移动")_baffle.style.left = _baffle.offsetLeft - _speed + "px"breakcase 39:console.log("向右移动")_baffle.style.left = _baffle.offsetLeft + _speed + "px"break}
6.挡板边界
左右不超出场景边缘
代码实现:
//挡板边界判断，挡板不能超出边界if(_baffle.offsetLeft < 0) {_baffle.style.left = 0}else if(_baffle.offsetLeft >= (_box.offsetWidth - _baffle.offsetWidth)){_baffle.style.left = (_box.offsetWidth - _baffle.offsetWidth) + "px"}}
网页实现效果:
7.小球运动
需求：小球在游戏区域可以运动起来，碰撞墙壁的时候需要反弹
分析图如下图
代码实现:
//----------小球运动var _ball = document.querySelector("#ball")var speedX = 3 //垂直速度var speedY = -5 //水平速度// ballInterval 全部间隔//setInterval 设置间隔var ballInterval = setInterval(function () {//小球运动起来_ball.style.left = _ball.offsetLeft + speedX + "px"_ball.style.top = _ball.offsetTop + speedY + "px"
8.小球边界
需求：小球不能碰撞下边界，一旦碰撞到下边界游戏结束；下边界上必须让小球碰撞到挡板进行反弹
分析图解:
代码实现:
//边界判断if(_ball.offsetLeft < 0 ) {//左边界speedX = 3}else if(_ball.offsetLeft > (_box.offsetWidth - _ball.offsetWidth)) {speedX = -3}if(_ball.offsetTop < 0 ) { //上边界speedY = 5} else if(( _ball.offsetLeft >= (_baffle.offsetLeft - _ball.offsetWidth/2))&&(_ball.offsetLeft <= (_baffle.offsetLeft + _baffle.offsetWidth - _ball.offsetWidth/2))&&(_ball.offsetTop >= (_baffle.offsetTop -_ball.offsetHeight))) { // 碰到挡板speedY = -5}else if(_ball.offsetTop > (_box.offsetHeight - _ball.offsetHeight)){clearInterval(ballInterval)// clearInterval 清除间隔alert("你漏球了，结束") //弹窗 阻止代码执行 计时器仍然执行 location.reload()//重新加载当前位置 刷新网页}
9.碰撞检测 (重点复杂点)
小球和砖块之间的碰撞检测，小球碰到砖块，砖块消失/小球反弹，
具体操作如图
如果碰撞过程中，按照每一个碰撞面去检测，很容易存在 BUG
代码中通过上下碰撞面、左右碰撞面进行同时检测，检测小球坐标一旦进入砖块
内部就算碰撞成功，让砖块消失/代码中通过 DOM removeChild() 函数移除标签，小球的运动反弹 左右碰撞面-水平速度取反、上下碰撞面-垂直速度取反
代码实现：
//判断小球是否和砖块发生碰撞for(var x = 0; x < brickArrs.length; x++) {//获取一个砖块var brick = brickArrs[x]//碰撞检测collide(brick, _ball)}}, 20)//--------------------- 碰撞检测：小球、砖块// brick ：砖块// ball：小球function collide(brick, ball) {console.log("--------------------------------------")// console.log(brick.offsetLeft, brick.offsetTop, brick.offsetWidth, brick.offsetHeight, "砖块")// console.log(ball.offsetLeft, ball.offsetTop, ball.offsetWidth, ball.offsetHeight, "小球")console.log("--------------------------------------")// 底部碰撞、左侧碰撞、顶部碰撞、右侧碰撞if(//offset 抵消(ball.offsetLeft > (brick.offsetLeft - ball.offsetWidth/2))&&(ball.offsetLeft < (brick.offsetLeft + brick.offsetWidth - ball.offsetWidth/2))&&(ball.offsetTop < (brick.offsetTop + brick.offsetHeight))&&(ball.offsetTop > (brick.offsetTop - brick.offsetHeight))) { // 底部碰撞 或者 顶部碰撞// 碰撞发生，砖块：消失，小球：反弹console.log("碰撞发生，砖块消失，小球反弹.....")speedY = -speedY // 垂直速度取反_box.removeChild(brick)} else if(//offset 抵消(ball.offsetTop > (brick.offsetTop - ball.offsetHeight/2))&&(ball.offsetTop < (brick.offsetTop + brick.offsetHeight - ball.offsetHeight/2))&&(ball.offsetLeft > (brick.offsetLeft - ball.offsetWidth))&&(ball.offsetLeft < (brick.offsetLeft + brick.offsetWidth))) { // 左侧碰撞 或者 右侧碰撞speedX = -speedX_box.removeChild(brick)boom()}}
10.音效处理
当小球和砖块发生碰撞时
创建 audio 标签
设置 src 属性，添加音效文件
不设置 autoplay=true 自动播放
碰撞时调用 audio.play() 播放音效即可
代码如下：
// 音效处理 var _audio = document.createElement("audio") _audio.src = "./img/y993.wav"// _audio.autoplay = true document.appendChild(_audio) function boom() { _audio.play() }
整体代码如下：
<!DOCTYPE html>
<html lang="zh"><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>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {background-color: aliceblue;}h2 {text-align: center;margin: 20px auto;}#box {background-color: white;width: 1000px;height: 500px;box-shadow: 0 0 3px darkcyan;margin: 20px auto;position: relative;}P {display: block;width: 100px;/* 砖块样式 */height: 40px;position: absolute;box-shadow: -2px -3px -6px black;}#baffle {position: absolute;width: 200px;height: 16px;border-radius: 8px;background-color: brown;left: 454px;top: 484px;}#ball {z-index: 99;width: 30px;height: 30px;background: rgb(117, 85, 74);box-shadow: #888 2px 2px 3px;position: absolute;top: 454px;left: 534px;border-radius: 50%;}</style></head><body><h2>打砖块</h2><div id="box"><!-- 小球 --><div id="ball"></div><!-- 挡板 --><div id="baffle"></div></div><script>// 让js代码在网页加载后执行window.onload = function () {//获取场景对象var _box = document.querySelector("#box");// ----------------------- 砖块处理部分//定义行数var rows = 3;//计算一行放多少砖块var cols = Math.floor(_box.offsetWidth / 100);//声明一个保存砖数的数组var brickArrs = []//循环 创建砖块for (var i = 0; i < rows; i++) {//循环创建多行for (var j = 0; j < cols; j++) {//循环创建一行中的多个砖块//创建砖块 p 标签var _p = document.createElement("p");_p.style.backgroundColor ="#" + Math.random().toString(16).substr(2, 6);//p 标签定位;位置_p.style.left = j * 100 + "px";_p.style.top = i * 40 + "px";//将砖块添加到场景中_box.appendChild(_p);//将砖块保存到数组中brickArrs.push(_p)}}//-----------挡板运动var _baffle = document.querySelector("#baffle")var _speed = 20document.onkeydown = function(e) {//获取事件对象var e = e || window.event//判断用户按下的按键var keyCode = e.keyCode//用户按下，控制挡板运动switch(keyCode) {case 37:console.log("向左移动")_baffle.style.left = _baffle.offsetLeft - _speed + "px"breakcase 39:console.log("向右移动")_baffle.style.left = _baffle.offsetLeft + _speed + "px"break}//挡板边界判断，挡板不能超出边界if(_baffle.offsetLeft < 0) {_baffle.style.left = 0}else if(_baffle.offsetLeft >= (_box.offsetWidth - _baffle.offsetWidth)){_baffle.style.left = (_box.offsetWidth - _baffle.offsetWidth) + "px"}}//----------小球运动var _ball = document.querySelector("#ball")var speedX = 3 //垂直速度var speedY = -5 //水平速度// ballInterval 全部间隔//setInterval 设置间隔var ballInterval = setInterval(function () {//小球运动起来_ball.style.left = _ball.offsetLeft + speedX + "px"_ball.style.top = _ball.offsetTop + speedY + "px"//边界判断if(_ball.offsetLeft < 0 ) {//左边界speedX = 3}else if(_ball.offsetLeft > (_box.offsetWidth - _ball.offsetWidth)) {speedX = -3}if(_ball.offsetTop < 0 ) { //上边界speedY = 5} else if(( _ball.offsetLeft >= (_baffle.offsetLeft - _ball.offsetWidth/2))&&(_ball.offsetLeft <= (_baffle.offsetLeft + _baffle.offsetWidth - _ball.offsetWidth/2))&&(_ball.offsetTop >= (_baffle.offsetTop -_ball.offsetHeight))) { // 碰到挡板speedY = -5}else if(_ball.offsetTop > (_box.offsetHeight - _ball.offsetHeight)){clearInterval(ballInterval)// clearInterval 清除间隔alert("你漏球了，结束") //弹窗 阻止代码执行 计时器仍然执行 location.reload()//重新加载当前位置 刷新网页}//判断小球是否和砖块发生碰撞for(var x = 0; x < brickArrs.length; x++) {//获取一个砖块var brick = brickArrs[x]//碰撞检测collide(brick, _ball)}}, 20)//--------------------- 碰撞检测：小球、砖块// brick ：砖块// ball：小球function collide(brick, ball) {console.log("--------------------------------------")// console.log(brick.offsetLeft, brick.offsetTop, brick.offsetWidth, brick.offsetHeight, "砖块")// console.log(ball.offsetLeft, ball.offsetTop, ball.offsetWidth, ball.offsetHeight, "小球")console.log("--------------------------------------")// 底部碰撞、左侧碰撞、顶部碰撞、右侧碰撞if(//offset 抵消(ball.offsetLeft > (brick.offsetLeft - ball.offsetWidth/2))&&(ball.offsetLeft < (brick.offsetLeft + brick.offsetWidth - ball.offsetWidth/2))&&(ball.offsetTop < (brick.offsetTop + brick.offsetHeight))&&(ball.offsetTop > (brick.offsetTop - brick.offsetHeight))) { // 底部碰撞 或者 顶部碰撞// 碰撞发生，砖块：消失，小球：反弹console.log("碰撞发生，砖块消失，小球反弹.....")speedY = -speedY // 垂直速度取反_box.removeChild(brick)} else if(//offset 抵消(ball.offsetTop > (brick.offsetTop - ball.offsetHeight/2))&&(ball.offsetTop < (brick.offsetTop + brick.offsetHeight - ball.offsetHeight/2))&&(ball.offsetLeft > (brick.offsetLeft - ball.offsetWidth))&&(ball.offsetLeft < (brick.offsetLeft + brick.offsetWidth))) { // 左侧碰撞 或者 右侧碰撞speedX = -speedX_box.removeChild(brick)boom()}}// 音效处理 var _audio = document.createElement("audio") _audio.src = "./img/y993.wav"// _audio.autoplay = true document.appendChild(_audio) function boom() { _audio.play() }};</script></body>
</html>网页效果展现如下图：
JS 实现小游戏 打砖块相关推荐
- 开维控制精灵 Ctrl js 快手小游戏 - 自动消砖块
开维控制精灵 Ctrl.js 快手小游戏 - 自动消砖块 Ctrl.js是基于js语法规则的控制类脚本语言,用于自动化软件测试. Ctrl.js 需要在手机上下载"开维控制精灵", ...
- 用javascript编写的小游戏-打砖块
用javascript编写的小游戏-打砖块 前言 启发 下载链接 游戏功能说明 代码效果演示 代码 后记 前言 这是我在CSDN发表的第一篇文章.是我在初学javascript后, 忽然来了兴致, 编 ...
- 也分享自己做的JS扫雷小游戏
看了草根程序猿分享的JS扫雷小游戏 想起去年的时候自己也做了一个 于是也拿出来分享之 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释 ...
- c语言经典游戏,C语言——经典小游戏——打砖块
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 C语言--经典小游戏--打砖块 玩法:按A与D控制球拍的移动,按S暂停游戏 百度网盘下载:http://pan.baidu.com/s/1o64ECTc ...
- JS扫雷小游戏(DOM (html+css+js))
一:效果图: 二:资源 js扫雷小游戏源代码下载地址 js贪吃蛇小游戏链接 python小黄脸大战小游戏链接 vue高仿网易云音乐app 三:源代码: html部分: <!DOCTYPE htm ...
- js网页小游戏老虎不吃素
下载地址 一款漂亮的网页小游戏,js网页小游戏老虎不吃素. dd:
- 手把手带你写Node.JS版本小游戏
JavaScript的出现催动了前端开发的萌芽,前后端分离促进了Vue.React等开发框架的发展,Weex.React-Native等的演变赋予了并存多端开发的能力,而Node.JS的面世无疑是推动 ...
- python打砖块游戏算法设计分析_python小游戏--打砖块的实现与讲解（python自学总结系列）...
我在系统地学习了python之后,觉得python带给我很多乐趣,因此在网络平台GitHub上寻找了这个小游戏,这个小游戏是一个很经典的游戏,只是打砖块,但是可以很好地入门并体现python的乐趣. ...
- js写小游戏（打字母）
关键事件: 的Math.random()产生0-1的随机数; setInterval()方法按照指定的周期(以毫秒计)来调用函数或计算表达式; clearInterval()方法取消由setInter ...
- python小项目：MakeCode小游戏——躲砖块
项目目录 >>>小游戏详细要求如下 1.为躲避砖块在游戏开始时为游戏添加开场动画,让玩家有个心理准备 2.在游戏进行过程中,加入记分系统 3.随着分数的递增,加快砖块的下落速度 4. ...
最新文章
- Core篇——初探Core的认证，授权机制
- Cisco对中国CCIE认证下重手了
- 通过qemu调试centos7内核
- LeetCode 198. 打家劫舍(动态规划)
- 视频编解码（十）：FFMPEG操作总结二
- 联合哈佛大学，Google 要用人工智能来预测地震余震
- 大国崛起：数据库领域的中国力量
- 黑苹果部分usb、摄像头以及dw1560（BCM94352Z）蓝牙无法识别问题的解决方法
- 并行磁共振成像——SENSE 敏感度编码成像
- FPGA基础知识21(PL控制PS端DDR的设计)
- C++ fstream详解
- 2022考研该如何准备？zym勿入，因为大佬都不需要考研！
- 视频直播的 推流是啥意思
- MSP4302553呼吸灯（附代码）
- 利用aether api实现从指定maven仓库下载jar包
- 微信转盘抽奖前端源码(一)：8个奖品，指针开始时指向缝隙
- 蓝桥杯题目-报纸页数/煤球数/平方怪圈/打印方格/凑算式
- MQL4语言编写“Hello World!”
- webhooks服务器_PHP生产环境 02 - 使用webhooks自动部署服务器代码
- opencv实现轮廓的内接正矩形