小清新版js打砖块游戏
打砖块小游戏
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打砖块游戏
打砖块小游戏
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 语法，网上资料很多