小游戏制作QQ宠物系列 ----躲避老鼠

本文章是小游戏制作系列，小游戏制作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();
        }
    }
}

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()// 创建跳跃目标
}

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()
            })
        }
    }
}

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();
    }
}

游戏优化

需要优化游戏图像
优化操作细节
方法参数可传递优化

git地址

github地址