前言
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 {
constructor (_main) {
let s = {
x: _main.
score_x,// x 轴坐标
y: _main.
score_y,// y 轴坐标
text: '分数：',// 文本分数
textLv: '关卡：',// 关卡文本
score: 200,// 每个砖块对应分数
all
score: 0,// 总分
blockList: _main.blockList,// 砖块对象集合
blockListLen: _main.blockList.length,// 砖块总
数量
lv: _main.LV,// 当前关卡
}
Object.assign(this,s)
}
// 计算总分
compute
score () {
...
}
}
分数类：会记录当前分数、关卡数，其中 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)
}
}
入口函数：实现了游戏中需要的所有类的实例化，并进行游戏的初始化
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/34361.html
