JSFiddle - React, Tailwind, and code Playground

HTML

<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/uglifyjs-parser.js"></script>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.js"></script>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.builderBase.js"></script>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/jscex.async.js"></script>
<!--[if IE]>
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/zhanglei644213943/json2.js"></script>
<script language="javascript">
Jscex.config.codeGenerator = function (code) { return "false || " + code; }
</script>
<![endif]-->  
<div>上下左右键控制蛇的方向</div>
<canvas id="myCanvas" width="320" height="320" style="border: solid 1px #222; background-color: #111;
color: #CCC;">
    Your browser does not support the canvas element.
</canvas>

<input id="Button1" type="button" value="开始游戏" onclick="return begin()" />
<input id="btnReset" disabled="disabled" type="button" value="重新开始" onclick="return reSet()" />

JavaScript

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");

function drawGameOver() {
    cxt.fillStyle = '#FFF';
    cxt.font = '30px Arial';
    cxt.fillText('Game Over!', 100, 120);
}


var positions = [];
var foodPositions = {
    x: -1,
    y: -1
};
var height = 8;
var width = 8;
var direction = "right";
var lastDirection = "right";
positions[0] = {
    x: 0,
    y: 0
};
positions[1] = {
    x: 1,
    y: 0
};
positions[2] = {
    x: 2,
    y: 0
};


var MR = Math.random;

function drawSnakeAndFood(p) {
    if (foodPositions.x == -1 && foodPositions.y == -1) {
        //random____0----39
        foodPositions.x = MR() * 40 | 0;
        foodPositions.y = MR() * 40 | 0;
    }
    cxt.fillStyle =randomColor();
    cxt.fillRect(foodPositions.x * width, foodPositions.y * height, height, width);
    for (i = 0; i < p.length; i++) {
        cxt.fillStyle = "#D1EEEE";
        cxt.fillRect(p[i].x * width, p[i].y * height, height, width);
    }

}

function clearColor(point) {
    cxt.fillStyle = "#111";
    cxt.fillRect(point.x * width, point.y * height, height, width);
}

function IsInSnake(ps, p) {
    for (i = 0; i < ps.length - 1; i++) {
        if (ps[i].x == p.x && ps[i].y == p.y) {
            return true;
        }
    }
    return false;
}
var gameOver = false;
var moveAsync = eval(Jscex.compile("async", function(p) {
    while (true) {
        $await(Jscex.Async.sleep(100));
        if (p[p.length - 1].x < 0 || p[p.length - 1].x > 39 || p[p.length - 1].y < 0 || p[p.length - 1].y > 39) {
            gameOver = true;
        }
        if (direction == "right") {
            if (lastDirection != "left") {
                lastDirection = "right";
                p.push({
                    x: p[p.length - 1].x + 1,
                    y: p[p.length - 1].y
                });

                if (p[p.length - 1].x == foodPositions.x && p[p.length - 1].y == foodPositions.y) {
                    foodPositions.x = -1;
                   ...