背景图像未显示在画布中

Background Image not appearing in canvas

本文关键字：布中 显示 图像 背景      更新时间：2023-09-26

我正试图跟随教程使用库在JavaScript中构建一个小游戏，但我正试图自己键入所有内容，而不是复制/粘贴等，以便在改变某些方面的同时更有效地学习。然而，我试图将背景图像添加到画布中，但当我运行它时，我看到的只是一个空白的白色屏幕。我不确定我是愚蠢的，错过了简单的语法，还是更复杂。这是HTML和JS文件。我在名为"background"的资产文件夹中有一个png图像。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>1812 Shooter Game</title>
        <link href="normalize.css" type="text/css" rel="stylesheet" />
        <!-- Game File -->
        <script language="javascript" type="text/javascript" src="game.js" />
        <!-- CDN For CreateJS Library -->
        <script language="javascript" type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js" />

    </head>
    <body>
        <canvas id="GameCanvas"></canvas>
    </body>
</html>

game.js

var context;
var queue;
var WIDTH = 3072;
var HEIGHT = 1536;
var mouseXPosition;
var mouseYPosition;
var batImage;
var stage;
var animation;
var deathAnimation;
var spriteSheet;
var enemyXPos=100;
var enemyYPos=100;
var enemyXSpeed = 1.5;
var enemyYSpeed = 1.75;
var score = 0;
var scoreText;
var gameTimer;
var gameTime = 0;
var timerText;
window.onload = function() {
    //     Set up the Canvas with Size and height
    var canvas = document.getElementById('GameCanvas');
    context = canvas.getContext('2d');
    context.canvas.width = WIDTH;
    context.canvas.height = HEIGHT;
    stage = new createjs.Stage("GameCanvas");
    //Set up the Asset Queue and load sounds
    queue = new createjs.LoadQueue(false);
    queue.installPlugin(createjs.Sound);
    queue.on("complete", queueLoaded, this);
    createjs.Sound.alternateExtensions = ["ogg"];
    //Create a load manifest for all assets
    queue.loadManifest([ {
        id: 'backgroundImage', src: 'assets/background.png'},
        //{id: 'crossHair', src: 'assets/crosshair.png'},
        //{id: 'shot', src: 'assets/shot.mp3'},
        //{id: 'background', src: 'assets/countryside.mp3'},
        //{id: 'gameOverSound', src: 'assets/gameOver.mp3'},
        //{id: 'tick', src: 'assets/tick.mp3'},
        //{id: 'deathSound', src: 'assets/die.mp3'},
        //{id: 'batSpritesheet', src: 'assets/batSpritesheet.png'},
        //{id: 'batDeath', src: 'assets/batDeath.png'},
    ]);
    queue.load();
    //Create a timer that updates once per second
    gameTimer = setInterval(updateTime, 1000);
}
function queueLoaded(event) {
    // Add background image
    var backgroundImage = new createjs.Bitmap(queue.getResult("backgroundImage"))
    stage.addChild(backgroundImage);
}

记住在内容发生任何变化时都要更新阶段。

var backgroundImage = new createjs.Bitmap(queue.getResult("backgroundImage"))
stage.addChild(backgroundImage);
stage.update();

你没有发布你的updateTime方法，所以我不确定它是否会为你更新你的阶段。通常在一个不断变化的游戏/应用程序中，会有一个不断的阶段更新：

createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.on("tick", handleTick);
function handleTick(event) {
    stage.update(event);
}
相关文章：