实战——JavaScript贪吃蛇

JavaScript贪吃蛇

// 思路分析
// 三个对象  map  snake  Food 
// map 宽800px和高500px  可以整除 snake每节的宽度
// food 宽10px 高10px 相当于每一节蛇的宽度  同样有（x，y)
// snake 不是一个整体，分为三节  头 身 尾  每节都有自己的坐标（x,y)，但是三节又是连着的

// 功能介绍
/*
	通过蛇头吃到在界面上随机出现的点，然后增加自身的长度
	增加的原理：就是在body数组中增加一条数据，吃到一个点后，重新创建一条蛇
	点（food）：界面上的点每隔一定时间会随机出现，因为点是一个对象，我们把界面上所有随机出现的点放在一个allFood数组中，当蛇吃到点后，会去这个数组中匹配吃到的那个点，然后移除该点（这样做游戏的性能会比较差，因为当界面上点很多很多的时候，这个判断就比较费时了，时间复杂度貌似O(n))
	空格键控制暂停开始，以及蛇的速度，原理：修改定时器的时间，时间越小，蛇移动越快
*/

// 蛇的移动方式
/*
	1、蛇的移动方向由蛇头控制
	2、后一个节点走到前一个节点的位置上，头的位置是我们控制的
	3、移动的距离是一个点的单位长度，而不是px，这个根据自己的点大小进行控制
	4、移动的范围是在地图内，注意：蛇不是以px移动的，所以一上面的为例，蛇的移动范围在 0<=x<=800  0<=y<=500,但是这是距离，水平移动的次数 0~80 垂直移动的次数 0~50
*/

// 蛇的死亡情况
/*
	1、当蛇头碰到边界的时候
	2、当蛇头碰到自身的时候
*/

不多说，直接上代码，在代码中有注释，自己理解

界面上调用

<script>
    var map = new Map();
    var food = new Food();
    var snake = new Snake();
    var speed = 200;
    var allFood = [];
    allFood.push(food);
    
    var timeId1 = setInterval(() => {
    
        var food = new Food();
        allFood.push(food);
    }, 5000);

    var timeId = setInterval("snake.move(timeId,timeId1,allFood)", speed);

    var isPause = true;
    document.onkeydown = function (e) {
    
        switch (e.keyCode) {
    
            case 37:
                if (snake.direction != "right") {
    
                    snake.direction = "left";
                }
                break;
            case 38:
                if (snake.direction != "down") {
    
                    snake.direction = "up";
                }
                break;
            case 39:
                if (snake.direction != "left") {
    
                    snake.direction = "right";
                }
                break;
            case 40:
                if (snake.direction != "up") {
    
                    snake.direction = "down";
                }
                break;
            case 32:
                if (isPause) {
    
                    clearInterval(timeId);
                    isPause = false;
                } else {
    
                    speed -= 50;
                    if (speed <= 50) speed = 50;
                    timeId = setInterval("snake.move(timeId,timeId1,allFood)", speed);
                    isPause = true;
                }
                break;
        }
    }
</script>

地图map对象（其实是构造函数，但是用的是oop的思想）

一个全局变量count，用于计分

var count = 0;

// 定义地图对象构造函数
function Map() {
   
    // 设置地图对象的宽高和背景色
    this.width = 800;
    this.height = 500;
    this.bgColor = "#000";

    // 创建map对象，并且显示在界面上
    this.showMap = function ()