手把手教你写贪吃蛇（原生JS）手把手教你写贪吃蛇第一讲，用原生JS写贪吃蛇小游戏，超详细的教程，一步一步和我来，你一定

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

手把手教你写贪吃蛇（1）👩‍🔧

超详细的教程，一步一步和我来，你一定会学会的~

绘制界面

设置分数和速度

    <h1>score:</h1>
    <button>快</button>
    <button>中</button>
    <button>慢</button>

分数字体大，采用h1

速度需要用户点击按钮进行选择，所以采用button

画运动界面

用表格显示格子，作为刻度(十行十列），每个格子的宽为40px，高为40px；

table>tr*10>th*10; 快捷方式生成十行十列的表格

样式：

①在html的table标签中加入样式：

border="1" （表格的边框长度为1px) cellpadding="0"(表格的内边距为0px) 　　　　　　　　　　　　　　cellspacing="0"这个别忘了设定，因为我这里默认是2px，就导致对不齐

②在css中给每一个td都设置长和宽为38px(因为border四边还有1px占用

③position：absolute 使表格浮动起来，不占用空间，以便div重叠上去

用一个大div设置实际运动场所

用一个大的div来供JS插入新的div(主战场)

样式：

①宽高：均为400px

②背景颜色也是在div上设置，不是在表格上设置

封装产生div的方法

通过在大的div后面附加子div的方式，来显示蛇头，蛇身子和食物。

封装一个函数还创建小div

 var map=document.getElementById("map");
        function creatDiv(color){
            var div = document.createElement("div");
            map.appendChild(div);
        }

给小div设置大小，这里我设置的是38px,你可以根据你的大小进行调整

  function creatDiv(color){
            var div = document.createElement("div");
            div.style.width="38px";
            div.style.height="38px";
            map.appendChild(div);
        }

给小div根据传入参数的不同而设置颜色的不同，创建一个生成div的函数，这样就可以方便我们之后根据自己的颜色需要来创建小div了。（这里就是JavaScript与HTML相连接的地方了）因为区分的需要，这里我将蛇头设置为了红色，将食物也设置为了红色

  var map=document.getElementById("map");
        function creatDiv(color){
            var div = document.createElement("div");
            div.style.width="40px";
            div.style.height="40px";
            div.style.backgroundColor=color;
            map.appendChild(div);
        }
        creatDiv("red"); //创建一个蛇头
        creatDiv("red"); //创建一个食物

当创建好蛇头和食物后，要让他们的位置也变成absolute。目的是要让他们浮动起来，并且如果生成在同一行的时候，一个不会把另一个挤下去

div.style.position="absolute";

利用随机数产生蛇头和食物div

Math.random();随机产生一个[0,1)的随机数

我们的要求：div的left和top应该位于[0,360]之间，并且必须是40的倍数

方法：

Math.random()*10 =>产生一个[0,10）的随机数，即[0,9]的随机数。

parseInt(Math.random()*10) =>将其转化为[0,9]的整数

parseInt(Math.random()*10) *40 =>产生一个[0,360]，且为40的倍数的整数

       div.style.left = parseInt(Math.random() * 10) * 40 + "px";
            div.style.top = parseInt(Math.random() * 10) * 40 + "px";

利用返回值得到通过函数创建的div

因为之后要获取蛇头和食物的位置，但因是在函数中创建的，所以函数已结束就临时变量销毁了，无法获取，所以通过设置函数的返回值为div，并var一个div承接，来得到蛇头和食物

 function creatDiv(color) {
            XXXXX
            return div;
        }
        var headNode = creatDiv("red");
        var foodNode = creatDiv("blue");

利用定时器让蛇头移动起来

给headNode一个value属性,规定他的移动方向(默认初始为向上移动)

headNode.value="up";

利用定时器函数，让蛇头移动(move是个移动的函数)

var t = setInterval(move, 1000);

定义move函数(注意这里的变换坐标形式)

 function move() {
            switch (headNode.value) {
                case "up":
                    headNode.style.top = parseInt(headNode.style.top) - 40 + "px";
                    break;
                case "down":
                    headNode.style.top = parseInt(headNode.style.top) + 40 + "px";
                    break;
                case "right":
                    headNode.style.left = parseInt(headNode.style.left) + 40 + "px";
                    break;
                case "left":
                    headNode.style.left = parseInt(headNode.style.left) - 40 + "px";
                    break;
            }
        }

通过键盘的按键来改变蛇头的移动方向

利用键盘按下事件： document.onkeydown()。利用上下左右键来更改蛇头的移动方向
通过获取键盘的键值，对应不同的方向，那应该怎么获取呢？

在本例的事件编程中，由document.onkeydown可得：事件源是我的键盘，事件就是键盘按下。function（）{ }是事件处理函数。在事件处理函数当中其实存在一个默认的参数event（可写可不写，用的时候需要写），表示事件对象，所以获取键盘的键值，就可以通过event.keyCode来获取
```
document.onkeydown=function(event){
 event=event||window.event;
}
```

监听键值，并根据键盘上敲击的键更改蛇头的移动方向

并且，在蛇有身体之后，不能让蛇头在向一个方向移动的时候向相对方向移动（要防止自噬的情况出现）。

document.onkeydown = function (event) {
            event = event || window.event;
            switch (event.keyCode) {
                case 37:
                    if(headNode.value!="right"||arr.length==0)
                    headNode.value = "left";
                    break;
                case 38:
                    if(headNode.value!="down" || arr.length == 0)
                    headNode.value = "up";
                    break;
                case 39:
                    if(headNode.value!="left" || arr.length == 0)
                    headNode.value = "right";
                    break;
                case 40:
                    if(headNode.value!="up" || arr.length == 0)
                    headNode.value = "down";
                    break;

            }
        }

明天继续肝~