無法找出在Javascript代碼中繪制圖像的位置

Question

我在嘗試將圖像放置為“避免小行星”游戲的對象時遇到問題。 根據我在《基礎：用於游戲和娛樂的HTML5畫布》一書中所寫的內容，我能夠使游戲本身正常工作。 我想超越本書中所寫的內容。 我想用圖像替換三角形的船。 但是，我無法弄清楚將this.draw的代碼放在哪里。 我的教授向我們展示了一種方法。 當我嘗試將其實現到我的代碼中時，它並不想正常工作。 請問關於如何放置圖像的建議？

這是我在進行任何this.draw編輯之前的書中的工作代碼：( http://jsbin.com/tukejopofo/1/ ）

 $(document).ready(function() { var canvas = $("#gameCanvas"); var context = canvas.get(0).getContext("2d"); //canvas dimensions var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); var playGame; var asteroids; var numAsteroids; var player; var score; var scoreTimeout; var arrowUp = 38; var arrowRight = 39; var arrowDown = 40; var arrowLeft = 37; //game UI var ui = $("#gameUI"); var uiIntro = $("#gameIntro"); var uiStats = $("#gameStats"); var uiComplete = $("#gameComplete"); var uiPlay = $("#gamePlay"); var uiReset = $(".gameReset"); var uiScore = $(".gameScore"); var soundBackground = $("#gameSoundBackground").get(0); var soundThrust = $("#gameSoundThrust").get(0); var soundDeath = $("#gameSoundDeath").get(0); var Asteroid = function(x, y, radius, vX) { this.x = x; this.y = y; this.radius = radius; this.vX = vX; }; var Player = function(x, y) { this.x = x; this.y = y; this.width = 24; this.height = 24; this.halfWidth = this.width / 2; this.halfHeight = this.height / 2; this.flameLength1 = 20; this.flameLength2 = 20; this.vX = 0; this.vY = 0; this.moveRight = false; this.moveUp = false; this.moveDown = false; this.moveLeft = false; }; //Reset and start the game function startGame() { //Reset game stats uiScore.html("0"); uiStats.show(); //set up initial game settings playGame = false; asteroids = new Array(); numAsteroids = 10; score = 0; player = new Player(150, canvasHeight / 2, 50, 50); for (var i = 0; i < numAsteroids; i++) { var radius = 5 + (Math.random() * 10); var x = canvasWidth + radius + Math.floor(Math.random() * canvasWidth); var y = Math.floor(Math.random() * canvasHeight); var vX = -5 - (Math.random() * 5); asteroids.push(new Asteroid(x, y, radius, vX)); }; $(window).keydown(function(e) { var keyCode = e.keyCode; if (!playGame) { playGame = true; soundBackground.currentTime = 0; soundBackground.play(); animate(); timer(); }; if (keyCode == arrowRight) { player.moveRight = true; if (soundThrust.paused) { soundThrust.currentTime = 0; soundThrust.play(); } } else if (keyCode == arrowLeft) { player.moveLeft = true; } else if (keyCode == arrowUp) { player.moveUp = true; } else if (keyCode == arrowDown) { player.moveDown = true; } }); $(window).keyup(function(e) { var keyCode = e.keyCode; if (!playGame) { playGame = true; animate(); }; if (keyCode == arrowRight) { player.moveRight = false; if (keyCode == arrowRight) { player.moveRight = false; soundThrust.pause(); } } else if (keyCode == arrowUp) { player.moveUp = false; } else if (keyCode == arrowDown) { player.moveDown = false; } else if (keyCode == arrowLeft) { player.moveLeft = false; } }); //start the animation loop animate(); }; //initialize the game environment function init() { uiStats.hide(); uiComplete.hide(); uiPlay.click(function(e) { e.preventDefault(); uiIntro.hide(); startGame(); }); uiReset.click(function(e) { e.preventDefault(); uiComplete.hide(); $(window).unbind("keyup"); $(window).unbind("keydown"); soundThrust.pause(); soundBackground.pause(); clearTimeout(scoreTimeout); startGame(); }); }; function timer() { if (playGame) { scoreTimeout = setTimeout(function() { uiScore.html(++score); if (score % 5 == 0) { numAsteroids += 5; } timer(); }, 1000); }; }; //Animation loop that does all the fun stuff function animate() { //Clear context.clearRect(0, 0, canvasWidth, canvasHeight); var asteroidsLength = asteroids.length; for (var i = 0; i < asteroidsLength; i++) { var tmpAsteroid = asteroids[i]; tmpAsteroid.x += tmpAsteroid.vX; if (tmpAsteroid.x + tmpAsteroid.radius < 0) { //creates bounderies to prevent player from leaving the canvas tmpAsteroid.radius = 5 + (Math.random() * 10); tmpAsteroid.x = canvasWidth + tmpAsteroid.radius; tmpAsteroid.y = Math.floor(Math.random() * canvasHeight); tmpAsteroid.vX = -5 - (Math.random() * 5); } var dX = player.x - tmpAsteroid.x; var dY = player.y - tmpAsteroid.y; var distance = Math.sqrt((dX * dX) + (dY * dY)); if (distance < player.halfWidth + tmpAsteroid.radius) { //checks for collision soundThrust.pause() soundDeath.currentTime = 0; soundDeath.play(); //Game over playGame = false; clearTimeout(scoreTimeout); uiStats.hide(); uiComplete.show(); soundBackground.pause(); $(window).unbind("keyup"); //unbinds keys to stop player movement at the end of the game $(window).unbind("keydown"); }; context.fillStyle = "rgb(255, 255, 255)"; context.beginPath(); context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI * 2, true); context.fill(); }; player.vX = 0; player.vY = 0; if (player.moveRight) { player.vX = 3; }; if (player.moveLeft) { player.vX = -3; }; if (player.moveUp) { player.vY = -3; }; if (player.moveDown) { player.vY = 3; }; player.x += player.vX; player.y += player.vY; if (player.x - player.halfWidth < 20) { player.x = 20 + player.halfWidth; } else if (player.x + player.halfWidth > canvasWidth - 20) { player.x = canvasWidth - 20 - player.halfWidth; } if (player.y - player.halfHeight < 20) { player.y = 20 + player.halfHeight; } else if (player.y + player.halfHeight > canvasHeight - 20) { player.y = canvasHeight - 20 - player.halfHeight; } if (player.moveRight) { context.save(); context.translate(player.x - player.halfWidth, player.y); if (player.flameLength1 == 20) { player.flameLength1 = 15; (player.flameLength2 == 20) player.flameLength2 = 15; } else { player.flameLength1 = 20; player.flameLength2 = 20; }; context.fillStyle = "orange"; context.beginPath(); context.moveTo(0, -12); context.lineTo(-player.flameLength1, -7); context.lineTo(0, -5); context.closePath(); context.fill(); context.fillStyle = "orange"; context.beginPath(); context.moveTo(0, 12); context.lineTo(-player.flameLength2, 7); context.lineTo(0, 5); context.closePath(); context.fill(); context.restore(); }; //draw ship context.fillStyle = "rgb(255, 0, 0)"; context.beginPath(); context.moveTo(player.x + player.halfWidth, player.y); context.lineTo(player.x - player.halfWidth, player.y - player.halfHeight); context.lineTo(player.x - player.halfWidth, player.y + player.halfHeight); context.closePath(); context.fill(); while (asteroids.length < numAsteroids) { //adds asteroids as the difficulty increases var radius = 5 + (Math.random() * 10) var x = Math.floor(Math.random() * canvasWidth) + canvasWidth + radius; var y = Math.floor(Math.random() * canvasHeight); var vX = -5 - (Math.random() * 5); asteroids.push(new Asteroid(x, y, radius, vX)); } if (playGame) { //run the animation loop again in 33 milliseconds setTimeout(animate, 24); }; }; init(); }); 

 * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } body { background: #000; color: #fff; font-family: Verdana, Arial, sans-serif; font-size: 18px; } h1 { font-size: 30px; } h6 { font-size: 15px; } p { margin: 0 20px; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } a.button { background: #185da8; border-radius: 5px; display: block; font-size: 30px; margin: 40px 0 0 350px; padding: 10px; width: 200px; text-align: center; } a.button:hover { background: #2488f5; color: #fff; text-decoration: none; } #game { height: 600px; left: 50%; margin: -250px 0 0 -500px; position: relative; top: 50%; width: 980px; } #gameCanvas { background: #001022; border: 5px solid green; background-image: url(../images/space.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; } #gameUI { height: 600px; position: absolute; width: 980px; } #gameIntro, #gameComplete { background: rgba(0, 0, 0, 0.5); margin: 100px 0 0 10px; padding: 40px 0; text-align: center; } #gameStats { font-size: 14px; margin: 20px 0; } #gameStats .gameReset { margin: 20px 20px 0 0; position: absolute; right: 0; top: 0; } 

 <body> <div id="game"> <div id="gameUI"> <div id="gameIntro"> <h1>Debris Fields of Spiral Galaxy</h1> <h6>A <i>Galaxy Smuggler's Run</i> Game</h6> <hr> <p>You are Captain Amadaeus delivering goods to a dependent planet on the other side of a debris field</p> <p>Click <i>"Play"</i> and then press any key to start.</p> <p><a id="gamePlay" class="button" href="">Play!</a> </p> </div> <div id="gameStats"> <p><b>Time: </b><span class="gameScore"></span> seconds</p> <p><a class="gameReset" href="">Reset</a> </p> </div> <div id="gameComplete"> <h1>Game Over!</h1> <p>You survived for <span class="gameScore"></span> seconds.</p> <p>Would you like to give it another go?</p> <p><a class="gameReset button" href="">Play Again?</a> </p> </div> </div> <canvas id="gameCanvas" width="980" height="600"> </canvas> <audio id="gameSoundBackground" loop> <source src="sounds/background.ogg"> <source src="sounds/background.mp3"> </audio> <audio id="gameSoundThrust" loop> <source src="sounds/thrust.ogg"> <source src="sounds/thrust.mp3"> </audio> <audio id="gameSoundDeath"> <source src="sounds/death.ogg"> <source src="sounds/death.mp3"> </audio> </div> </body> 

這是我教授繪制圖像的代碼：( http://jsbin.com/rapayufafe/1/ ）

 // JS file for the ship function Ship() { this.x = 100; this.y = 100; this.color = "yellow"; this.fillStyle = "white"; this.vx = 0; this.vy = 0; this.ax = 1; this.ay = 1; //function "move" that will add velocity to the position of the ship this.move = function() { this.x += this.vx; this.y += this.vy; }//end move function //draw the ship this.draw=function () { //ship var var imageObj = new Image(); imageObj.src = "images/ship.png"; //save the current state of the canvas context.save(); //moving the point of origin (0,0) to the ships x and y coordinates context.translate(this.x,this.y); context.lineStyle = this.color; context.fillStyle = this.fillStyle; /*context.beginPath(); context.moveTo(25,0); context.lineTo(-25,25) context.lineTo(-25,-25)*/ //draw ship context.drawImage(imageObj,-25,-25,50,50); context.closePath(); context.stroke(); context.fill(); context.restore(); }//end of draw ship }//end ship function /*var asteroidsLength = asteroids.length; for (var i = 0; i < asteroidsLength; i++) { var tmpAsteroid = asteroids[i]; context.fillStyle = "gray"; context.beginPath(); context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI*2, true); context.closePath(); context.fill(); };*/ 

Answer 1

如您在起始代碼中所看到的，您將看到以下部分：

   //draw ship
    context.fillStyle = "rgb(255, 0, 0)";
    context.beginPath();
    context.moveTo(player.x + player.halfWidth, player.y);
    context.lineTo(player.x - player.halfWidth, player.y - player.halfHeight);
    context.lineTo(player.x - player.halfWidth, player.y + player.halfHeight);
    context.closePath();
    context.fill();

只需將該代碼替換為用於繪制圖像的代碼即可。

var imageObj = new Image();
imageObj.src = "images/ship.png";
context.drawImage(imageObj,player.x,player.y);

雖然，我還是建議聲明imageObj並將源設置在代碼的頂部，在其中聲明其余變量，以免每次繪制船時都不會加載圖像。