Javascript Can'；不要让HTML5画布与Twitter引导一起工作

我正在做一个关于使用Javascript和HTML5的canvas元素创建一个老式蛇游戏的教程。我试着把它放到使用Bootstrap3的现有模板中。画布显示出来，但它完全是灰色的，无法启动。我已经检查了JS、HTML和CSS，但没有发现问题。如果有人能帮我看一看，并给我一些解决问题的建议，我将不胜感激。这也是我第一次提交问题，如果我犯了任何noob错误，非常抱歉！非常感谢

以下是指向JSFIDLE的链接：

以下是我的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);

var canvas=document.getElementByID（“游戏”）；
var context=canvas.getContext（“2d”）；
野味、蛇、食物；
游戏={
分数：0，
fps:8，
过：错，
消息：空，
开始：函数（）{
game.over=错误；
game.message=null；
游戏。分数=0；
game.fps=8；
snake.init（）；
食物；
},
停止：函数（）{
游戏结束=正确；
game.message='游戏结束-按空格键'；
},
抽屉：功能（x、y、尺寸、颜色）{
context.fillStyle=颜色；
context.beginPath（）；
移动到（x-（大小/2），y-（大小/2））；
lineTo（x+（大小/2），y-（大小/2））；
lineTo（x+（大小/2），y-（大小/2））；
lintTo（x-（大小/2），y+（大小/2））；
},
drawScore:函数（）{
context.fillStyle='#999'；
context.font=（canvas.height）+“px影响，无衬线”；
context.textAlign='center'；
context.fillText（game.score，canvas.width/2，canvas.height*0.9）；
},
drawMessage:function（）{
如果（game.message！==null）{
context.fillStyle='#00F'；
context.strokeStyle='#FFF'；
context.font=（canvas.height/10）+“px冲击”；
context.textAlign='center'；
context.fillText（game.message，canvas.width/2，canvas.height/2）；
context.strokeText（game.message，canvas/2，canvas.height/2；
}
},
resetCanvas:函数（）{
clearRect（0,0，canvas.width，canvas.height）；
}
};
蛇={
尺寸：canvas.width/40，
x:null，
y:空，
颜色：'#0F0'，
方向：'左'，
章节：[]，
init:function（）{
snake.sections=[]；
snake.direction='left'；
snake.x=canvas.width/2+snake.size/2；
snake.y=canvas.height/2+snake.size/2；
对于（i=snake.x+（5*size.size）；i>=snake.x；i-=snake.size）{
snake.sections.push（i+'，'+snake.y）；
}
move:function（）{
开关（蛇形方向）{
案例“向上”：
snake.y-=snake.size；
打破
案例“关闭”：
snake.y+=snake.size；
打破
案例“左”：
snake.x-=snake.size；
打破
案例“正确”：
snake.x+=snake.size；
打破
}
snake.checkCollision（）；
snake.checkGrowth（）；
snake.sections.push（snake.x+'，'+snake.y）；
},
绘图：函数（）{
for（i=0；i=&&game.over）{
game.start（）；
}
}，假）；
var requestAnimationFrame=window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame；
函数gameLoop（）{
如果（game.over==false）{
game.resetCanvas（）；
game.drawScore（）；
snake.move（）；
食物；
snake.draw（）；
game.drawMessage（）；
}
setTimeout（函数（）{
requestAnimationFrame（gameLoop）；
}；1000/场/秒；
};
requestAnimationFrame（gameLoop）；

画布和引导没有问题。但是，代码中有很多格式和语法错误

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

• 没有

  getElementByID

  ，函数是

  getElementByID

• 下一行的

  lineTo

  中存在拼写错误：
  lintTo（x-（大小/2），y+（大小/2））

• 下一行中没有闭合括号：
  context.strokeText（game.message，canvas/2，canvas.height/2

• 下面的“>=&&”部分是非法语句
  if（['start\u game'].indexOf（lastKey）>=&game.over）

• 以下表达式中有半色而不是逗号：
  setTimeout（函数（）{ requestAnimationFrame（gameLoop）； }；1000/场/秒

---

如果你把它们全部清理干净，你会看到画布将正确地显示（你的小提琴）。

嘿，非常感谢！我想我是在没有足够注意的情况下匆匆忙忙地完成了最终产品。@gkennedy87没问题，请不要忘了接受答案，以免它出现在未回答的类别中