打砖块小游戏

A键发射小球开始游戏；
使用左右方向键，进行移动；
游戏结束时按A键重置游戏；
S键暂停游戏；
通关后按N键进入下一关

游戏效果预览

写个HTML页面

通用CSS样式就不赘述了，主要是js

边距及填充部分的css代码

/*---------------------------  边距 start  ---------------------------*/
.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt25{margin-top:25px;}.mt30{margin-top:30px;}.mt35{margin-top:35px;}.mt40{margin-top:40px;}.mt45{margin-top:45px;}.mt50{margin-top:50px;}
.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml25{margin-left:25px;}.ml30{margin-left:30px;}
.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr15{margin-right:15px;}.mr20{margin-right:20px;}.mr25{margin-right:25px;}.mr30{margin-right:30px;}
.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.mb20{margin-bottom:20px;}.mb25{margin-bottom:25px;}.mb30{margin-bottom:30px;}
/*---------------------------  边距 end  ---------------------------*//*---------------------------  填充 start  ---------------------------*/
.pt5{padding-top:5px;}.pt10{padding-top:10px;}.pt15{padding-top:15px;}.pt20{padding-top:20px;}.pt25{padding-top:25px;}.pt30{padding-top:30px;}
.pl5{padding-left:5px;}.pl10{padding-left:10px;}.pl15{padding-left:15px;}.pl20{padding-left:20px;}.pl25{padding-left:25px;}.pl30{padding-left:30px;}
.pr5{padding-right:5px;}.pr10{padding-right:10px;}.pr15{padding-right:15px;}.pr20{padding-right:20px;}.pr25{padding-right:25px;}.pr30{padding-right:30px;}
.pb5{padding-bottom:5px;}.pb10{padding-bottom:10px;}.pb15{padding-bottom:15px;}.pb20{padding-bottom:20px;}.pb25{padding-bottom:25px;}.pb30{padding-bottom:30px;}
/*---------------------------  填充 end  ---------------------------*/

主要的 javascript代码

game.js

class Game {constructor (main) {let g = {main: main,                        // 游戏主函数actions: {},                               // 记录按键动作keydowns: {},                                   // 记录按键keycodestate: 1,                                                     // 游戏状态值，初始默认为1state_START: 1,                                               // 开始游戏state_RUNNING: 2,                                             // 游戏开始运行state_STOP: 3,                                                // 暂停游戏state_GAMEOVER: 4,                                            // 游戏结束state_UPDATE: 5,                                              // 游戏通关canvas: document.getElementById("canvas"),                    // canvas元素context: document.getElementById("canvas").getContext("2d"),  // canvas画布timer: null,                                                  // 轮询定时器fps: main.fps,                                                // 动画帧数，默认60}Object.assign(this, g)}// 绘制页面所有素材draw (paddle, ball, blockList, score) {let g = this// 清除画布g.context.clearRect(0, 0, g.canvas.width, g.canvas.height)// 绘制背景图g.drawBg()// 绘制挡板g.drawImage(paddle)// 绘制小球g.drawImage(ball)// 绘制砖块g.drawBlocks(blockList)// 绘制分数g.drawText(score)}// 绘制图片drawImage (obj) {this.context.drawImage(obj.image, obj.x, obj.y)}// 绘制背景图drawBg () {let bg = imageFromPath(allImg.background)this.context.drawImage(bg, 0, 0)}// 绘制所有砖块drawBlocks (list) {for (let item of list) {this.drawImage(item)}}// 绘制计数板drawText (obj) {this.context.font = '24px Microsoft YaHei'this.context.fillStyle = '#fff'// 绘制分数this.context.fillText(obj.text + obj.allScore, obj.x, obj.y)// 绘制关卡this.context.fillText(obj.textLv + obj.lv, this.canvas.width - 100, obj.y)}// 游戏结束gameOver () {// 清除定时器clearInterval(this.timer)// 清除画布this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)// 绘制背景图this.drawBg()// 绘制提示文字this.context.font = '48px Microsoft YaHei'this.context.fillStyle = '#fff'this.context.fillText('游戏结束', 404, 226)}// 游戏晋级goodGame () {// 清除定时器clearInterval(this.timer)// 清除画布this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)// 绘制背景图this.drawBg()// 绘制提示文字this.context.font = '48px Microsoft YaHei'this.context.fillStyle = '#fff'this.context.fillText('恭喜晋级下一关卡', 308, 226)}// 游戏通关finalGame () {// 清除定时器clearInterval(this.timer)// 清除画布this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)// 绘制背景图this.drawBg()// 绘制提示文字this.context.font = '48px Microsoft YaHei'this.context.fillStyle = '#fff'this.context.fillText('恭喜通关全部关卡', 308, 226)}// 注册事件registerAction (key, callback) {this.actions[key] = callback}// 小球碰撞砖块检测checkBallBlock (g, paddle, ball, blockList, score) {let p = paddle, b = ball// 小球碰撞挡板检测if (p.collide(b)) {// 当小球运动方向趋向挡板中心时，Y轴速度取反，反之则不变if (Math.abs(b.y + b.h/2 - p.y + p.h/2) > Math.abs(b.y + b.h/2 + b.speedY - p.y + p.h/2)) {b.speedY *= -1} else {b.speedY *= 1}// 设置X轴速度b.speedX = p.collideRange(b)}// 小球碰撞砖块检测blockList.forEach(function (item, i, arr) {if (item.collide(b)) { // 小球、砖块已碰撞if (!item.alive) { // 砖块血量为0时，进行移除arr.splice(i, 1)}// 当小球运动方向趋向砖块中心时，速度取反，反之则不变if ((b.y < item.y && b.speedY < 0) || (b.y > item.y && b.speedY > 0)) {if (!item.collideBlockHorn(b)) {b.speedY *= -1} else { // 当小球撞击砖块四角时，Y轴速度不变b.speedY *= 1}} else {b.speedY *= 1}// 当小球撞击砖块四角时，X轴速度取反if (item.collideBlockHorn(b)) {b.speedX *= -1}// 计算分数score.computeScore()}})// 挡板移动时边界检测if (p.x <= 0) { // 到左边界时p.isLeftMove = false} else {p.isLeftMove = true}if (p.x >= 1000 - p.w) { // 到右边界时p.isRightMove = false} else {p.isRightMove = true}// 移动小球b.move(g)}// 设置逐帧动画setTimer (paddle, ball, blockList, score) {let g = thislet main = g.maing.timer = setInterval(function () {// actions集合let actions = Object.keys(g.actions)for (let i = 0; i < actions.length; i++) {let key = actions[i]if(g.keydowns[key]) {// 如果按键被按下，调用注册的actiong.actions[key]()}}// 当砖块数量为0时，挑战成功if (blockList.length == 0) {if (main.LV === main.MAXLV) { // 最后一关通关// 升级通关g.state = g.state_UPDATE// 挑战成功，渲染通关场景g.finalGame()} else { // 其余关卡通关// 升级通关g.state = g.state_UPDATE// 挑战成功，渲染下一关卡场景g.goodGame()}}// 判断游戏是否结束if (g.state === g.state_GAMEOVER) {g.gameOver()}// 判断游戏开始时执行事件if (g.state === g.state_RUNNING) {g.checkBallBlock(g, paddle, ball, blockList, score)// 绘制游戏所有素材g.draw(paddle, ball, blockList, score)} else if (g.state === g.state_START){// 绘制游戏所有素材g.draw(paddle, ball, blockList, score)}}, 1000/g.fps)}/*** 初始化函数*/init () {let g = this,paddle = g.main.paddle,ball = g.main.ball,blockList = g.main.blockList,score = g.main.score// 设置键盘按下及松开相关注册函数window.addEventListener('keydown', function (event) {g.keydowns[event.keyCode] = true})window.addEventListener('keyup', function (event) {g.keydowns[event.keyCode] = false})g.registerAction = function (key, callback) {g.actions[key] = callback}// 注册左方向键移动事件g.registerAction('37', function(){// 判断游戏是否处于运行阶段if (g.state === g.state_RUNNING && paddle.isLeftMove) {paddle.moveLeft()}})// 注册右方向键移动事件g.registerAction('39', function(){// 判断游戏是否处于运行阶段if (g.state === g.state_RUNNING && paddle.isRightMove) {paddle.moveRight()}})window.addEventListener('keydown', function (event) {switch (event.keyCode) {// 注册A键发射事件case 65 :if (g.state === g.state_GAMEOVER) { // 游戏结束时// 开始游戏g.state = g.state_START// 初始化g.main.start()} else { // 开始游戏ball.fired = trueg.state = g.state_RUNNING}break// N 键进入下一关卡case 78 :// 游戏状态为通关，且不为最终关卡时if (g.state === g.state_UPDATE && g.main.LV !== g.main.MAXLV) { // 进入下一关// 开始游戏g.state = g.state_START// 初始化下一关卡g.main.start(++g.main.LV)}break// S键暂停游戏事件case 83 :g.state = g.state_STOPbreak}})// 设置轮询定时器g.setTimer(paddle, ball, blockList, score)}
}

关于 ES6 语法，网上资料很多

游戏的主函数

全局的js

小清新版js打砖块游戏相关推荐

小清新版js扫雷（使用原生js）
目录扫雷小游戏预览游戏讲解界面逻辑设计寻找目标格子周围格子更新数字游戏结束开始游戏总结完整代码 HTML css js 扫雷小游戏预览游戏讲解扫雷是一个益智游戏,通过格盘上 ...
转正_述职报告_真实情景小清新版
特别不想矫情地说白驹过隙,乌飞兔走,可还是发现自己抓不住岁月 .眼看着就要入职满整整两月,自己也已经完成了从学生变为社会人的过度. 2个月的试用期即将结束,我的工作也需要做一个总结与整理 ...
pytorch手写数字识别【源码实现-小清新版】
引言手写数字识别,也就是让机器能够习得图片中的手写数字,并能正确归类. 本文使用 pytorch 搭建一个简单的神经网络,实现手写数字的识别, 从本文,你可了解到: 1.搭建神经网络的流程 2.完成 ...
2048游戏配色方案的计算(小清新版)
等我小学期几个课的考试结束之后想要来试试用java写一个比较完善的2048游戏(咕咕咕~咕咕咕~).今天上大物课的时候突发奇想,想着先找一组配色方案来看看.我就用一个木函里面的取色器功能选了两个颜色( ...
H5音乐播放器(小清新版)
你是否因为需要一个网页音乐播放器而苦苦翻阅百度?而且你搜索到的播放器无论在UI交互还是功能方面都差强人意?也许你曾用过网易云或者QQ音乐等网页插件,但还是发现有一些问题,比如:不能展示歌词,不能维护自 ...
小清新版终端工具cmder配置
1. 官网下载选择mini版即可 2. 安装完成后,配置环境变量右键此电脑-属性-高级系统设置-高级-环境变量系统变量-新建-变量名:CMDER_HOME 变量值:F:\cmder_mini(本 ...
小肩膀POST+JS第三期(价值1000元)_高清带源码
小肩膀POST+JS第三期(价值1000元)_高清带源码 .课程整体介绍 2.谷歌开发者工具 3.火狐firebug组件 4.火狐开发者工具 5.HTTP Analyzer V7 6.Fiddler ...
数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area--(极地图) 极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异.当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表. ...
逆向小程序破解js神器-(工具篇)
首先声明: 此次逆向Js只为学习交流使用,切勿用于其他非法用途,关键代码均打码刚刚写过一篇,如何从小程序中把需要逆向的项目给打包导出到本地, 并翻译成js项目,进行破解.本章节主要分享动态调试小程序 ...

小清新版js打砖块游戏

打砖块小游戏

游戏效果预览

写个HTML页面

边距及填充部分的css代码

主要的 javascript代码

游戏的主函数

全局的js

小清新版js打砖块游戏相关推荐

最新文章

热门文章