小程序贪吃蛇

function Map() {
this.w = 800;
this.h = 400;
this.c = “#ccc”;

    this.init();
}

Map.prototype.init = function () {
    this.m = document.createElement("div");
    this.m.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};position:relative;margin:100px auto;`;
    document.body.appendChild(this.m);
}
// new Map();

function Food() {
    this.w = 20;
    this.h = 20;
    this.c = "yellow";
    this.init();
}

Food.prototype = {
    constructor: Food,
    init: function () {
        this.f = document.createElement("div");
        this.f.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};position:absolute;`;
        map.m.appendChild(this.f);

        this.random();
    },
    random: function () {
        this.x = random(0, map.w / this.w - 1);
        this.y = random(0, map.h / this.h - 1);
        this.f.style.left = this.x * this.w + "px";
        this.f.style.top = this.y * this.h + "px";
    }
}

function random(a, b) {
    return Math.round(Math.random() * (a - b) + b)
}

function randomColor() {
    return `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`
}

// 蛇对象
function Snake() {
    this.w = 20;
    this.h = 20;

    this.body = [{
        x: 6,
        y: 3,
        c: "lightblue"
    }, {
        x: 5,
        y: 3,
        c: "green"
    }, {
        x: 4,
        y: 3,
        c: "yellow"
    }];
    // 方法属性，默认向右走
    this.direct = "right";

    // 开始创建
    this.init()

}
Snake.prototype.init = function () {
    for (var i = 0; i < this.body.length; i++) {
        if (!this.body[i].s) {
            this.body[i].s = document.createElement("div");
            this.body[i].s.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.body[i].c};position:absolute;`;
            map.m.appendChild(this.body[i].s);
        }
        // 如果已经创建，只能设置位置
        this.body[i].s.style.left = this.body[i].x * this.w + "px";
        this.body[i].s.style.top = this.body[i].y * this.h + "px";
    }
    // 给蛇头何蛇尾加标志
    this.body[0].s.innerHTML = "头";
    this.body[this.body.length - 1].s.innerHTML = "尾";

    // 延时行走，时间决定难度
    setTimeout(function () {
        this.move();
    }.bind(this), 252)
}

Snake.prototype.move = function () {
    // 先让尾巴向前走
    for (var i = this.body.length - 1; i > 0; i--) {
        this.body[i].x = this.body[i - 1].x;
        this.body[i].y = this.body[i - 1].y;

    }
    switch (this.direct) {
        case "left":
            this.body[0].x -= 1;
            break;
        case "top":
            this.body[0].y -= 1;
            break;
        case "right":
            this.body[0].x += 1;
            break;
        case "bottom":
            this.body[0].y += 1;

    }

    // 撞到食物：食物的位置更新，蛇节增加一个，放在蛇尾处
    if (this.body[0].x == food.x && this.body[0].y == food.y) {
        food.random();
        var last = {
            x: this.body[this.body.length - 1].x,
            y: this.body[this.body.length - 1].y
        }
        this.body.push({
            x: last.x,
            y: last.y,
            c: randomColor()
        })
    }

  //   边界设定
   if (this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > 39 || this.body[0].y > 19) {
      alert("撞墙死");
       return;

    }
    // 撞到自己的身体
    for (var i = 1; i < this.body.length; i++) {
        if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
           alert("自生自灭");
            return;
       }
   }

    this.init();

}
Snake.prototype.direction = function (code) {
    switch (code) {
        case 65:
            this.direct = "left";
            break;
        case 87:
            this.direct = "top";
            break;
        case 68:
            this.direct = "right";
            break;
        case 83:
            this.direct = "bottom";
            break;

    }
} 


// 工具类函数
function random(a, b) {
    return Math.round(Math.random() * (a - b) + b);
}

function randomColor() {
    return  `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`
}

// 创建地图
var map = new Map();

// 创建食物
var food = new Food();

// 创建蛇
var snake = new Snake();


// 根据键盘按下的方向建，绝定蛇的方向

document.onkeydown = function (eve) {
var e = eve || window.event;
var code = e.keyCode || e.which;
snake.direction(code)
}