利用原生js实现html5小游戏之打砖块(附源码)

前端之家收集整理的这篇文章主要介绍了利用原生js实现html5小游戏之打砖块(附源码)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读。

首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力;关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧。小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较真

作为第一次分享,我选择打砖块这个逻辑不算太复杂的小游戏。同时,为了接近真实游戏效果,在游戏中也添加了关卡,砖块血量,以及物理碰撞模型的简略实现。其实关注游戏实现逻辑就好了

线上演示地址:

github地址:

本地下载地址:

ps:github地址和本地下载有代码演示,以及源码可供参考,线上演示地址可供预览

先上一个游戏完成后的截图

游戏工程目录如下

首页html │ ├─ css // css样式资源文件 ├─ images // 图片资源文件 └─ js ├─ common.js // 公共js方法 ├─ game.js // 游戏主要运行逻辑 └─ scene.js // 游戏场景相关类

游戏实现逻辑

这里对游戏中需要绘制的挡板、小球、砖块、计分板都进行了实例化,并将游戏主要运行逻辑单独进行实例化

挡板 Paddle

图片宽度 h: 22,// 图片高度 speed: 10,// x轴移动速度 ballSpeedMax: 8,// 小球反弹速度最大值 image: imageFromPath(allImg.paddle),// 引入图片对象 isLeftMove: true,// 能否左移 isRightMove: true,// 能否右移 } Object.assign(this,p) } // 向左移动 moveLeft () { ... } // 向右移动 moveRight () { ... } // 小球、挡板碰撞检测 collide (ball) { ... } // 计算小球、挡板碰撞后x轴速度值 collideRange (ball) { ... } }

挡板类:主要会定义其坐标位置、图片大小、x 轴位移速度、对小球反弹速度的控制等,再根据不同按键响应 moveLeft 和 moveRight 移动事件,collide 方法检测小球与挡板是否碰撞,并返回布尔值

小球 Ball

图片宽度 h: 18,// 图片高度 speedX: 1,// x 轴速度 speedY: 5,// y 轴速度 image: imageFromPath(allImg.ball),// 图片对象 fired: false,// 是否运动,默认静止不动 } Object.assign(this,b) } move (game) { ... } }

小球类:其大部分属性与挡板类似,主要通过 move 方法控制小球运动轨迹

砖块 Block

图片宽度 h: 20,// 图片高度 image: life == 1 ? imageFromPath(allImg.block1) : imageFromPath(allImg.block2),// 图片对象 life: life,// 生命值 alive: true,// 是否存活 } Object.assign(this,bk) } // 消除砖块 kill () { ... } // 小球、砖块碰撞检测 collide (ball) { ... } // 计算小球、砖块碰撞后x轴速度方向 collideBlockHorn (ball) { ... } }

砖块类:会有两个属性不同,分别是 life 和 是否存活。然后,在小球和砖块撞击时,调用 kill 方法扣除当前砖块血量,当血量为0时,清除砖块。collide 方法检测小球与砖块是否碰撞,并返回布尔值

计分板 score

score { constructor (_main) { let s = { x: _main.score_x,// x 轴坐标 y: _main.score_y,// y 轴坐标 text: '分数:',// 文本分数 textLv: '关卡:',// 关卡文本 score: 200,// 每个砖块对应分数 allscore: 0,// 总分 blockList: _main.blockList,// 砖块对象集合 blockListLen: _main.blockList.length,// 砖块总数量 lv: _main.LV,// 当前关卡 } Object.assign(this,s) } // 计算总分 computescore () { ... } }

分数类:会记录当前分数、关卡数,其中 computescore 方法会在小球碰撞砖块且砖块血量为0时调用,并累加总分

场景 Scene

生成不同关卡 creatBlockList () { ... } }

场景类:主要是根据游戏难度级别,绘制不同关卡及砖块集合(目前只生成了三个关卡)。其中 creatBlockList 方法生成所有砖块的二维坐标数组,再调用 initBlockList 方法进行所有砖块的实例化

游戏主逻辑 Game

游戏核心类:这里包括游戏主要运行逻辑,包括但不限于以下几点

  • 绘制游戏整个场景
  • 调用定时器逐帧绘制动画
  • 游戏通关及游戏结束判定
  • 绑定按钮事件
  • 边界检测处理函数
  • 碰撞检测处理函数

入口函数 _main

score: null,// 计分板对象 ball_x: 491,// 小球默认 x 轴坐标 ball_y: 432,// 小球默认 y 轴坐标 paddle_x: 449,// 挡板默认 x 轴坐标 paddle_y: 450,// 挡板默认 y 轴坐标 score_x: 10,// 计分板默认 x 轴坐标 score_y: 30,// 计分板默认 y 轴坐标 fps: 60,// 游戏运行帧数 game: null,// 游戏主要逻辑对象 start: function () { let self = this /** * 生成场景(根据游戏难度级别不同,生成不同关卡) */ self.scene = new Scene(self.LV) // 实例化所有砖块对象集合 self.blockList = self.scene.initBlockList() /** * 小球 */ self.ball = new Ball(self) /** * 挡板 */ self.paddle = new Paddle(self) /** * 计分板 */ self.score = new score(self) /** * 游戏主要逻辑 */ self.game = new Game(self.fps) /** * 游戏初始化 */ self.game.init(self) } }

入口函数:实现了游戏中需要的所有类的实例化,并进行游戏的初始化

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

猜你在找的JavaScript相关文章