色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

為什么我的JS游戲沒有在HTML的畫布中顯示？

CSS
林雅南2年前8瀏覽0評論

我試圖重現這個游戲https://codeguppy.com/run.html?火星_攻擊/程序 在我的計算機上的vs代碼的確切游戲。但是我遇到了麻煩。 我已經為它制作了這些文件，但是在網站上似乎什么也沒有顯示。

[![文件][1]][1]

以下是當前網站的外觀: [![當前網站][2]][2]

以下是我的HTML代碼:

<body>
<canvas class="canvas"></canvas>

<script src="intro.js" async defer></script>
<script src="mountains.js" async defer></script>
<script src="ship.js" async defer></script>
<script src="stars.js" async defer></script>
<script src="game.js" async defer></script>
<script src="enemy.js" async defer></script>

以下是intro.js的代碼:

const ctx = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 480;

let stars = createStars();
let flashState = true;

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

function update() {
    if (frameCount % 20 === 0) flashState = !flashState;

    // Update stars
    for (let star of stars) {
        star.x--;
        if (star.x < 0) star.x = canvas.width;
    }
}

function createStars() {
    let stars = [];

    for (let i = 0; i < 100; i++) {
        stars.push({
            x: random(canvas.width),
            y: random(canvas.height)
        });
    }

    return stars;
}

function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function draw() {
    ctx.fillStyle = "Black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.textAlign = "center";

    ctx.fillStyle = "White";
    ctx.font = "60px Arial";
    ctx.fillText("Mars Attack", canvas.width / 2, 100);

    ctx.font = "20px Arial";
    ctx.fillText("1 - Easy Mode", canvas.width / 2, 200);
    ctx.fillText("2 - Expert Mode", canvas.width / 2, 270);

    ctx.fillStyle = "LightGray";
    ctx.font = "14px Arial";
    ctx.fillText("Mountains are just decor", canvas.width / 2, 220);
    ctx.fillText("Mountains are obstacles", canvas.width / 2, 290);

    if (flashState) {
        ctx.fillStyle = "White";
        ctx.font = "20px Arial";
        ctx.fillText("Press key 1 or 2 to start game", canvas.width / 2, 350);
    }

    // Draw stars
    ctx.fillStyle = "White";
    for (let star of stars) {
        ctx.fillRect(star.x, star.y, 1, 1);
    }

    ctx.fillStyle = "Maroon";
    ctx.beginPath();
    ctx.moveTo(250, 500);
    ctx.lineTo(0, canvas.height);
    ctx.lineTo(500, canvas.height);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(500, 400);
    ctx.lineTo(300, canvas.height);
    ctx.lineTo(700, canvas.height);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(750, 300);
    ctx.lineTo(500, canvas.height);
    ctx.lineTo(1000, canvas.height);
    ctx.fill();
}

function keyPressed(key) {
    if (key === "1" || key === "2") showScene("Game", key);
}

document.addEventListener('keydown', function(event) {
    if (event.key === '1' || event.key === '2') {
        keyPressed(event.key);
    }
});

setInterval(loop, 1000 / 60); // Call loop() 60 times per second

有人能幫我嗎？如果你需要其他文件的代碼，盡管開口。 [1]:https://i.stack.imgur.com/qCiY8.png [2]:https://i.stack.imgur.com/vJeNN.png

你的代碼中缺少一些東西。 我假設您在這里只給出了html代碼的一部分。

在intro.js中，您還沒有初始化canvas變量

const canvas = document.querySelector('.canvas');

您還使用了沒有聲明的frameCount變量

const frameCount = 60;

而在createStars()函數中，創建隨機數的代碼是

x: Math.floor(Math.random() * canvas.width),
y: Math.floor(Math.random() * canvas.height)

這會給你一些輸出，但我這邊有點小問題...

注意:順便說一下，所有這些錯誤都在控制臺中給出，所以無論什么時候出錯，檢查控制臺都是有用的