如何使用箭頭鍵旋轉/變換圖像

Question

我是畫布的新手，我正在嘗試制作太空船型游戲。 除了船轉動之外，我還有其他一切我想要的東西。 我想在點擊箭頭鍵時使船的圖像旋轉。

因此，如果單擊左箭頭鍵，它將轉向面向左側，單擊右箭頭鍵將轉向面向右側，依此類推。 我真的無法弄清楚這一點，如果有人能告訴我如何做到這一點，我會非常感激。

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); /*Variable to store score*/ var score = 0; /*Variable that stores the players object properties*/ var x = 50; var y = 100; var speed = 6; var sideLength = 50; /*Flags to track when keypress is active*/ var down = false; var up = false; var left = false; var right = false; /*Variables that store target position and size*/ var targetX = 0; var targetY = 0; var targetLength = 25; /*If a number is within range b to c*/ function isWithin(a, b, c) { return (a > b && a < c) } var countDown = 30; /*Id to track set time*/ var id = null; /*Listening for if one of the keys is pressed*/ canvas.addEventListener('keydown', function (event) { event.preventDefault(); console.log(event.key, event.keyCode); if (event.keyCode === 40) { down = true; } if (event.keyCode === 38) { up = true; } if (event.keyCode === 37) { left = true; } if (event.keyCode === 39) { right = true; } }); /*Listening for if one of the keys is released*/ canvas.addEventListener('keyup', function (event) { event.preventDefault(); console.log(event.key, event.keyCode); if (event.keyCode === 40) { down = false; } if (event.keyCode === 38) { up = false; } if (event.keyCode === 37) { left = false; } if (event.keyCode === 39) { right = false; } }); /*Function to show menu*/ function menu() { erase(); context.fillStyle = '#000000'; context.font = '36px Arial'; context.textAlign = 'center'; context.fillText('Collect The Thing', canvas.width / 2, canvas.height / 4); context.font = '30px Arial'; context.fillText('Press to Start', canvas.width / 2, canvas.height / 2); /*Listen for click to start game*/ canvas.addEventListener('click', startGame); } /*Function to start the game*/ function startGame() { /*reduce the countdown timer every 1 second*/ id = setInterval(function () { countDown--; }, 1000) /*remove click events*/ canvas.removeEventListener('click', startGame); moveTarget(); draw(); } /*Show game over screen*/ function endGame() { /*stop the countdown*/ clearInterval(id); /*clear game board*/ erase(); context.fillStyle = '#000000'; context.font = '36px Arial'; context.textAlign = 'center'; context.fillText('Finale Score: ' + score, canvas.width / 2, canvas.height / 4); } /*Move target to random location in canvas*/ function moveTarget() { targetX = Math.round(Math.random() * canvas.width - targetLength); targetY = Math.round(Math.random() * canvas.height - targetLength); } /*Clear the Canvas*/ function erase() { context.fillStyle = '#FFFFFF'; context.fillRect(0, 0, 600, 500); } /*Main animation drawing loop with game logic*/ function draw() { erase(); /*Move the player sqaure*/ if (down) { y += speed; } if (up) { y -= speed; } if (right) { x += speed; } if (left) { x -= speed; } if (y + sideLength > canvas.height) { y = canvas.height - sideLength; } if (y < 0) { y = 0; } if (x < 0) { x = 0; } if (x + sideLength > canvas.width) { x = canvas.width - sideLength; } /*Collide with target*/ if (isWithin(targetX, x, x + sideLength) || isWithin(targetX + targetLength, x, x + sideLength)) { if (isWithin(targetY, y, y + sideLength) || isWithin(targetY + targetLength, y, y + sideLength)) { /*respawn target in a random location*/ moveTarget(); /*Increase score by 1*/ score++; } } //Draw player object context.fillRect(x, y, sideLength, sideLength); context.drawImage(baseImage, x, y, sideLength, sideLength); /*Draw target sqaure*/ context.fillStyle = '#00FF00'; context.fillRect(targetX, targetY, targetLength, targetLength); //Timer and Score context.fillStyle = '#000000'; context.font = '24px Arial'; context.textAlign = 'left'; context.fillText('Score: ' + score, 10, 24); context.fillText('Time Remaining: ' + countDown, 10, 50); if (countDown <= 0) { endGame(); } else { window.requestAnimationFrame(draw); } } baseImage= new Image(); baseImage.src='xwing3.png'; baseImage.onload= function() { menu(); } canvas.focus(); 

Answer 1

我認為在這方面你有兩種選擇。

1. 你可以為你想讓船面對的每個方向都有一個精靈，然后當你繪制圖像時，你可以選擇匹配的精靈。

if(left == true) {baseImage.src='xwing3left.png';}

2. 您可以使用canvas rotate（）方法 。 這會使事情變得更復雜，但它實際上會旋轉畫布並且可以提供更多實驗機會。

它實際上在繪制之前將一個轉換矩陣應用於畫布，因此您可以執行以下操作：

context.rotate(45);
context.fillRect(x,y,width,height);

請注意，因為旋轉始終發生在原點周圍，因此您可能需要使用translate（）使其按預期方式工作。

希望這可以幫助！ :)