本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法。有一定的参考价值&＃xff0c;有需要的朋友可以参考一下&＃xff0c;希望对大家有所帮助。
前言
PS&＃xff1a;本次项目中使用了大量 es6 语法&＃xff0c;故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读。
首先&＃xff0c;先说明一下做这个系列的目的&＃xff1a;其实主要源于博主希望熟练使用 canvas 的相关 api &＃xff0c;同时对小游戏的实现逻辑比较感兴趣&＃xff0c;所以希望通过这一系列的小游戏来提升自身编程能力&＃xff1b;关于 es6 语法&＃xff0c;个人认为以后 es6 语法会越来越普及&＃xff0c;所以算是提前熟悉语法使用技巧。小游戏的实现逻辑上可能并不完善&＃xff0c;也许会有一些 bug &＃xff0c;但是毕竟只是为了提升编程能力与技巧&＃xff0c;希望大家不要太较真
作为第一次分享&＃xff0c;我选择打砖块这个逻辑不算太复杂的小游戏。同时&＃xff0c;为了接近真实游戏效果&＃xff0c;在游戏中也添加了关卡&＃xff0c;砖块血量&＃xff0c;以及物理碰撞模型的简略实现。其实关注游戏实现逻辑就好了
线上演示地址&＃xff1a;http://demo.jb51.net/js/2018/h5-game-blockBreaker
github地址&＃xff1a;https://github.com/yangyunhe369/h5-game-blockBreaker
本地下载地址&＃xff1a;http://xiazai.jb51.net/201801/yuanma/h5-game-blockBreaker(jb51.net).rar
ps&＃xff1a;github地址和本地下载有代码演示&＃xff0c;以及源码可供参考&＃xff0c;线上演示地址可供预览
先上一个游戏完成后的截图
游戏工程目录如下.
├─ index.html // 首页html
│
├─ css // css样式资源文件
├─ images // 图片资源文件
└─ js
├─ common.js // 公共js方法
├─ game.js // 游戏主要运行逻辑
└─ scene.js // 游戏场景相关类
游戏实现逻辑
这里对游戏中需要绘制的挡板、小球、砖块、计分板都进行了实例化&＃xff0c;并将游戏主要运行逻辑单独进行实例化
挡板 Paddleclass Paddle {
constructor (_main) {
let p &＃61; {
x: _main.paddle_x, // x 轴坐标
y: _main.paddle_y, // y 轴坐标
w: 102, // 图片宽度
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) {
...
}
}
挡板类&＃xff1a;主要会定义其坐标位置、图片大小、x 轴位移速度、对小球反弹速度的控制等&＃xff0c;再根据不同按键响应 moveLeft 和 moveRight 移动事件&＃xff0c;collide 方法检测小球与挡板是否碰撞&＃xff0c;并返回布尔值
小球 Ballclass Ball {
constructor (_main) {
let b &＃61; {
x: _main.ball_x, // x 轴坐标
y: _main.ball_y, // y 轴坐标
w: 18, // 图片宽度
h: 18, // 图片高度
speedX: 1, // x 轴速度
speedY: 5, // y 轴速度
image: imageFromPath(allImg.ball), // 图片对象
fired: false, // 是否运动&＃xff0c;默认静止不动
}
Object.assign(this, b)
}
move (game) {
...
}
}
小球类&＃xff1a;其大部分属性与挡板类似&＃xff0c;主要通过 move 方法控制小球运动轨迹
砖块 Blockclass Block {
constructor (x, y, life &＃61; 1) {
let bk &＃61; {
x: x, // x 轴坐标
y: y, // y 轴坐标
w: 50, // 图片宽度
h: 20, // 图片高度
image: life &＃61;&＃61; 1 ? imageFromPath(allImg.block1) : imageFromPath(allImg.block2), // 图片对象
life: life, // 生命值
alive: true, // 是否存活
}
Object.assign(this, bk)
}
// 消除砖块
kill () {
...
}
// 小球、砖块碰撞检测
collide (ball) {
...
}
// 计算小球、砖块碰撞后x轴速度方向
collideBlockHorn (ball) {
...
}
}
砖块类&＃xff1a;会有两个属性不同&＃xff0c;分别是 life 和 是否存活。然后&＃xff0c;在小球和砖块撞击时&＃xff0c;调用 kill 方法扣除当前砖块血量&＃xff0c;当血量为0时&＃xff0c;清除砖块。collide 方法检测小球与砖块是否碰撞&＃xff0c;并返回布尔值
计分板 Scoreclass Score {
constructor (_main) {
let s &＃61; {
x: _main.score_x, // x 轴坐标
y: _main.score_y, // y 轴坐标
text: &＃39;分数&＃xff1a;&＃39;, // 文本分数
textLv: &＃39;关卡&＃xff1a;&＃39;, // 关卡文本
score: 200, // 每个砖块对应分数
allScore: 0, // 总分
blockList: _main.blockList, // 砖块对象集合
blockListLen: _main.blockList.length, // 砖块总数量
lv: _main.LV, // 当前关卡
}
Object.assign(this, s)
}
// 计算总分
computeScore () {
...
}
}
分数类&＃xff1a;会记录当前分数、关卡数&＃xff0c;其中 computeScore 方法会在小球碰撞砖块且砖块血量为0时调用&＃xff0c;并累加总分
场景 Sceneclass Scene {
constructor (lv) {
let s &＃61; {
lv: lv, // 游戏难度级别
canvas: document.getElementById("canvas"), // canvas 对象
blockList: [], // 砖块坐标集合
}
Object.assign(this, s)
}
// 实例化所有砖块对象
initBlockList () {
...
}
// 创建砖块坐标二维数组&＃xff0c;并生成不同关卡
creatBlockList () {
...
}
}
场景类&＃xff1a;主要是根据游戏难度级别&＃xff0c;绘制不同关卡及砖块集合(目前只生成了三个关卡)。其中 creatBlockList 方法先生成所有砖块的二维坐标数组&＃xff0c;再调用 initBlockList 方法进行所有砖块的实例化
游戏主逻辑 Gameclass Game {
constructor (fps &＃61; 60) {
let g &＃61; {
actions: {}, // 记录按键动作
keydowns: {}, // 记录按键 keycode
state: 1, // 游戏状态值&＃xff0c;初始默认为1
state_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: fps, // 动画帧数&＃xff0c;默认60
}
Object.assign(this, g)
}
...
}
游戏核心类&＃xff1a;这里包括游戏主要运行逻辑&＃xff0c;包括但不限于以下几点绘制游戏整个场景
调用定时器逐帧绘制动画
游戏通关及游戏结束判定
绑定按钮事件
边界检测处理函数
碰撞检测处理函数
入口函数 _mainlet _main &＃61; {
LV: 1, // 初始关卡
MAXLV: 3, // 最终关卡
scene: null, // 场景对象
blockList: null, // 所有砖块对象集合
ball: null, // 小球对象
paddle: null, // 挡板对象
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 &＃61; this
/**
* 生成场景(根据游戏难度级别不同&＃xff0c;生成不同关卡)
*/
self.scene &＃61; new Scene(self.LV)
// 实例化所有砖块对象集合
self.blockList &＃61; self.scene.initBlockList()
/**
* 小球
*/
self.ball &＃61; new Ball(self)
/**
* 挡板
*/
self.paddle &＃61; new Paddle(self)
/**
* 计分板
*/
self.score &＃61; new Score(self)
/**
* 游戏主要逻辑
*/
self.game &＃61; new Game(self.fps)
/**
* 游戏初始化
*/
self.game.init(self)
}
}
入口函数&＃xff1a;实现了游戏中需要的所有类的实例化&＃xff0c;并进行游戏的初始化
京公网安备 11010802041100号