js+html+css贪吃蛇

本文主要是介绍js+html+css贪吃蛇，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

思路

蛇拥有的行为：
能移动、吃食物、变长(加尾巴)
1、蛇身：
编写蛇头、蛇身
通过计时间隔向某方向移动
检测有没有吃到食物，吃到则加尾巴
判断碰撞(蛇吃食物)
2、食物：
编写食物
随机出现
通过计时间隔某时间段出现一个

结果

在这里插入图片描述

代码

HTML部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="game.css">
    <meta name="author" content="一只咸鱼">
    <title>贪吃蛇</title>
</head>
<body>
<script src="game.js"></script>
</body>
</html>

CSS部分

* {
    padding: 0;
    border: 0;
    margin: 0;
}

body {
    /* background: url("/image/uuu.jpeg"); */
    background-color: #31A6FF59;
}


.head {
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    background: url("/images/dog.png") no-repeat 0;
}

.MainBody {
    position: absolute;
}

.body {
    clear: both;
    position: relative;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background-color: red;
    border-radius: 15px;
}

JavaScript部分

var arr = []; //蛇身
var bo = document.body; //获取主体，用于添加元素

//头
var t0 = document.createElement('div');
t0.className = "head";
t0.style.top = '300px';
t0.style.left = '408px';
t0.style.width = '30px';
t0.style.height = '30px';
arr.push(t0);
bo.insertBefore(t0, bo.lastChild);

//身体1
var t1 = document.createElement('div');
t1.className = "MainBody";
t1.style.top = '288px';
t1.style.left = '408px';
t1.style.width = '30px';
t1.style.height = '30px';
var t11 = document.createElement('div');
t11.className = "body";
t1.appendChild(t11);
arr.push(t1);
bo.insertBefore(t1, bo.lastChild);

//身体2
var t2 = document.createElement('div');
t2.className = "MainBody";
t2.style.top = '276px';
t2.style.left = '408px';
t2.style.width = '30px';
t2.style.height = '30px';
var t22 = document.createElement('div');
t22.className = "body";
t2.appendChild(t22);
arr.push(t2);
bo.insertBefore(t2, bo.lastChild);

//身体3
var t3 = document.createElement('div');
t3.className = "MainBody";
t3.style.top = '264px';
t3.style.left = '408px';
t3.style.width = '30px';
t3.style.height = '30px';
var t33 = document.createElement('div');
t33.className = "body";
t3.appendChild(t33);
arr.push(t3);
bo.insertBefore(t3, bo.lastChild);

//身体4
var t4 = document.createElement('div');
t4.className = "MainBody";
t4.style.top = '252px';
t4.style.left = '408px';
t4.style.width = '30px';
t4.style.height = '30px';
var t44 = document.createElement('div');
t44.className = "body";
t4.appendChild(t44);
arr.push(t4);
bo.insertBefore(t4, bo.lastChild);

//身体5
var t5 = document.createElement('div');
t5.className = "MainBody";
t5.style.top = '240px';
t5.style.left = '408px';
t5.style.width = '30px';
t5.style.height = '30px';
var t55 = document.createElement('div');
t55.className = "body";
t5.appendChild(t55);
arr.push(t5);
bo.insertBefore(t5, bo.lastChild);

//身体6
var t6 = document.createElement('div');
t6.className = "MainBody";
t6.style.top = '240px';
t6.style.left = '408px';
t6.style.width = '30px';
t6.style.height = '30px';
var t66 = document.createElement('div');
t66.className = "body";
t6.appendChild(t66);
arr.push(t6);
bo.insertBefore(t6, bo.lastChild);


//存储前一个部分的位置
var pathX = []; //left
var pathY = []; //top
for (j = 0, len = arr.length; j < len; j++) {
    pathX.push(null);
}

for (j = 0, len = arr.length; j < len; j++) {
    pathY.push(null);
}

var direction; //当前前进的方向

window.document.onkeydown = disableRefresh;
function disableRefresh(evt){ //监听键盘方向键
    var evt = window.event;
    if (evt.keyCode == 37) { //左
        direction = 'left';
    } else if (evt.keyCode == 38) { //上 
        direction = 'up';
    } else if (evt.keyCode == 39) { //右
        direction = 'right';
    } else if (evt.keyCode == 40) { //下
        direction = 'down';
    }
}

volume = 30;
//移动
setInterval(function() { //持续移动，根据direction控制方向
    if (direction) {
        pathX[0] = arr[0].offsetLeft;
        pathY[0] = arr[0].offsetTop; //存储当前位置
        if (direction == 'left' && arr[0].offsetLeft > 0) { //当前方向为左，则向左移动     
            arr[0].style.left = arr[0].offsetLeft - 12 + 'px';
        } else if (direction == 'up' && arr[0].offsetTop > 0) { //当前方向为上，则向上移动  
            arr[0].style.top = arr[0].offsetTop - 12 + 'px';
        } else if (direction == 'right' && arr[0].offsetLeft <= 1495) { //当前方向为右，则向右移动  
            arr[0].style.left = arr[0].offsetLeft + 12 + 'px';
        } else if (direction == 'down' && arr[0].offsetTop <= 700) { //当前方向为下，则向下移动  
            arr[0].style.top = arr[0].offsetTop + 12 + 'px';
        }

        k = 0;
        len = foods.length;
        k < len;
        flag = false;
        while (k < len) { //检测有没有吃到食物
            if (! ((30 + foods[k].offsetTop) < arr[0].offsetTop ||
                (30 + arr[0].offsetLeft) < foods[k].offsetLeft ||
                (30 + arr[0].offsetTop) < foods[k].offsetTop ||
                (30 + foods[k].offsetLeft) < arr[0].offsetLeft)) {
                child = document.getElementById(foods[k].id);
                child.parentNode.removeChild(child);
                foods.splice(k,1);
                len--;
                flag = true;

                ttt = document.createElement('div'); //添加尾巴
                ttt.className = "MainBody";
                ttt.style.top = arr[arr.length-1].offsetTop + 'px';
                ttt.style.left = arr[arr.length-1].offsetLeft + 'px';
                ttt.style.width = volume + 'px';
                ttt.style.height = volume + 'px';
                tttt = document.createElement('div');
                tttt.className = "body";               
                ttt.appendChild(tttt);
                arr.push(ttt);
                pathX.push(null);
                pathY.push(null);
                bo.insertBefore(ttt, bo.lastChild);
            }
            k++;
        }

        len = arr.length;
        if (flag) {
            len--;
        }
        for (j = 1; j < len; j++) { //根据前一个的位置移动
            pathX[j] = arr[j].offsetLeft;
            pathY[j] = arr[j].offsetTop;
            arr[j].style.left = pathX[j-1] + 'px';
            arr[j].style.top = pathY[j-1] + 'px';
        }
    }
    },
    20 //蛇移动的速度，单位为毫秒
)

// 食物
var foods = [];
var num = 0;

setInterval(function() {
    var imgName = Math.floor((Math.random()*4)+1); //随机取四个食物的中其中一个
    var x1 = Math.floor((Math.random()*1495)+1);
    var y1 = Math.floor((Math.random()*700)+1);
    var food = document.createElement('div');
    food.id = "food" + num;
    food.style = "position: absolute;width: 30px;height: 30px;background: url('/images/" + "food" + imgName + ".png');";
    food.style.left = x1 + 'px';
    food.style.top = y1 + 'px';
    foods.push(food);
    bo.insertBefore(food, bo.lastChild);
    num++;
    },
    1000 //食物出现的速度，单位为毫秒
)