正文

手起刀落-一起来写经典的贪吃蛇游戏

okaychen  okaychen  2022-10-03  723

关键词：

回味

小时候玩的经典贪吃蛇游戏我们印象仍然深刻，谋划了几天，小时候喜欢玩的游戏，长大了终于有能力把他做出来(从来都没有通关过，不知道自己写的程序，是不是能通关了...)，好了，闲话不多谈，先来看一下效果吧！！

技术分享图片

功能和小时候玩的贪吃蛇一样，

1、选择速度 
    slow
    normal
    fast
2、选择是否有墙作为障碍物
    on
    off

看完效果就先附上地址喽：大山深处修炼的小龙虾，欢迎fork.

结构分解

如果构建一个简单的经典贪吃蛇游戏呢？我们根据面板可以分解出如下结构：

技术分享图片

因为其他面板比较简单，我们重点来看一下游戏面板

游戏面板

游戏面板是核心，在游戏面板中，我们来分解一下游戏面板我们需要的因素：

技术分享图片

场景、snake、食物

首先我们需要一个游戏场景、snake、食物这些基础设施
这里使用canvas作为我们的整个游戏的场景：

<canvas class="wrap" id="snake" width="400" height="400" tabindex="1"></canvas>

需要一只snake,后面初始化他的位置

var activeDot = function (x, y) {
    ctx.fillStyle = "#eee";
    ctx.fillRect(x * 10, y * 10, 10, 10);
}

需要食物作为对象(关于食物我们需要定义一些规则，如食物的产生)

var food = {
    x: 0,
    y: 0
};

规则

规则是游戏的核心

1、关于游戏的规则

snake的方向控制：(使用键盘的上下左右键控制蛇的方向)

 // changer dir
    var changeDir = function (key) {
        if (key == 38 && snake_dir != 2) {
            snake_next_dir = 0;
        } else {
            if (key == 39 && snake_dir != 3) {
                snake_next_dir = 1;
            } else {
                if (key == 40 && snake_dir != 0) {
                    snake_next_dir = 2;
                } else {
                    if (key == 37 && snake_dir != 1) {
                        snake_next_dir = 3;
                    }
                }
            }
        }
    }

关于食物，如果食物被吃掉，我们就需要产生新的食物

  // add food
    var addFood = function () {
        food.x = Math.floor(Math.random() * ((canvas.width / 10) - 1));
        food.y = Math.floor(Math.random() * ((canvas.height / 10) - 1));
        for (var i = 0; i < snake.length; i++) {
            // 如果食物被吃就增加食物
            if (checkBlock(food.x, food.y, snake[i].x, snake[i].y)) {
                addFood();
            }
        }
    }

    var checkBlock = function (x, y, _x, _y) {
        return (x == _x && y == _y) ? true : false;
    }

接下来是核心的函数，根据选择的速度和是否有墙体作为障碍物的设置，让蛇运动起来，并且实现

1、根据选择slow、norma、fast决定蛇运动速度速度
2、如果蛇碰到自己==自杀，游戏结束
3、有墙模式碰到墙体，游戏结束
4、无墙模式蛇穿过墙体，从另一侧出现
5、使蛇碰到食物就加入自身身体的一部分，执行增加食物函数

 var mainLoop = function () {
        var _x = snake[0].x;
        var _y = snake[0].y;
        snake_dir = snake_next_dir;
        //  0 — up  1 — right   2 — down  3 — left
        switch (snake_dir) {
            case 0:
                _y--;
                break;
            case 1:
                _x++;
                break;
            case 2:
                _y++;
                break;
            case 3:
                _x--;
                break;
        }
        snake.pop();
        snake.unshift({
            x: _x,
            y: _y
        })

        // --wall
        if (wall == 1) {
            if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10) {
                showScreen(3);
                return;
            }
        } else {
            //  off 无墙
            for (var i = 0, x = snake.length; i < x; i++) {
                if (snake[i].x < 0) {
                    snake[i].x = snake[i].x + (canvas.width / 10);
                }
                if (snake[i].x == canvas.width / 10) {
                    snake[i].x = snake[i].x - (canvas.width / 10);
                }
                if (snake[i].y < 0) {
                    snake[i].y = snake[i].y + (canvas.height / 10);
                }
                if (snake[i].y == canvas.height / 10) {
                    snake[i].y = snake[i].y - (canvas.height / 10);
                }
            }
        }

        //  Autophagy death
        for (var i = 1; i < snake.length; i++) {
            if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
                showScreen(3);
                return;
            }
        }

        // Eat food
        if (checkBlock(snake[0].x, snake[0].y, food.x, food.y)) {
            snake[snake.length] = {
                x: snake[0].x,
                y: snake[0].y
            };
            score += 1;
            altScore(score);
            addFood();
            activeDot(food.x, food.y);
        }

        // --------------------

        ctx.beginPath();
        ctx.fillStyle = "#111";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --------------------

        for (var i = 0; i < snake.length; i++) {
            activeDot(snake[i].x, snake[i].y);
        }

        // --------------------

        activeDot(food.x, food.y);

        setTimeout(mainLoop, snake_speed);
    }

ok以上展示出一些核心部分，构建出一个舞台中一只小蛇的故事.

小时候爸妈手机里有一款小游戏叫贪吃蛇。就是一条小蛇，不停地在屏幕上游走，吃各个方向出现的蛋，越吃越长。只要蛇头碰到屏幕四周，或者碰到自己的身子，小蛇就立即毙命。方寸的舞台间，亦有无限精彩；PS:到现在也没有通关过..现在不知道能不能通关了...

最后在附上次源码，欢迎fork交流：大山深处修炼的小龙虾...因为自己测试用的服务器被占用，目前只有做的效果图供大家参考喽.
掘金地址：手起刀落-一起来写经典的贪吃蛇游戏

python制作当年第一款真正意义上的手机游戏——贪吃蛇游戏(代码片段)

...游戏是一个像素版的，虽然简陋，但还是可以玩起来的主页左侧可以免费领取【代码】【相关教程、资料】，或者对于本篇文章有疑问的同学可以私信我我们主要要做的内容创建游戏窗口绘制贪吃蛇与食物蛇吃食物贪... 查看详情

贪吃蛇

...设计。1）给此游戏添加一个合适的背景，让游戏界面看起来更加美观2）增加背景音乐，例如在游戏开始的时候，和游戏结束的时候，游戏看起来更加丰富有趣，可玩度更高3）适当的给游戏增加一些难度和关卡，让游戏更具有挑... 查看详情

js+jquery实现贪吃蛇小游戏

...的的静态页面。第二步，让我们的贪吃蛇先从一个开始动起来。第三步，让我们通过键盘去控制他的运动方向。第四步，让我们去判断我们的贪吃蛇有没有撞墙，有没有吃到自己，因为这已经犯规了。第查看详情

[javase]练手小项目贪吃蛇小游戏(代码片段)

...帧的概念绘制静态窗口绘制游戏面板画静态小蛇让小蛇动起来小蛇的上下左右移动吃食物、积分系统和失败判定打包发布动画帧的概念动画帧——就是影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。... 查看详情

html+css+js实现❤️贪吃蛇游戏你能吃过我？❤️源码送给你一起来玩-建议收藏(代码片段)

🍅作者主页：Java李杨勇 🍅简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】🍅欢迎点赞👍收藏⭐留言📝 效果演示：... 查看详情

html+css+js实现❤️贪吃蛇游戏你能吃过我？❤️源码送给你一起来玩-建议收藏(代码片段)

《结对-网页贪吃蛇游戏-需求分析》

一、　　介绍:贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本。既简单又耐玩，深受人们喜爱。二、　　用户需求：1.可在浏览器上进行游戏。　　　　　　　2.可以调节难度。　　　　　　　3.可查看历史战绩。　... 查看详情

《结对-网页贪吃蛇游戏-需求分析》

这个贪吃蛇玩起来头会晕...(代码片段)

无聊，搞个反人类的贪吃蛇玩玩吧…目录准备开始绘制地图绘制蛇绘制蛇的食物控制蛇的方向最终效果完整代码准备完成这个小小的游戏，仅使用了腾讯的MMKV（用于记录历史最高分）依赖，当然，不想导... 查看详情

这个贪吃蛇玩起来头会晕...(代码片段)

python游戏开发:打造最经典的贪吃蛇游戏

前言今天为大家介绍一个用Python开发的经典游戏|贪吃蛇,只需要短短的30多行Python代码即可实现贪吃蛇的基本操作,当然你自己也可以做相应的修改,编程更加完美的游戏,这里要说一下,这个游戏开发用到了freegames这个免费开源游戏... 查看详情

c语言实现经典贪吃蛇游戏(代码片段)

原文链接：C语言贪吃蛇游戏文章目录一、说明二、效果2.1欢迎界面2.2游戏规则2.3得分排行2.4退出游戏2.5游戏界面2.6游戏结束三、源码3.1cmd.h3.2cmd.c3.3io.h3.4io.c3.5model.h3.6service.h3.7service.c3.8ui.h3.9ui.c3.10utils.h3.11utils.c3.12main.c一、说... 查看详情

java贪吃蛇小游戏

一、团队课程设计博客链接二、个人负责模块或任务说明1）游戏主体a.主界面代码分析：●Game类：（1）蛇移动（2）添加身体（3）加速（4）是否撞墙（5）蛇身缩短：（6）设置全局字体（7）游戏结束b.配置文件（1）获取配置文... 查看详情

一条贪吃蛇的使命——零基础入门贪吃蛇游戏(代码片段)

零基础入门贪吃蛇游戏贪吃蛇是一款最常见、最经典、最受欢迎的小游戏之一。本篇文章带你零基础实现贪吃蛇游戏，一条蛇的使命从这里开始。1、游戏描述????贪吃蛇是一款非常经典的休闲类游戏。在一块固定大小的区域内，... 查看详情

javascript-简单的贪吃蛇小游戏

实现逻辑：//获取Html中的格子（行，列）//建立数组存储所有格子（x，y）//建立数组用于存储蛇身（x，y）//生成随机坐标（x，y）的函数//随机创建蛇身并存储到蛇身数组//创建食物（不能与蛇身重合，利用不等于蛇身数组中任... 查看详情

结对-贪吃蛇-开发过程

贪吃蛇又名贪食蛇，是一款经典的小游戏。玩家使用方向键操控一条长长的蛇不断吞下豆子，同时蛇身随着吞下的豆子不断变长，当蛇头撞到蛇身或障壁时游戏结束。贪吃蛇最初为人们所知的是诺基亚手机附带的一个小游戏，它... 查看详情

100行python代码，轻松完成贪吃蛇小游戏？

...ygame库，小编通过pipinstallpygame，很快就安装好了。在完成贪吃蛇小游戏的时候，我们需要知道整个游戏分为四部分：1.游戏显示：游戏界面、结束界面2.贪吃蛇：头部、身体、食物判断、死亡判断3.树莓：随机生成4.按键控制：上... 查看详情