背景画像がキャンバスに表示されない

ライブラリを使用してJavaScriptで小さなゲームを作成するチュートリアルを続けようとしていますが、より効果的に学習するためにコピー/ペーストなどの代わりに自分ですべてを入力しようとしています、いくつかの側面を変えながら。しかし、私はキャンバスに背景画像を追加しようとしていますが、実行すると空白の画面が表示されます。私が愚かで単純な構文がないか、それとももっと複雑なのか分かりません。ここにHTMLファイルとJSファイルがあります。私は資産フォルダに「背景」と呼ばれる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); 
}

出典

2016-04-19 Xander

段階いつでも内容の変更を更新することを忘れないでください。

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

出典

2016-04-19 22:41:57 Lanny

申し訳ありませんが、どこにcreatejs.on（ "tick"、stage）を追加しますか？ライン？私はstage.Updateラインを追加しましたが、まだ変更はありません – Xander

申し訳ありませんが、私のコードは間違っていました。 'createjs.Ticker.on（" tick "、stage）;' ...これをあなたのonloadに置くことができます（これは一度だけ起こるはずです）。オンラインサンプルがありますか？多分何かが間違っているでしょう。あなたのコンソールに何かエラーがありますか？ – Lanny

背景画像がキャンバスに表示されない

答えて

関連する問題