如何使用箭头键旋转/变换图像

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

1. 您可以使用画布rotate() method。这会使事情变得更复杂，但它实际上会旋转画布，并且可以提供更多的实验机会。

它实际上在画布绘制之前将转换矩阵应用于画布，因此您可以执行以下操作：

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

请小心，因为旋转总是围绕原点发生，因此您可能还需要使用 translate() 以使其按预期方式工作。

希望这会有所帮助！ :)