摘要：蛇類當(dāng)中的保存當(dāng)前蛇類的所有的方塊。移動(dòng)，根據(jù)保存的私有變量方向用來對(duì)數(shù)組中保存的方塊對(duì)象進(jìn)行更改還有一個(gè)蘋果類。用于進(jìn)行隨機(jī)生成吃蘋果，在移動(dòng)方法中，如果蛇的頭方塊和蘋果方塊重合那么吃到蘋果，重新調(diào)用生成蘋果方法。

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 分?jǐn)?shù)記錄
let fraction = 0;
// 定義貪吃蛇的組成，方塊對(duì)象
class Block{
    // 按照size的大小劃分行列
    // 列
    col;
    // 行
    row;
    // 大小
    size;
    constructor(col, row, size){
        this.col = col;
        this.row = row;
        this.size = size;
    }
    // 畫方法
    draw(){
        context.fillRect(this.col * this.size, this.row * this.size, this.size, this.size);
    }
}
// 蛇類
class Snake{
    body = [new Block(20, 20, 10), new Block(20, 21, 10)];
    direction = "right";
    apple;
    constructor(apple) {
        this.apple = apple;
    }
    draw(){
        for(let i = 0; i < this.body.length; i++){
            this.body[i].draw();
        }
    };
    move(){
        let head = this.body[0];
        // 用于生成新蛇的方塊
        let newhead;
        if(this.direction == "right"){
            newhead = new Block(head.col + 1, head.row, head.size);
        }
        if(this.direction == "left"){
            newhead = new Block(head.col - 1, head.row, head.size);
        }
        if(this.direction == "up"){
            newhead = new Block(head.col, head.row - 1, head.size);
        }
        if(this.direction == "down"){
            newhead = new Block(head.col, head.row + 1, head.size);
        }
        // 增加頭部
        this.body.unshift(newhead);
        // 進(jìn)行判斷蛇頭是否碰到了蘋果，若碰到了則不刪除最后一個(gè)方塊，反之刪除最后一個(gè)方塊
        if(newhead.col == this.apple.col
            && newhead.row == this.apple.row){
            // 進(jìn)行檢測，如果生成在蛇身上，繼續(xù)生成，反之結(jié)束循環(huán)
            while(true){
                this.apple.initialization();
                for(let i = 0; i < this.body.length; i++){
                    if(this.apple.row == this.body[i].row
                        && this.apple.col == this.body[i].col){
                        this.apple.initialization();
                    }
                }
                break;
            }
            // 分?jǐn)?shù)加入
            fraction++;
        }else{
            // 彈出
            this.body.pop();
        }
    };
    // 碰撞檢測
    impactChecking(){
        // 獲取頭節(jié)點(diǎn)
        let newBody = this.body[0];
        console.log(newBody.col);
        // 查看行，列是否超過邊界
        if(newBody.col > 40
            || newBody.row > 40
            || newBody.row < 0
            || newBody.col < 0){
            alert("游戲結(jié)束");
            fraction = 0;
            this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];
        }
        // 查看是否碰到自己身體
        for(let i = 1; i < this.body.length; i++){
            if(newBody.col == this.body[i].col
                && newBody.row == this.body[i].row){
                alert("游戲結(jié)束");
                fraction = 0;
                this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];
            }
        }
    }
}
// 實(shí)物，蘋果類
class Apple{
    // 列
    col;
    // 行
    row;
    sizeR;
    constructor(){
        this.initialization();
    };
    // 初始化蘋果
    initialization(){
        // 生成列坐標(biāo)
        this.col = Math.floor(Math.random() * (40 - 1) + 1);
        // 生成行坐標(biāo)
        this.row = Math.floor(Math.random() * (40 - 1) + 1);
        // 設(shè)置蘋果半徑
        this.sizeR = 5;
    }
    // 畫蘋果的方法
    draw(){
        // 顏色
        context.fillStyle = "Red";
        // 畫蘋果
        context.beginPath();
        // 圓心坐標(biāo)
        context.arc(this.col * this.sizeR * 2 + this.sizeR, this.row * this.sizeR * 2 + this.sizeR, this.sizeR, 0, Math.PI * 2, false);
        // 填充
        context.fill();
        // 恢復(fù)原來顏色
        context.fillStyle = "Black";
    }
}
// 生成一個(gè)蘋果
let apple = new Apple();
// 生成一個(gè)蛇
let snake = new Snake(apple);
setInterval(() => {
    context.clearRect(0, 0, 400, 400);
    // 繪制分?jǐn)?shù)
    context.fillText("分?jǐn)?shù)為 " + fraction, 10, 10);
    // 繪制蛇
    snake.draw();
    // 對(duì)蛇進(jìn)行移動(dòng)
    snake.move();
    // 繪制蘋果
    apple.draw();
    // 進(jìn)行檢測
    snake.impactChecking();
    context.strokeRect(0, 0, 400, 400);
}, 200);
// 對(duì)貪吃蛇控制
// 上下左右運(yùn)動(dòng)
$("body").keydown((event) => {
    // 左
    if(event.keyCode == 37 && snake.direction != "right"){
        snake.direction = "left";
    }
    // 上
    if(event.keyCode == 38 && snake.direction != "down"){
        snake.direction = "up";
    }
    // 右
    if(event.keyCode == 39 && snake.direction != "left"){
        snake.direction = "right";
    }
    // 下
    if(event.keyCode == 40 && snake.direction != "up"){
        snake.direction = "down";
    }
});

思路，蛇由兩個(gè)類組成，方塊類和蛇類，蛇類的存在依賴于方塊類。蛇類當(dāng)中的body保存當(dāng)前蛇類的所有的方塊。繪圖，直接遍歷body內(nèi)部的所有繪圖方法。移動(dòng)，根據(jù)保存的私有變量方向用來對(duì)數(shù)組中保存的方塊對(duì)象進(jìn)行更改
還有一個(gè)蘋果類。用于進(jìn)行隨機(jī)生成
吃蘋果，在移動(dòng)方法中，如果蛇的頭方塊和蘋果方塊重合那么吃到蘋果，重新調(diào)用生成蘋果方法。
碰撞檢測，如果行和列超過范圍，即碰撞發(fā)生
最重要的，坐標(biāo)行和列化，使用的時(shí)候乘以一個(gè)數(shù)就行