Question

我正在尝试按照教程使用库在JavaScript中构建一个小游戏，但我试图自己键入所有内容而不是复制/粘贴等，以便更有效地学习，同时改变某些方面。但是我正在尝试将背景图像添加到画布中，但是当我运行它时，我看到的是一个空白的白色屏幕。我不确定我是不是很愚蠢而且缺少简单的语法，或者它是否更复杂。这是HTML和JS文件。我在assets文件夹中有一个名为'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);
}

Answer 1

请记住在内容发生变化时更新舞台。

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);
}

背景图片未出现在画布

1 个答案: