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) } }
入口函数：实现了游戏中需要的所有类的实例化，并进行游戏的初始化
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: