用原生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://xiaozai.jb51.net/201801/yuanma/H5-game-blockbreaker(jb51.net)

PS: github地址和本地下载有代码演示，还有源代码供参考，在线演示地址供预览

一、上一场比赛结束后的截图

游戏项目目录如下。index.html//homepage htmlCSS//CSS样式资源文件 images //图片资源文件 js common.js //public js方法 game.js //游戏的主要操作逻辑

在这里，游戏中需要绘制的挡板、球、砖和记分牌被实例化，游戏的主要运行逻辑被单独实例化

挡板桨

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)} //向左移动(){ }.}//向右移动().}//碰撞(球)用于球和挡板碰撞检测{.}//计算球与挡板碰撞后的X轴速度值{.}}挡板类：主要定义其坐标位置、画面大小、x轴位移速度、球反弹速度的控制等。然后，根据不同的按钮响应左右移动事件，碰撞方法检测球是否与挡板碰撞，并返回布尔值

小球球

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 3360 imagefrompath(allimg . ball)，//图片对象fird: false，//是否移动，默认为Static }分配(这个，b)}移动(游戏)}.}}小球：其大部分属性与挡板类似，小球的运动轨迹主要由Move方法控制

砖块

Classblock {constructor (x，y，life=1) {let bk={x:x，//x轴坐标y: y，//y轴坐标w: 50，//图片宽度h: 20，//图片高度image: life==1？imagefrompath(allimg . block 1): imagefrompath(allimg . block 2)，//图片对象life: life，//生命值live:true，//活还是不活} Object.assign(this，Bk)} //消除砖块kill(){ }.} //球、砖碰撞检测碰撞(球){ }.} //计算X轴速度方向碰撞块喇叭(球){ 0.}}} Brick类：会有两种不同的属性，分别是生命和生存。然后，当球与砖块碰撞时，调用击杀法扣除当前砖块血量，当血量为0时，清除砖块。碰撞方法检测球是否与砖块碰撞，并返回一个布尔值

记分卡分数

class score { constructor(_ main){ let s={ x : _ main . score _ x，//x轴坐标y: _main.score_y，//y轴坐标text:' score:'，//文本评分textLv:' level://level文本评分： 200，//每个砖块对应的score all score 3360 0 0 0，//总分blockList: _main.blockList，//砖块对象集blocklistlen: _LV，//当前级别} Object.assign(this，S)} //计算总分computeScore(){ 0.}}得分类：记录当前得分和检查点数量，其中球击中砖块，砖块血量为0时会调用computeScore方法，累计总得分

场景场景

class scene { constructor(LV){ let s={ LV : LV，//游戏难度等级canvas 3360 document . getelementbyid(' canvas ')，//canvas对象blocklist3360 []，//砖块坐标集} Object.assign(this，s)} //实例化所有砖块对象initBlockList(){ }.} //创建砖块坐标的二维数组，并生成不同级别的creatBlockList(){ }.}}场景类：主要根据游戏难度等级绘制不同的关卡和砖组(目前只生成了三个关卡)。其中creatBlockList方法创建所有砖块的二维坐标数组，然后调用initBlockList方法实例化所有砖块

游戏主逻辑游戏

class game { constructor(fps=60){ let g={ actions : }，//记录按键动作key downs : }，///记录按键键码state: 1，//游戏状态值，初始默认为1 state_START: 1，//开始游戏状态_ running33602，//开始游戏运行状态_ stop33603，//暂停游戏状态_ gameover33604，//结束游戏状态_ update33605，//游戏间隙getcontext ('2d ')，//canvas Canvas timer: null，//轮询Timer: fps，//动画帧数，默认值为60} Object.assign(this，g)}.}游戏核心类：这包括游戏的主要操作逻辑，包括但不限于以下几点

画出游戏的整个场景，调用定时器，一帧一帧的画出动画。游戏间隙和游戏结束决定。绑定按钮事件边界检测处理函数碰撞检测处理函数入口函数_main

Let _main={LV: 1，//初始级MAXLV: 3，//最终级场景： null，//场景对象blocklist3360 null，//所有砖块对象设置ball: null，//Ball对象paddle: null，//挡板对象Score3360 null，//记分板对象ball_x: 491，///Ball默认X轴坐标ball _ y: 432，///Ball默认Y轴坐标paddle_x3 //游戏的主要逻辑对象start : function(){ let self=this/* * *，生成场景(根据游戏的难度高低，生成不同的级别)*/self.scene=新场景(self . LV)//实例化所有砖块对象集self . block list=self . scene . init block list()/* * *小球*/self.ball=新球(self) /** *挡板*/self . paddle=new paddle(self)/* * *记分板*/self . score=news core(self)/* * *游戏的主要逻辑*/game self。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。