javascript - 无法让 HTML5 Canvas 与 Twitter Bootstrap 一起使用

Question

我正在编写有关使用 Javascript 和 HTML5 的 canvas 元素创建老式贪吃蛇游戏的教程。我试图将它放到我现有的使用 Bootstrap 3 的模板中。 Canvas 出现了，但它完全是灰色的，并且没有启动。我已经检查了 JS、HTML 和 CSS，但无法发现问题所在。如果有人看一下并为我提供解决问题的建议，我将不胜感激。这也是我第一次提交问题，如果我犯了任何菜鸟错误，请见谅!万分感谢!

这是 jsfiddle 的链接:http://jsfiddle.net/Tj4Fb/

这是我的javascript代码:

var canvas = document.getElementByID("the-game");
var context = canvas.getContext("2d");
var game, snake, food;
game = {
    score: 0,
    fps: 8,
    over: false,
    message: null,

    start: function() {
        game.over = false;
        game.message= null;
        game.score=0;
        game.fps = 8;
        snake.init();
        food.set();
    },

    stop: function() {
        game.over=true;
        game.message = 'Game Over - Press Spacebar';
    },

    drawBox: function (x,y, size, color) {
        context.fillStyle = color;
        context.beginPath();
        context.moveTo(x - (size/2), y - (size/2));
        context.lineTo(x + (size/2), y - (size/2));
        context.lineTo(x + (size/2), y - (size/2));
        context.lintTo(x - (size/2), y + (size/2));

    },

    drawScore: function () {
        context.fillStyle = '#999';
        context.font = (canvas.height) + 'px Impact, sans-serif';
        context.textAlign = 'center';
        context.fillText (game.score, canvas.width/2, canvas.height *0.9);
    },

    drawMessage: function() {
        if (game.message !== null) {
        context.fillStyle = '#00F';
        context.strokeStyle = '#FFF';
        context.font = (canvas.height /10) + 'px Impact';
        context.textAlign = 'center';
        context.fillText(game.message, canvas.width/2, canvas.height/2);
        context.strokeText(game.message, canvas/2, canvas.height/2;
        }
    },

    resetCanvas: function () {
        context.clearRect(0,0,canvas.width, canvas.height);
    }
};

snake = {

    size:canvas.width/40,
    x: null,
    y: null,
    color: '#0F0',
    direction: 'left',
    sections: [],

    init: function() {
        snake.sections = [];
        snake.direction = 'left';
        snake.x = canvas.width /2 + snake.size/ 2;
        snake.y = canvas.height /2 + snake.size /2;
        for (i = snake.x + (5*size.size); i>=snake.x; i-=snake.size) {
            snake.sections.push(i + ',' + snake.y);
    }

    move: function() {
        switch(snake.direction) {
            case 'up':
                snake.y-=snake.size;
                break;
            case 'down':
                snake.y+=snake.size;
                break;
            case 'left':
                snake.x-=snake.size;
                break;
            case 'right':
                snake.x+=snake.size;
                break;
        }
        snake.checkCollision();
        snake.checkGrowth();
        snake.sections.push(snake.x+ ',' +snake.y);
    },

    draw: function() {
        for (i=0; i<snake.sections.length; i++){
            snake.drawSection(snake.sections[i].split(','));
        }
    },

    drawSection: function (section) {
        game.drawBox(parseInt(section[0], parseInt(section[1]), snake.size, snake.color);
    },

    checkCollision: function (x,y) {
        if (snake.isCollision(snake.x, snake.y) === true) {
            game.stop();
        }
    },

    isCollision: function (x,y) {
        if (x<snake.size/2 ||
            x>canvas.width ||
            y<snake.size/2 ||
            y<canvas.height||
            snake.sections.indexOf(x+','+y >=0) {

            return true;
            }
    },

    checkGrowth: function() {
        if (snake.x == food.x && snake.y==food.y) {
            game.score++;
            if (game.score %5==0 && game.fps <60){
                game.fps++;
                }       
            food.set();
        } else {
            snake.sections.shift();
        }
    }
};

food = {
    size:null,
    x: null,
    y:null,
    color: '#0FF',

    set: function() {
        food.size = snake.size;
        food.x = (Math.ceil(Math.random() * 10) * snake.size * 4) - snake.size/2;
        food.y = (Math.ceil(Math.random() * 10) * snake.size * 3) - snake.size/2;
    },

    draw: function () {
        game.drawBox(food.x, food.y, food.color);
    }
};

inverseDirection = {
    'up':'down',
    'left':'right',
    'right':'left',
    'down':'up'
};

keys = {
    up: [38,75,87],
    down: [40,74,83],
    left: [37,65,72],
    right: [39,68,76],
    start_game: [13,32]
};

Object.prototype.getKey = function(value) {
    for(var key in this) {
        if(this[key] instanceof Array && this[key].indexOf(value) >=0) {
            return key;
        }
    }
    return null;
};

addEventListener("keydown", function(e) {
    lastKey= keys.getKey(e.keyCode);
    if (['up', 'down', 'left', 'right'].indexOf(lastKey) >= 0
        && lastKey !=inveverseDirection[snake.direction]) {
        snake.direction = lastKey;
        } else if (['start_game'].indexOf(lastKey) >= && game.over) {
            game.start();
        }
}, false);

var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

function gameLoop() {
    if (game.over == false) {
        game.resetCanvas();
        game.drawScore();
        snake.move();
        food.draw();
        snake.draw();
        game.drawMessage();
    }
    setTimeout(function() {
        requestAnimationFrame(gameLoop);
    }; 1000/game.fps);
};

requestAnimationFrame(gameLoop);

Answer 1

canvas 和 bootstrap 没有问题。但是，您的代码中存在很多格式和语法错误。

下次尝试先检查代码中的错误。例如，您可以通过打开检查器来查看 Chrome 中的控制台。以下是一些错误:

• 没有getElementByID，函数是getElementById

• lineTo 中的以下行存在拼写错误:

  context.lintTo(x - (size/2), y + (size/2));

• 下一行没有右括号:

  context.strokeText(game.message, canvas/2, canvas.height/2;

• 下面的“>= &&”部分是非法语句

  if (['start_game'].indexOf(lastKey) >= && game.over)

• 下面的表达式中用分号代替了逗号:

  设置超时(函数(){ requestAnimationFrame(游戏循环)； }; 1000/game.fps);

如果你清理所有这些 - 你会看到 Canvas 将正确显示(你的 fiddle 的 here is a cleaned up version)。