利用原生js实现html5打砖块小游戏(代码示例)
前言
PS:本次项目中使用了大量 es6 语法,故关于 es6 语法不太熟知的小伙伴最好能先理解一些根本的道理再连续阅读。
第一,先说明一下做这个系列的目的:其实主要源于博主但愿熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比力感乐趣,所以但愿通过这一系列的小游戏来晋升本身编程能力;关于 es6 语法,个人认为今后 es6 语法会越来越普及,所以算是提早熟知语法使用技巧。小游戏的实现逻辑上大概并不完美,或许会有一些 bug ,但是究竟只是为了晋升编程能力与技巧,但愿大家不要太较真
作为第一次分享,我选中打砖块这个逻辑不算太复杂的小游戏。同时,为了接近真实游戏结果,在游戏中也增加了关卡,砖块血量,乃至物理碰撞模型的简单实现。其实关注游戏实现逻辑就好了
线上演示地址:http://demo.jb51.net/js/2018/h5-game-blockBreaker
github地址:https://github.com/yangyunhe369/h5-game-blockBreaker
当地下载地址:http://xiazai.jb51.net/201801/yuanma/h5-game-blockBreaker(jb51.net).rar
ps:github地址和当地下载有代码演示,乃至源码可供参照 ,线上演示地址可供预览
先上一个游戏完成后的截图
游戏工程名目如下
. ├─ index.html // 首页html │ ├─ css // css样式资源文件 ├─ images // 图片资源文件 └─ js ├─ common.js // 公共js办法 ├─ game.js // 游戏主要运转逻辑 └─ scene.js // 游戏场景相关类
游戏实现逻辑
这里对游戏中需要绘制的挡板、小球、砖块、计分板都停止了实例化,并将游戏主要运转逻辑独自停止实例化
挡板 Paddle
class Paddle { constructor (_main) { let p = { 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) { ... } }
挡板类:主要会定义其坐标位置、图片大小、x 轴位移速度、对小球反弹速度的操纵等,再按照不一样按键响应 moveLeft 和 moveRight 移动事件,collide 办法检测小球与挡板可否碰撞,并返回布尔值
小球 Ball
class Ball { constructor (_main) { let b = { 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, // 可否运动,默许静止不动 } Object.assign(this, b) } move (game) { ... } }
小球类:其大部分属性与挡板相似,主要通过 move 办法操纵小球运动轨迹
砖块 Block
class Block { constructor (x, y, life = 1) { let bk = { x: x, // x 轴坐标 y: y, // y 轴坐标 w: 50, // 图片宽度 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
class 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
class Scene { constructor (lv) { let s = { lv: lv, // 游戏难度级别 canvas: document.getElementById("canvas"), // canvas 对象 blockList: [], // 砖块坐标汇合 } Object.assign(this, s) } // 实例化所有砖块对象 initBlockList () { ... } // 创立砖块坐标二维数组,并生成不一样关卡 creatBlockList () { ... } }
场景类:主如果按照游戏难度级别,绘制不一样关卡及砖块汇合(当前只生成了三个关卡)。其中 creatBlockList 办法教师成所有砖块的二维坐标数组,再调取 initBlockList 办法停止所有砖块的实例化
游戏主逻辑 Game
class Game { constructor (fps = 60) { let g = { actions: {}, // 记载按键动作 keydowns: {}, // 记载按键 keycode state: 1, // 游戏状态值,初始默许为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, // 动画帧数,默许60 } Object.assign(this, g) } ... }
游戏中心类:这里包罗游戏主要运转逻辑,包罗但不限于以下几点
- 绘制游戏整个场景
- 调取按时器逐帧绘制动画
- 游戏通关及游戏完毕断定
- 绑定按钮事件
- 边界检测处置函数
- 碰撞检测处置函数
入口函数 _main
let _main = { 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 = 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特效大全!
以上就是利用原生js实现html5打砖块小游戏(代码示例)的具体内容,更多请关注百分百源码网其它相关文章!