Как повернуть / преобразовать изображение с помощью клавиш со стрелками

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

Вы можете использовать метод canvas rotate () .Это усложнит ситуацию, но на самом деле он вращает холст и может дать больше возможностей для экспериментов.

Он фактически применяет матрицу преобразования к холсту перед его рисованием, чтобы вы могли делать такие вещи, как:

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

Только будьте осторожны, потому что вращение всегда происходит вокруг начала координат, поэтому вам может понадобиться использовать translate (), чтобы заставить его работать так, как вы ожидаете.

Надеюсь, это поможет!:)