Question

我想确保在我的浏览器中出现一些东西，因为我制作了这个蛇游戏，但没有任何东西出现。我看了很多次＆amp;无法弄清楚我做错了什么。现在，如果我刷新浏览器，则屏幕完全空白。

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();

Answer 1

你有很多样式问题。你在错误的地方有逗号。调试此问题的最简单方法是修复代码，进入开发人员工具并查看控制台日志中的错误。此外，您的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();

Answer 2

我已经为您清理了脚本。要突出您的问题：

snake 对象中的插入方法需要逗号将其与删除方法分开。
snake 对象中的 last 属性需要使用逗号将其与其他属性分开。你有一个分号。
您的 Up 变量后面有逗号。删除它。

此代码适用于我：

<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>

为什么要赢得我的蛇游戏负荷呢？

2 个答案: