Javascript 为什么赢了'；难道我的蛇游戏根本就没有负荷吗？_Javascript_Html

Javascript 为什么赢了'；难道我的蛇游戏根本就没有负荷吗？

javascript html

Javascript 为什么赢了'；难道我的蛇游戏根本就没有负荷吗？,javascript,html,Javascript,Html,我想确保在制作这个蛇游戏时，浏览器中出现了一些东西，但什么都没有显示。我看了很多遍，都不知道我做错了什么。现在如果我刷新浏览器，屏幕将完全空白 gameTime.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>WOMP</title> <link rel="stylesheet" href="h

我想确保在制作这个蛇游戏时，浏览器中出现了一些东西，但什么都没有显示。我看了很多遍，都不知道我做错了什么。现在如果我刷新浏览器，屏幕将完全空白

gameTime.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>WOMP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="gameTime.css">
</head>

<body>

<script type="text/javascript" src="gameTime.js"></script>
</body>
</html>


子宫

gameTime.js

    // constants
var COLS = 26, ROWS = 26;

// IDs
var EMPTY = 0, SNAKE = 1, FRUIT = 2;

// Directions
var LEFT = 0, UP, = 1, RIGHT = 2, DOWN = 3;

var grid = {
    width: null,
    height: null,
    _grid: null,

    init: function(d, c, r) {
        this.width = c;
        this.height = r;

        this._grid = [];

        for(var x = 0; x < c; x++) {
            this._grid.push([]); // push an empty array 
            for(var y = 0; y < r; y++) {
                this._grid[x].push(d); // push values into each row for the column
            }
        }
    },

    set: function(val, x, y) {
        this._grid[x][y] = val; // 
    },

    get: function(x, y) {
        return this._grid[x][y];
    }
}

var snake = {
    direction: null,
    last: null;
    _queue: null,

    init: function(d, x, y) {
        this.direction = d;

        this._queue = [];

        this.insert(x, y);
    },

    insert: function(x, y) {
        this._queue.unshift({x:x, y:y})
        this.last - this._queue[0];
    }

    remove: function() {
        return this._queue.pop();
    }
}

function setFood() {
    var empty = [];
    for(var x = 0; x < grid.width; x++) {
        for(var y = 0; y < grid.height; y++) {
            if(grid.get(x,y) == EMPTY) {
                empty.push({x:x, y:y})
            }
        }
    }
    var randpos = empty[Math.floor(Math.random() * empty.length)];
    grid.set(FRUIT, randpos.x, randpos.y);
}

// Game objects

var canvas, ctx, keystate, frames;

function main() {
    canvas = document.createElement("canvas");
    canvas.width = COLS*20;
    canvas.height = ROWS*20;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    frames = 0;
    keystate = {}; // empty object

    init();
    loop();
}

function init() {
    grid.init(EMPTY, COLS, ROWS);

    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);

    setFood();
}

function loop() {
    update();
    draw();

    window.requestAnimationFrame(loop, canvas);
}

function update() {
    frames++;
}

    function draw() {
        var tw = canvas.width/grid.width;
        var th = canvas.height/grid.height;

        for(var x = 0; x < grid.width; x++) {
            for(var y = 0; y < grid.height; y++) {
                switch(grid.get(x, y)) {
                    case EMPTY:
                    ctx.fillStyle = "#fff";
                    break;
                    case SNAKE:
                    ctx.fillStyle = "#0ff";
                    break;
                    case FRUIT:
                    ctx.fillStyle = "#f00";
                    break;
                }
                ctx.fillRect(x*tw, y*th, tw, th);
            }
        }
    }

    main();

//常数
var COLS=26，ROWS=26；
//身份证
空变量=0，蛇=1，果=2；
//方向
变量左=0，向上=1，右=2，向下=3；
变量网格={
宽度：空，
高度：空，
_网格：空，
init：函数（d，c，r）{
这个宽度=c；
这个高度=r；
这个。_网格=[]；
对于（var x=0；x

您有一大堆样式问题。逗号放错了地方。调试的最简单方法是修复代码，进入开发人员工具并查看控制台日志中的错误。另外，js文件应该放在文件的末尾，以便首先加载DOM

var COLS=26，ROWS=26

// IDs
var EMPTY = 0, SNAKE = 1, FRUIT = 2;

// Directions
var LEFT = 0, UP = 1, RIGHT = 2, DOWN = 3;

var grid = {
    width: null,
    height: null,
    _grid: null,

    init: function (d, c, r) {
        this.width = c;
        this.height = r;

        this._grid = [];

        for (var x = 0; x < c; x++) {
            this._grid.push([]); // push an empty array 
            for (var y = 0; y < r; y++) {
                this._grid[x].push(d); // push values into each row for the column
            }
        }
    },

    set: function (val, x, y) {
        this._grid[x][y] = val; // 
    },

    get: function (x, y) {
        return this._grid[x][y];
    }
}

var snake = {
    direction: null,
    last: null,
    _queue: null,

    init: function (d, x, y) {
        this.direction = d;

        this._queue = [];

        this.insert(x, y);
    },

    insert: function (x, y) {
        this._queue.unshift({ x: x, y: y })
        this.last - this._queue[0];
    },

    remove: function () {
        return this._queue.pop();
    }
}


function setFood() {
    var empty = [];
    for (var x = 0; x < grid.width; x++) {
        for (var y = 0; y < grid.height; y++) {
            if (grid.get(x, y) == EMPTY) {
                empty.push({ x: x, y: y })
            }
        }
    }
    var randpos = empty[Math.floor(Math.random() * empty.length)];
    grid.set(FRUIT, randpos.x, randpos.y);
}

// Game objects

var canvas, ctx, keystate, frames;

function main() {
    canvas = document.createElement("canvas");
    canvas.width = COLS * 20;
    canvas.height = ROWS * 20;
    ctx = canvas.getContext("2d");
    document.getElementById("game").appendChild(canvas);

    frames = 0;
    keystate = {}; // empty object

    init();
    loop();
}

function init() {
    grid.init(EMPTY, COLS, ROWS);

    var sp = { x: Math.floor(COLS / 2), y: ROWS - 1 };
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);

    setFood();
}

function loop() {
    update();
    draw();

    window.requestAnimationFrame(loop, canvas);
}

function update() {
    frames++;
}

function draw() {
    var tw = canvas.width / grid.width;
    var th = canvas.height / grid.height;

    for (var x = 0; x < grid.width; x++) {
        for (var y = 0; y < grid.height; y++) {
            switch (grid.get(x, y)) {
                case EMPTY:
                    ctx.fillStyle = "#fff";
                    break;
                case SNAKE:
                    ctx.fillStyle = "#0ff";
                    break;
                case FRUIT:
                    ctx.fillStyle = "#f00";
                    break;
            }
            ctx.fillRect(x * tw, y * th, tw, th);
        }
    }
}

main();

//IDs
空变量=0，蛇=1，果=2；
//方向
var LEFT=0，UP=1，RIGHT=2，DOWN=3；
变量网格={
宽度：空，
高度：空，
_网格：空，
init：函数（d，c，r）{
这个宽度=c；
这个高度=r；
这个。_网格=[]；
对于（var x=0；x<script>

   // constants
var COLS = 26, ROWS = 26;

// IDs
var EMPTY = 0, SNAKE = 1, FRUIT = 2;

// Directions
var LEFT = 0, UP = 1, RIGHT = 2, DOWN = 3;

var grid = {
    width: null,
    height: null,
    _grid: null,

    init: function(d, c, r) {
        this.width = c;
        this.height = r;

        this._grid = [];

        for(var x = 0; x < c; x++) {
            this._grid.push([]); // push an empty array 
            for(var y = 0; y < r; y++) {
                this._grid[x].push(d); // push values into each row for the column
            }
        }
    },

    set: function(val, x, y) {
        this._grid[x][y] = val; // 
    },

    get: function(x, y) {
        return this._grid[x][y];
    }
}

var snake = {
    direction: null,
    last: null,
    _queue: null,

    init: function(d, x, y) {
        this.direction = d;

        this._queue = [];

        this.insert(x, y);
    },

    insert: function(x, y) {
        this._queue.unshift({x:x, y:y})
        this.last - this._queue[0];
    },

    remove: function() {
        return this._queue.pop();
    }
}

function setFood() {
    var empty = [];
    for(var x = 0; x < grid.width; x++) {
        for(var y = 0; y < grid.height; y++) {
            if(grid.get(x,y) == EMPTY) {
                empty.push({x:x, y:y})
            }
        }
    }
    var randpos = empty[Math.floor(Math.random() * empty.length)];
    grid.set(FRUIT, randpos.x, randpos.y);
}

// Game objects

var canvas, ctx, keystate, frames;

function main() {
    canvas = document.createElement("canvas");
    canvas.width = COLS*20;
    canvas.height = ROWS*20;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    frames = 0;
    keystate = {}; // empty object

    init();
    loop();
}

function init() {
    grid.init(EMPTY, COLS, ROWS);

    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);

    setFood();
}

function loop() {
    update();
    draw();

    window.requestAnimationFrame(loop, canvas);
}

function update() {
    frames++;
}

    function draw() {
        var tw = canvas.width/grid.width;
        var th = canvas.height/grid.height;

        for(var x = 0; x < grid.width; x++) {
            for(var y = 0; y < grid.height; y++) {
                switch(grid.get(x, y)) {
                    case EMPTY:
                    ctx.fillStyle = "#fff";
                    break;
                    case SNAKE:
                    ctx.fillStyle = "#0ff";
                    break;
                    case FRUIT:
                    ctx.fillStyle = "#f00";
                    break;
                }
                ctx.fillRect(x*tw, y*th, tw, th);
            }
        }
    }

    main(); 

</script>