贪吃蛇小游戏（详细版）

最新推荐文章于 2021-01-02 10:05:26 发布
最新推荐文章于 2021-01-02 10:05:26 发布
阅读量664 收藏 2
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45934659/article/details/106444394
版权

下面是网页版的贪吃蛇代码，感兴趣的小伙伴可以看一下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易贪吃蛇（原创）-jq22.com</title>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
#myCanvas {
	border:1px solid gray;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>


<script>
var init = function() {
    var cxt = game.context('myCanvas');
    game.coordinate();
    game.back(cxt);
    game.food(cxt);
    game.snake(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y);
};
document.onkeydown = function(e) {
    var cxt = game.context('myCanvas');
    switch (e.keyCode) {
        case 13:
            console.log("********开始********");
            game.attribute.initialize = false;
            break;
        case 87:
            game.attribute.initialize = false;



            if (!animate.attribute.up && !animate.attribute.down) {
                animate.attribute.up = true;
                animate.attribute.left = false;
                animate.attribute.down = false;
                animate.attribute.right = false;

                animate.attribute.directionFrist = false;
                animate.up(cxt);
            }
            console.log("********上********");
            break;
        case 83:
            if (animate.attribute.directionFrist) {
                return
            }
            game.attribute.initialize = false;

            if (!animate.attribute.down && !animate.attribute.up && !animate.directionFrist) {
                animate.attribute.up = false;
                animate.attribute.left = false;
                animate.attribute.down = true;
                animate.attribute.right = false;
                animate.down(cxt);
            }
            console.log("********下********");
            break;
        case 65:
            game.attribute.initialize = false;
            if (!animate.attribute.left && !animate.attribute.right) {
                animate.attribute.up = false;
                animate.attribute.left = true;
                animate.attribute.down = false;
                animate.attribute.right = false;
                animate.attribute.directionFrist = false;
                animate.left(cxt);
            }
            console.log("********左********");
            break;
        case 68:
            game.attribute.initialize = false;
            if (!animate.attribute.right && !animate.attribute.left) {
                animate.attribute.up = false;
                animate.attribute.left = false;
                animate.attribute.down = false;
                animate.attribute.right = true;
                animate.attribute.directionFrist = false;
                animate.right(cxt);
            }
            console.log("********右********");
            break;
    }
};
var animate = {
    attribute: {
        delay: 10,
        time: 0,
        up: false,
        left: false,
        down: false,
        right: false,
        directionFrist: true
    },
    draw: function(cxt, x, y) {
        game.clearCanvas(cxt);
        game.back(cxt);
        game.food(cxt);
        game.snake(cxt, x, y);
    },
    up: function(cxt) {
        if (this.attribute.up) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.y -= 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.y >= 0) {
                requestAnimationFrame(() => {
                    animate.up(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    },
    left: function(cxt) {
        if (this.attribute.left) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.x -= 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.x >= 0) {
                requestAnimationFrame(() => {
                    animate.left(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    },
    down: function(cxt) {
        if (this.attribute.down) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.y += 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.y <= (game.attribute.back.height)) {
                requestAnimationFrame(() => {
                    animate.down(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    },
    right: function(cxt) {
        if (this.attribute.right) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.x += 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.x <= game.attribute.back.width) {
                requestAnimationFrame(() => {
                    animate.right(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    }
};
var game = {
    attribute: {
        initialize: true,
        snake: {
            color: '#DC143C',
            size: 10, // 蛇的大小
            head: { // 蛇头
                x: 250,
                y: 250
            },
            length: 10, //蛇身默认长度
            array: new Array(),
            is: true
        },
        food: {
            color: '#00FA9A',
            coordinate: new Array(),
            is: true
        },
        back: {
            strokeStyleColor: '#F5F5F5',
            width: 500,
            height: 500
        },
        coordinateData: new Array()
    },
    over: function(cxt) {
        alert('游戏结束');
        this.clearCanvas(cxt);
        this.attribute.initialize = true;
        this.attribute.snake.head.x = 250;
        this.attribute.snake.head.y = 250;
        this.attribute.snake.length = 10;
        this.attribute.snake.array.length = 0;
        this.attribute.snake.is = true;
        this.attribute.food.coordinate.length = 0;
        this.attribute.food.is = true;
        animate.attribute.up = true;
        animate.attribute.left = false;
        animate.attribute.down = false;
        animate.attribute.right = false;

        this.back(cxt);
        this.food(cxt);
        this.snake(cxt, this.attribute.snake.head.x, this.attribute.snake.head.y);
    },
    clearCanvas: function(cxt) {
        cxt.clearRect(0, 0, this.attribute.back.width, this.attribute.back.height);
    },
    coordinate: function() {
        var array = new Array()
        for (var x = 0; x < (this.attribute.back.width / this.attribute.snake.size); x++) {
            array[x] = new Array()
            for (var y = 0; y < (this.attribute.back.height / this.attribute.snake.size); y++) {
                array[x][y] = [(x * this.attribute.snake.size), (y * this.attribute.snake.size)]
            }
        }
        this.attribute.coordinateData = array;
    },
    food: function(cxt) {
        let array = new Array()
        this.attribute.coordinateData.forEach((item, itmeIndex) => {
            item.forEach((data, dataIndex) => {
                for (let index in this.attribute.snake.array) {
                    if (data[0] == this.attribute.snake.array[index][0] && data[1] == this.attribute.snake.array[index][1]) {
                        array.push([itmeIndex, dataIndex])
                    }
                }
            });
        });
        let widthCoordinate = this.attribute.coordinateData[0].length,
            heightCoordinate = this.attribute.coordinateData.length,
            Boole = false;

        if (this.attribute.food.is) {
            do {
                var coordinate = [X = Math.round(Math.random() * widthCoordinate), Y = Math.round(Math.random() * heightCoordinate)];
                for (let i in array) {
                    if (array[i][0] == coordinate[0] && array[i][1] == coordinate[1]) {
                        Boole = true;
                    } else {
                        Boole = false;
                    }
                }
            } while (Boole);
            this.attribute.food.coordinate = coordinate;
            this.attribute.food.is = false;
        }
        cxt.fillStyle = this.attribute.food.color;
        cxt.fillRect(
            this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][0],
            this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][1], this.attribute.snake.size, this.attribute.snake.size)
    },
    drawPath: function(cxt) {
        var arr = this.attribute.snake.array;
        if (this.attribute.initialize) {
            for (var i = 0; i < this.attribute.snake.length; i++) {
                arr[i] = [this.attribute.snake.head.x, this.attribute.snake.head.y + (i * this.attribute.snake.size)]
            }
        } else {
            var drawPathArr = new Array()
            for (var i = 0; i < this.attribute.snake.length; i++) {
                if (i == 0) {
                    drawPathArr[i] = [this.attribute.snake.head.x, this.attribute.snake.head.y]
                } else if (i > 0) {
                    drawPathArr[i] = this.attribute.snake.array[i - 1]
                }
            }
            this.attribute.snake.array = drawPathArr;
        }
        if (this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][0] == this.attribute.snake.head.x && this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][1] == this.attribute.snake.head.y) {
            this.attribute.snake.length += 1;
            this.attribute.food.is = true;
            this.food(cxt);
        }

        if (!this.attribute.snake.is) {
            this.over(cxt)
            return
        }
        this.attribute.snake.array.forEach((item, index) => {
            if (index > 0) {
                if (item[0] == this.attribute.snake.head.x && item[1] == this.attribute.snake.head.y) {
                    this.attribute.snake.is = false;
                    return;
                }
            }
        });
        return arr
    },
    snake: function(cxt, x, y) {
        var cxt = this.context('myCanvas'),
            snakeWidth = this.attribute.snake.size,
            snakeHeight = this.attribute.snake.size,
            arrary = this.drawPath(cxt); // 获取行动路径

        cxt.fillStyle = this.attribute.snake.color;

        for (let index in arrary) {
            cxt.fillRect(arrary[index][0], arrary[index][1], snakeWidth, snakeHeight);
        }
    },
    context: function(id) {
        var c = document.getElementById(id);
        var cxt = c.getContext("2d");
        return cxt
    },
    back: function(cxt) {
        cxt.strokeStyle = this.attribute.back.strokeStyleColor;
        var widthLen = this.attribute.back.width / this.attribute.snake.size,
            heightLen = this.attribute.back.height / this.attribute.snake.size;
        for (var j = 0; j < heightLen; j++) {
            for (var i = 0; i < widthLen; i++) {
                cxt.lineWidth = 1;
                cxt.strokeRect(i * this.attribute.snake.size,
                    j * this.attribute.snake.size,
                    this.attribute.snake.size,
                    this.attribute.snake.size);
            }
        }
    }
};

 init(); 
</script>

</body>
</html>
无人不xiao
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前几天搞定了贪吃蛇自动寻路算法……
blankmanp的专栏
05-24 1万+
写了几天，搞定了贪吃蛇自动寻路……目前在20*20的格子上面可以稳定跑到100+分，200+的话……看运气吧o(╯□╰)o，总之算法还有很多可以修改的地方，而且UI部分还有部分没写的…… 总结下：这次写的话主要算法用的是BFS，没有用A*算法，因为太复杂了，用JS实现感觉好难，所以暂时没有写……然后有两种策略，一种是吃到食物还能找到自己尾巴的话就直接去吃食物，如果发现找不到吃食物的路径OR吃了就会
animate制作用于课件的小练习题（增加小游戏）
greenapple_aliga的博客
05-18 635
自己做的小课件的一部分用于增加课件趣味性
animate动画、原生JS实现轮播图
rememberyf的博客
06-09 8272
写在前面 最近在写项目的时候，才发现自己对css3这部分的内容已经生疏了，复习css3的时候，看到animate属性，就用其写了个焦点轮播图，当然自己也用原生JS码了个，当然css3动画无疑是锦上添花，还是要多总结啊，源码我们会在最后附上git地址，好了，下面我们就来说说他们是如何分别实现轮播效果的。 正文 一、css3-animate动画 CSS3的animation属性可以像Flash...
贪吃蛇小游戏
11-11
贪吃蛇小游戏，基本操作移动计数功能都可实现，还有变速功能。
100行代码教你实现贪吃蛇小游戏
热门推荐
淡定的程序猿的博客
04-27 4万+
100行代码教你实现贪吃蛇小游戏 最近项目中内置了一些比如贪吃蛇,俄罗斯方块,井字棋等小游戏. 这里逐一将实现步骤分享出来供大家学习. 如有不足或错误,请在评论去指正 因为只是个示例, 界面可能并不好看, 这些你们可以使用更好看的资源来替换方格,最终实现效果如下: 其实这些小游戏的实现并不复杂,只要理清楚思路, 一步一步构建下去, 就会发现其实原理很简单.只是我们想复杂了. 完...
入门贪吃蛇小游戏详细版
08-04
贪吃蛇小游戏
java版贪吃蛇小游戏源码
01-27
java贪吃蛇 java版贪吃蛇小游戏源码
前端实现贪吃蛇小游戏！
03-08
通过Vue3仿照经典版贪吃蛇功能，食物随机位置，蛇可进行移动，吃到食物后身体变长一节，同时分数+1，分数每累积10分等级+1，等级越高蛇移动速度越快，蛇撞墙后或者撞击身体后游戏结束清零重新开始！下载资源后运行两...
16点阵单片机贪吃蛇小游戏
08-12
实现下列功能： 1、可以通过按键控制其运行...3、可以通过按键实现贪吃蛇的上下左右移动； 4、可以通过数码管显示游戏分数； 5、实现蛇的碰墙或障碍物即死，吃食物后加一分，蛇身变长一节，以及食物的随机生成的规则；
C#版贪吃蛇小游戏
06-18
C#贪吃蛇游戏 操作方法： WASD操作蛇的前进方向，L为加速键（按L不放再按WASD即可加速） 功能： 1.初次游戏可设置用户名 2.设置背景音乐 3.查看排行榜(点击主菜单的"你好，XXX")
贪吃蛇小游戏代码
11-18
是一款贪吃蛇小游戏的源代码，小游戏中可计算得分情况，小蛇吃到绿色食物则蛇身变长，吃到灰色毒品游戏结束，吃到蓝色滑板小蛇移动速度加快，吃到红色刹车小蛇移动速度减慢
Java实现贪吃蛇小游戏
12-14
今天就带大家从零开始来完成这个小游戏，完成的方式也是一步一步的添加功能这样的方式来实现。
swift-3DSnakeAR基于ARKit用Swift编写的著名贪吃蛇游戏
08-14
3DSnakeAR 基于ARKit用Swift编写的著名贪吃蛇游戏
jquery实现贪吃蛇小游戏
12-20
（写的思维混乱，只是想留个纪念，有时间重新写一遍）
SwiftSnake:用 Swift 编写的经典贪吃蛇游戏
07-01
迅捷蛇 用 Swift 编写的经典贪吃蛇游戏 通过向您希望蛇转动的方向滑动来控制。 与边缘或蛇身接触时，蛇将重置到中间，分数重置为零。
iOS简单项目Demo-----贪吃蛇
u012823105的博客
08-20 1656
直接代码@interface ViewController () @property(nonatomic,strong)NSMutableArray *array;@property(nonatomic,strong)NSMutableArray *viewArr; @property(nonatomic, strong)UIView *vie; @property(nonatomic)CGP
c++switch实现猜拳_Animate/FLASH如何制作猜拳小游戏（AS3）
weixin_35367645的博客
01-02 296
很久没有分享小游戏的制作教程了，这里简单介绍一下猜拳小游戏的制作方法。FLASH如何制作简单雷电小游戏（AS3)(1)​jingyan.baidu.comFLASH如何制作七巧板游戏（AS2）​jingyan.baidu.com主要知识点：鼠标点击，数组使用，文本框使用适用软件：Animate CC及其它AS3版本FLASH软件制作步骤：1.这里用的是Animate CC软件，打开软件，新建AS3...
简单的贪吃蛇小游戏
Kepler_X的博客
01-07 798
贪吃蛇简介具体模块基本的html页面地图的创建蛇头的创建蛇的移动蛇头的移动蛇身的移动食物的创建建一个可能出现位置的数组数组中随机值显示蛇头吃食物碰撞函数蛇加长度游戏结束源码 简介 一个基于原生js可由键盘上下左右控制的贪吃蛇游戏，主要开发思路分为以下几个部分： 基本的html页面（地图区域，开始按钮，计分板） 地图网格的创建（这里为方便修改，用js创建可控大小的网格） 蛇头的创建 蛇的移动 食物...
iOS 贪吃蛇单机版的实现
王颜华的博客
08-19 2973
github地址：贪吃蛇小游戏 前言 前天了解到疯狂iOS讲义这本书。 上面有一个手势教学的代码实例：贪吃蛇。 于是找到了它的电子版和源码。进行学习。 做出来的效果就是这样的，可能样子有点丑，但我也不知道为什么就突然想起粉色和灰色的配搭。 所以观影出现不适，本人概不负责，哈哈哈~ 正文 我设计的这个界面有一个暂停和继续的按钮，还有一个RetroSnaker的Label彩蛋，
动画版贪吃蛇小游戏c语言
最新发布
10-31
动画版贪吃蛇小游戏C语言是一款基于C语言编写的经典游戏，它使用了EasyX图形库，使得游戏的动画效果更加丰富，更加接近真实的小游戏。在游戏中，玩家需要控制一条蛇去吃食物，每吃一个食物，蛇的长度就会增加一格，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值