资讯专栏INFORMATION COLUMN

canvas 绘制贪吃蛇游戏

AlphaWallet / 1103人阅读

摘要:蛇类当中的保存当前蛇类的所有的方块。移动,根据保存的私有变量方向用来对数组中保存的方块对象进行更改还有一个苹果类。用于进行随机生成吃苹果,在移动方法中,如果蛇的头方块和苹果方块重合那么吃到苹果,重新调用生成苹果方法。

效果如下

代码



    
    贪吃蛇
    





let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 分数记录
let fraction = 0;
// 定义贪吃蛇的组成,方块对象
class Block{
    // 按照size的大小划分行列
    // 列
    col;
    // 行
    row;
    // 大小
    size;
    constructor(col, row, size){
        this.col = col;
        this.row = row;
        this.size = size;
    }
    // 画方法
    draw(){
        context.fillRect(this.col * this.size, this.row * this.size, this.size, this.size);
    }
}
// 蛇类
class Snake{
    body = [new Block(20, 20, 10), new Block(20, 21, 10)];
    direction = "right";
    apple;
    constructor(apple) {
        this.apple = apple;
    }
    draw(){
        for(let i = 0; i < this.body.length; i++){
            this.body[i].draw();
        }
    };
    move(){
        let head = this.body[0];
        // 用于生成新蛇的方块
        let newhead;
        if(this.direction == "right"){
            newhead = new Block(head.col + 1, head.row, head.size);
        }
        if(this.direction == "left"){
            newhead = new Block(head.col - 1, head.row, head.size);
        }
        if(this.direction == "up"){
            newhead = new Block(head.col, head.row - 1, head.size);
        }
        if(this.direction == "down"){
            newhead = new Block(head.col, head.row + 1, head.size);
        }
        // 增加头部
        this.body.unshift(newhead);
        // 进行判断蛇头是否碰到了苹果,若碰到了则不删除最后一个方块,反之删除最后一个方块
        if(newhead.col == this.apple.col
            && newhead.row == this.apple.row){
            // 进行检测,如果生成在蛇身上,继续生成,反之结束循环
            while(true){
                this.apple.initialization();
                for(let i = 0; i < this.body.length; i++){
                    if(this.apple.row == this.body[i].row
                        && this.apple.col == this.body[i].col){
                        this.apple.initialization();
                    }
                }
                break;
            }
            // 分数加入
            fraction++;
        }else{
            // 弹出
            this.body.pop();
        }
    };
    // 碰撞检测
    impactChecking(){
        // 获取头节点
        let newBody = this.body[0];
        console.log(newBody.col);
        // 查看行,列是否超过边界
        if(newBody.col > 40
            || newBody.row > 40
            || newBody.row < 0
            || newBody.col < 0){
            alert("游戏结束");
            fraction = 0;
            this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];
        }
        // 查看是否碰到自己身体
        for(let i = 1; i < this.body.length; i++){
            if(newBody.col == this.body[i].col
                && newBody.row == this.body[i].row){
                alert("游戏结束");
                fraction = 0;
                this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];
            }
        }
    }
}
// 实物,苹果类
class Apple{
    // 列
    col;
    // 行
    row;
    sizeR;
    constructor(){
        this.initialization();
    };
    // 初始化苹果
    initialization(){
        // 生成列坐标
        this.col = Math.floor(Math.random() * (40 - 1) + 1);
        // 生成行坐标
        this.row = Math.floor(Math.random() * (40 - 1) + 1);
        // 设置苹果半径
        this.sizeR = 5;
    }
    // 画苹果的方法
    draw(){
        // 颜色
        context.fillStyle = "Red";
        // 画苹果
        context.beginPath();
        // 圆心坐标
        context.arc(this.col * this.sizeR * 2 + this.sizeR, this.row * this.sizeR * 2 + this.sizeR, this.sizeR, 0, Math.PI * 2, false);
        // 填充
        context.fill();
        // 恢复原来颜色
        context.fillStyle = "Black";
    }
}
// 生成一个苹果
let apple = new Apple();
// 生成一个蛇
let snake = new Snake(apple);
setInterval(() => {
    context.clearRect(0, 0, 400, 400);
    // 绘制分数
    context.fillText("分数为 " + fraction, 10, 10);
    // 绘制蛇
    snake.draw();
    // 对蛇进行移动
    snake.move();
    // 绘制苹果
    apple.draw();
    // 进行检测
    snake.impactChecking();
    context.strokeRect(0, 0, 400, 400);
}, 200);
// 对贪吃蛇控制
// 上下左右运动
$("body").keydown((event) => {
    // 左
    if(event.keyCode == 37 && snake.direction != "right"){
        snake.direction = "left";
    }
    // 上
    if(event.keyCode == 38 && snake.direction != "down"){
        snake.direction = "up";
    }
    // 右
    if(event.keyCode == 39 && snake.direction != "left"){
        snake.direction = "right";
    }
    // 下
    if(event.keyCode == 40 && snake.direction != "up"){
        snake.direction = "down";
    }
});
思路

思路,蛇由两个类组成,方块类和蛇类,蛇类的存在依赖于方块类。蛇类当中的body保存当前蛇类的所有的方块。绘图,直接遍历body内部的所有绘图方法。移动,根据保存的私有变量方向用来对数组中保存的方块对象进行更改
还有一个苹果类。用于进行随机生成
吃苹果,在移动方法中,如果蛇的头方块和苹果方块重合那么吃到苹果,重新调用生成苹果方法。
碰撞检测,如果行和列超过范围,即碰撞发生
最重要的,坐标行和列化,使用的时候乘以一个数就行

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101666.html

相关文章

  • 使用TypeScript和Canvas编写移动端贪吃大作战游戏

    摘要:基本介绍一款移动端贪吃蛇大作战游戏。主要的游戏逻辑有贪吃蛇移动碰撞检测贪吃蛇碰撞碰撞墙壁和吃食物。贪吃蛇的身体如何跟随头部移动需要分为两种情况,在单位时间内贪吃蛇移动一单位长度和贪吃蛇移动多单位长度。 基本介绍 一款移动端贪吃蛇大作战游戏。(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项...

    AlphaWallet 评论0 收藏0
  • 使用TypeScript和Canvas编写移动端贪吃大作战游戏

    摘要:基本介绍一款移动端贪吃蛇大作战游戏。主要的游戏逻辑有贪吃蛇移动碰撞检测贪吃蛇碰撞碰撞墙壁和吃食物。贪吃蛇的身体如何跟随头部移动需要分为两种情况,在单位时间内贪吃蛇移动一单位长度和贪吃蛇移动多单位长度。 基本介绍 一款移动端贪吃蛇大作战游戏。(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项...

    Keagan 评论0 收藏0
  • 装逼的最高境界---一行js代码完成一个简易版的贪吃游戏

    摘要:有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛代码如下当前浏览器不支持标签游戏结束我不是来装逼的。 有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行js代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛!代码如下: (function(){var s = [41,40],d = 1,f = 43,x,c = document.cr...

    hidogs 评论0 收藏0
  • 装逼的最高境界---一行js代码完成一个简易版的贪吃游戏

    摘要:有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛代码如下当前浏览器不支持标签游戏结束我不是来装逼的。 有些奇淫技巧玩好的话,就能提升自己的逼格,这不,一行js代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛!代码如下: (function(){var s = [41,40],d = 1,f = 43,x,c = document.cr...

    vincent_xyb 评论0 收藏0
  • SegmentFault 技术周刊 Vol.24 - “游戏” 已启动:Are you ready?

    摘要:仅支持开发游戏,因为专注,所以高效。游戏相关的一些概念画布一般来说,做游戏的话基于会比基于性能要好很多,尤其是涉及大量动画的情况下。游戏即将开始这一节我们来完成游戏最核心的场景。我们首先布置了游戏场景,加入了背景音乐。 showImg(https://segmentfault.com/img/bVOxvd?w=900&h=385); 今天是六一国际儿童节,祝小伙伴们六一快乐!本期技术周...

    dockerclub 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<