首页 > 分享 > 小游戏制作QQ宠物系列

小游戏制作QQ宠物系列

萌宠菠菠乐园
2024-10-16 04:16

文章目录游戏思路重点代码模块游戏优化git地址

本文章是小游戏制作系列，小游戏制作QQ宠物系列 ----躲避老鼠

游戏思路

游戏规则：
点击鼠标左键，控制左侧人物跳跃躲避右侧老鼠的撞击，成功躲避老鼠的撞击则积分+1；否则游戏结束。老鼠的速度是随机的。
最终游戏界面如下：
在这里插入图片描述

重点代码模块

html代码
在这里插入图片描述
js代码重点方法（未优化版）
game.js

// 设置初始化画布和初始化参数 function Game() { this.gradeElem = document.getElementsByClassName('grade')[0];// 分数对象 this.canvas = document.getElementById('canvas');// 画布对象 this.cxt = this.canvas.getContext('2d');// 画布2d this.grade = 0;// 初始分数 this.status = true;// 游戏进程是否正常 false为不正常 // 画布点击事件 this.canvas.onclick = function (e) { if (jumper.jumpStatus) { return false; } requestAnimationFrame(() => { jumper.rise = true; jumper.jump(); }) } } //碰撞检测，失败停止游戏，成功继续游戏并积分 function collisionDetection() { if (silider.right <= jumper.left + jumper.width && silider.right >= jumper.left - silider.width) { // 在这个区间进行碰撞校验 if (jumper.jumpHeight <= silider.height) { game.status = false; gameOver(); } } }

12345678910111213141516171819202122232425262728

index.js

// 开始 let game = new Game();//初始化游戏 let silider = null;//设置滑块 let siliderNum = 0; let jumper = null;// 设置跳跃目标 function init(time) { game.cxt.clearRect(0, 0, 300, 150); game.cxt.save(); game.status = true; // 设置游戏状态 createSilder(time);//创建滑块 createJumper()// 创建跳跃目标 } 123456789101112

jumper.js

// 设置人物模型，只需要能操作跳跃就行。 function Jumper(residence) { this.top = 100;///人物模型定位距离顶部高度 this.left = 30;// 人物模型离左边距离 this.width = 20;// 人物模型宽度 this.height = 10;// 人物模型高度 this.jumpHeight = 0;// 调高数据 this.maxJumpHeight = 34;//最高可跳高度 this.color = "#0000ff";//填充颜色 this.rise = false;//是否处于上升状态 this.jumpStatus = false;//是否处理跳跃状态 // 初始化绘制人物高度 game.cxt.fillStyle = this.color; game.cxt.fillRect(this.left, this.top, this.width, this.height) game.cxt.stroke(); game.cxt.save(); // 跳跃动画 this.jump = function () { if (!game.status) { return false; } this.jumpStatus = true; // 清除固定位置的像素 game.cxt.clearRect(this.left, this.top - this.jumpHeight, this.width, this.height); game.cxt.save(); if (this.jumpHeight <= 0 && !this.rise) { this.jumpHeight == 0; // 重新绘制位置 game.cxt.fillStyle = this.color; game.cxt.fillRect(this.left, this.top - this.jumpHeight, this.width, this.height) game.cxt.stroke(); game.cxt.save(); this.jumpStatus = false; } else { if (this.jumpHeight < this.maxJumpHeight && this.rise) { this.jumpHeight++; } else { this.jumpHeight--; this.rise = false; } // 重新绘制位置 game.cxt.fillStyle = this.color; game.cxt.fillRect(this.left, this.top - this.jumpHeight, this.width, this.height) game.cxt.stroke(); game.cxt.save(); requestAnimationFrame(() => { this.jump() }) } } }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

silder.js

// 设置滑块，也就是目标,需要经常刷新，但是不需要换位置和大小，只需要改变速度和停留时间就行了。 function RestSilider(residence) { this.residence = residence; this.speed = residence; this.right = 250; this.sillderSpeed = Math.ceil(Math.random() * 4);//随机滑块滑动的速度 this.top = 100; this.height = 10; this.width = 20; colorArr = ["red", 'yeelow', "green", "#000", "pink"] this.color = colorArr[Math.ceil(Math.random() * 10)] game.cxt.fillStyle = this.color; game.cxt.fillRect(this.right, this.top, this.width, this.height) game.cxt.stroke(); game.cxt.save(); // 滑块滑动动画 this.sillder = function () { if (!game.status) { return false; } // 清除固定位置的像素 game.cxt.fillStyle = this.color; game.cxt.clearRect(this.right, this.top, this.width, this.height); game.cxt.stroke(); game.cxt.save(); if (this.right < 0) { // 重新绘制位置 gameContiun(); } else { this.right -= this.sillderSpeed // 重新绘制位置 game.cxt.fillStyle = this.color; game.cxt.fillRect(this.right, this.top, this.width, this.height) game.cxt.stroke(); game.cxt.save(); requestAnimationFrame(() => { this.sillder() }) } // 开启碰撞检测 collisionDetection(); } }

12345678910111213141516171819202122232425262728293031323334353637383940414243