贪吃蛇

效果演示

贪吃蛇.gif

制作简介

游戏采用纯jcp编写，是作者根据视频学习的，还有一些地方不够完善，你可以指出来，作者会看到的。

变量声明

你需要先思考游戏会利用哪些变量。

• 游戏需要一个区域，所以会存在游戏的宽和高
• 蛇，其实贪吃蛇的身子就是一个数组而已，存储了几个相邻的坐标点，所以我们需要一个数组
• 食物，食物就是一个随机出现的坐标点，但是这个坐标点不能在蛇身上，不恩能够在区域外边
• 一个比例：这个比例用来确定游戏元素的大小，基本上我们所有的游戏元素在绘制的时候都要和这个变量相乘，以扩大指定的倍数。
• 游戏的方向，这个方向在游戏参与者按下方向键时候会被改变
• 速度，蛇移动的速度。

所以你的变量声明应该是下面这样的：

//1 一个游戏区域
var gameHeight;
var gameWidth;
//2 蛇 
var snakeArray;
//3 食物
var food;
//4 方块
var px;
//5 游戏速度
var speed;

//设置按键的值
var left=37;
var right=39;
var up=38;
var down=40;
//表示舌头的方向
var d;

这里的按键为什么是37、38、39、40
学过C的同学应该知道，这些数字是相应的符号对应的ASCII码，系统通过判断这个来确定你的输入的。

游戏具体编写

首先我们要创建一个canvas，用于绘制图形

下面是我们的javascript代码

上文中的变量声明放在script标签中，下文的所有代码也都是在这个标签中的。
同时在script中添加下面代码，以获取到我们创建的canvas，

var c = document.getElementById("c1");//获取canvas
var ctx = c.getContext("2d");//采用2d绘制

1 初始化游戏所需数据

你需要定义一个函数用于初始化，这个函数完成如下功能

• 确定游戏的宽和高
• 确定px（游戏元素放大比例）的大小
• 初始化food
• 初始化snakeArray
• 初始化游戏方向
• 执行游戏

代码如下

            //初始化游戏需要的数据
            init();
            function init (){
                
                gameHeight = c.height;
                gameWidth = c.width;
                
                snakeArray = [];
                px = 20;
                food = {"x":-1,"y":-1};
                d = right;
                
                initSnake(3);//初始化蛇
                initfood();//初始化食物
                
                play();//开始游戏
            }

2 初始化蛇

你只需要通过循环向snakeArray中添加坐标点即可

            //初始化蛇   动态传递蛇的长度
            function initSnake(length) {
                for(var i = length; i > 0; i--)
                {
                    snakeArray.push({"x": i , "y": 1 });
                }
            }

3 初始化食物

初始化食物的时候要注意

• 食物随机产生
• 食物不能产生在蛇身上
  代码如下：

            function initfood () {
                food["x"] = Math.floor(gameHeight/px * Math.random());
                food["y"] = Math.floor(gameWidth/px * Math.random());
                for (var i = 0; i < snakeArray.length; ++i) {
                    if (food["x"] == snakeArray[i]["x"] && food["y"] == snakeArray[i]["y"]) {
                        initfood();
                    }
                }
            }

其中
Math.floor() 取整
Math.random() 随机数
除以px是因为后边我们绘制食物的时候要乘以px

4 play函数，开始游戏

因为play函数是不断循环执行的，所以

setInterval(play,300);//第一个参数是要执行的函数，第二个参数是执行的时间间隔，单位是毫秒

play函数要有以下功能

• 绘制游戏区域
• 移动蛇
• 绘制蛇
• 绘制食物
• 判断是不是迟到食物
• 判断游戏结束

另外，你可以在这个函数中添加你想要达到的效果

        function play () {
            ctx.fillStyle = "white";
            ctx.fillRect(0,0,gameWidth,gameHeight);
            ctx.strokeStyle = "#fffff";
            ctx.strokeRect(0,0,gameWidth,gameHeight);
            
            moveSnake();
            paintSnake();
            paintCell(food["x"],food["y"]);
            
            if (snakeArray[0]["x"] == food["x"] && snakeArray[0]["y"] == food["y"] ){
                initfood();
                snakeArray.push({"x": food["x"] , "y": food["y"] });
            }
            
            for(var i = 1; i < snakeArray.length; ++i){
                if (snakeArray[0]["x"] == snakeArray[i]["x"] && snakeArray[0]["y"] == snakeArray[i]["y"] ){
                    alert("Gameover!");
                    init();
                    return;
                }
            }
            if (snakeArray[0]["x"] == -1 || snakeArray[0]["y"] == -1 || snakeArray[0]["x"] == gameWidth/px || snakeArray[0]["y"] == gameHeight/px){
                alert("Gameover!");
                init();
                return;
            }
        }

5 移动蛇

在这个函数中，我们要做到

• 获取舌头的坐标
• 判断蛇前进的方向
• 根据前进的方向删除蛇尾，添加新的蛇头

代码如下

        function moveSnake () {
            flagd = false;
            var p = {"x":snakeArray[0]["x"],"y":snakeArray[0]["y"]}
            if (d == left) p["x"]--;
            else if (d == right) p["x"]++;
            else if (d == up) p["y"]++;
            else if (d == down) p["y"]--;
            
            snakeArray.pop();
            snakeArray.unshift(p);
            
            flagd = true;
        }

其中
snakeArray.pop(); 删除数组的最后一个元素
snakeArray.unshift(p); 向数组中添加一个新元素p

6 绘制蛇

没什么好说的，就是绘制就是

        function paintSnake(){
            ctx.fillStyle = "blue";
            for(var i = 0; i < snakeArray.length; ++i){
                ctx.fillRect(snakeArray[i]["x"]*px,snakeArray[i]["y"]*px,px-1,px-1);
            }
        }

7 绘制食物

同样没什么好说的

        function paintCell (x, y) {
            ctx.fillStyle = "red";
            ctx.fillRect(x*px,y*px,px-1,px-1);
        }

8 改变方向

这是最重要的一步，不然你的蛇只会一头撞死在墙上
首先，在body标签上写下键盘按下时候执行函数changeD(event)

接着编写changD函数

        function changeD (e) {
            if (e.keyCode == 37) d = left;
            else if (e.keyCode == 40) d = up;
            else if (e.keyCode == 39) d = right;
            else if (e.keyCode == 38) d = down;
        }

完工

你可以调试运行一下，愉快的玩耍。
假如你没有成功，可以在评论区提出疑问，或者自己钻研源码。

源码下载：下载（访问密码 9f9b）