無法使HTML5 Canvas與Twitter Bootstrap一起使用

Question

我正在編寫有關使用Javascript和HTML5的canvas元素創建老式Snake游戲的教程。 我試圖將其放入使用Bootstrap 3的現有模板中。畫布顯示出來，但它完全是灰色的，無法啟動。 我已經遍歷了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

畫布和引導程序沒有問題。 但是，您的代碼中存在很多格式和語法錯誤。

下次嘗試首先檢查代碼中的錯誤。 例如，您可以通過打開檢查器查看Chrome中的控制台。 以下是一些錯誤：

• 沒有getElementByID ，函數是getElementById

• 在以下行的lineTo中存在拼寫錯誤：

  context.lintTo（x-（size / 2），y +（size / 2））;

• 在下面的行中沒有右括號：

  context.strokeText（game.message，canvas / 2，canvas.height / 2;

• 下面的“> = &&”部分是非法聲明

  如果（[['start_game']。indexOf（lastKey）> = && game.over）

• 在以下表達式中有分號而不是逗號：

  setTimeout（function（）{requestAnimationFrame（gameLoop）;}; 1000 / game.fps）;

如果您全部清理了，您將看到畫布將正確顯示（ 這是小提琴的清理版本 ）。