JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<div id="con">
        <h1>贪吃蛇JavaScript版</h1>
        <div id="Canvas">
        </div>

        <div>
            <span>分数：<i id="integral">0</i></span>
            <span class="r">速度：<i id="speed">200</i></span>
        </div>
    </div>

CSS

*{margin:0;padding: 0;line-height: 1;}
body{font-family: Arial, 'Microsoft Yahei', Simsun, sans-serif;background-color: #7bef70;}
#con{width:400px;margin: 20px auto;}
    #con span.r{float: right;}
    #con h1{text-align: center;}
    #Canvas{margin: 20px auto;background-color: #f4f9f5;overflow: hidden;}
    #Canvas table{width: 100%;border:2px solid #000;border-collapse: collapse;}
    #Canvas table td{border-collapse: collapse;border:1px solid #bfcde9;width: 8px;height: 8px;}
    #Canvas table td.SnakeBody{background-color: #82f170}
    #Canvas table td.SnakeHead{background-color: #4ca72e;}
    #Canvas table td.Mouse{background-color: red;}

JavaScript

var Snake = {
    time : "",
    mapX : 40,
    mapY : 40,
    speed : 200,
    mousePos : {},  //老鼠坐标
    snakeStartPos : {"x":10,"y":20},  //蛇起始位置
    snakeDirection : "Right",   //起始方向
    snakeLen : 5,   //长度
    snakeArr : [],  //蛇身体的坐标
    pointArr : [],  //转点数组
    $ : function(id){
        return document.getElementById(id);
    },
    init : function(){
        this.CreateMap();
        this.CreateSnake();
        this.CreateMouse();
        document.onkeydown = this.keyDirection;
        this.timer = setInterval(this.MoveSnake, this.speed);
    },
    CreateMap : function(){    //创建画布
        var x = this.mapX,
            y = this.mapY,
            html = ["<table>"];
        for(var i=0; i<y; i++){
            html.push("<tr>");
            for(var j=0; j<x; j++){
                html.push("<td id='map_"+j+"_"+i+"'></td>");
            }
            html.push("</tr>");
        }
        html.push("</table>");
        this.$("Canvas").innerHTML = html.join("");
    },
    CreateMouse : function(){    //创建老鼠
        var x,y,id,
            that = this,
            getMouse = function(){
                for(var i in that.snakeArr){
                    if(x==that.snakeArr[i]["x"] && y==that.snakeArr[i]["y"]){   //如果坐标与snake身体重叠重置
                        return random();
                    }
                }
                that.mousePos.x = x;
                that.mousePos.y = y;
                that.$("map_"+x+"_"+y).className = "Mouse";
            },
            random = function(){
                x = Math.floor(Math.random()*(that.mapX-1));
                y = Math.floor(Math.random()*(that.mapY-1));
                getMouse();
            };
           
        random();
    },
    CreateSnake : function(){
        var $ = this.$,
            snakeArr = this.snakeArr,
            snakeLen = this.snakeLen,
            posX = this.snakeStartPos.x,
            posY = this.snakeStartPos.y,
            n = snakeLen + posX;
        for(var i = posX;...