时间戳

首页 > 解决方案 > Javascript通过按键旋转播放器

javascript - Javascript通过按键旋转播放器

问题描述

我正在制作一个简单的Canvas 太空射击游戏JS。我认为通过按或键HTML来旋转播放器（矩形）会很酷。EQ

没什么难的吧？

所以我将画布和播放器作为具有其功能的对象。它的功能之一是旋转（方向），现在它应该旋转 45 度，但它没有。

无论如何这里是代码：

（谢谢帮助）

const canvas = document.createElement("canvas");
let body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
canvas.style.backgroundColor = "black";
canvas.innerHTML = "your browser does not support HTML5! Please upgrade";
window.addEventListener("resize", () => {
  canvas.width = innerWidth;
  canvas.height = innerHeight;
});

let qPressed = false,ePressed = false;

const player = {
    x:canvas.width/2-25,
    y:canvas.height/2-25,
    w:50,
    h:50,
    score:0,
    hp : 100,
    create : function(){
        ctx.fillStyle = "pink";
        ctx.fillRect(this.x,this.y,this.w,this.h);
    },
    holdInScreen : function(){
        if (this.x < 0) {
            this.x = canvas.width;
          } else if (this.x - 50 > canvas.width) {
            this.x = 0;
          } else if (this.y < 0) {
            this.y = canvas.height;
          } else if (this.y > canvas.height) {
            this.y = 0;
          }
    },
    rotate : function(direction){
        if(direction == "left"){
            ctx.save(); 
            ctx.translate(this.x + this.w, this.y); 
            ctx.rotate(Math.PI / 4); 
            ctx.restore(); 
        }else{

        }
    },
    keyHandler : function(){
          if(ePressed){
            this.rotate("right");
          }else if(qPressed){
            this.rotate("left");
          }
    },
    giveScore : function(){
        return this.score;
    },
    getHit : function(){
        if(this.hp <= 0){
            console.log("game over!");
        }else{
            this.hp -= 25;
        }
    },
    update:function(){
        this.holdInScreen();
        this.keyHandler();

    }
}

const update = function(){

    player.update();

}
const render = function(){

    player.create();
}
let id;
const Loop = function(){
    id = requestAnimationFrame(Loop);
    update();
    ctx.clearRect(0,0,canvas.width,canvas.height);
    render();
}
Loop()
window.addEventListener("keydown", (e) => {
  if(e.keyCode == 69) ePressed = true;
  if(e.keyCode == 81) qPressed = true;
})
window.addEventListener("keyup", (e) => {
  if(e.keyCode == 69) ePressed = true;
  if(e.keyCode == 81) qPressed = true;
})

标签： javascriptcanvas

解决方案

create: function () {
    ctx.fillStyle = "pink";
    ctx.fillRect(this.x, this.y, this.w, this.h);
},

rotate: function (direction) {
    if (direction == "left") {
        ctx.save();
        ctx.translate(this.x + this.w, this.y);
        ctx.rotate(Math.PI / 4);
        ctx.restore();
    } else {

    }
},

您需要旋转画布然后绘制播放器。你目前在

  • 旋转画布并重置上下文
  • 绘制玩家

什么时候真的应该

  • 将画布翻译到您希望对象所在的位置
  • 旋转画布
  • 画出玩家

稍微编辑了您的代码并删除了 keyup 侦听器。

const canvas = document.createElement("canvas");
let body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
canvas.style.backgroundColor = "black";
canvas.innerHTML = "your browser does not support HTML5! Please upgrade";
window.addEventListener("resize", () => {
  canvas.width = innerWidth;
  canvas.height = innerHeight;
});

const player = {
  x: canvas.width / 2 - 25,
  y: canvas.height / 2 - 25,
  w: 50,
  h: 50,
  score: 0,
  hp: 100,
  rotation: 0,
  
  // Originally our create() function changed the name
  drawPlayer: function () {
    ctx.fillStyle = "pink";
    ctx.save();

    // Translate to center
    ctx.translate(this.x + this.w/2, this.y + this.h/2);

    // Rotate canvas based on rotation value
    ctx.rotate(this.rotation * Math.PI / 180);

    // Draw square
    ctx.fillRect(-this.w/2, -this.h/2, this.w, this.h);

    ctx.restore();
  },

  // Pressing 'q' or 'e' would result in updating the rotation
  rotate: function (direction) {
    if (direction === 'left') {
      console.log('left');
      this.rotation -= 45;
    } else if (direction === 'right') {
      console.log('right');
      this.rotation += 45;
    }
  },
}

let id;

const Loop = function () {
  id = requestAnimationFrame(Loop);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  player.drawPlayer();
}

Loop()

// Updated to call player rotate without the need to check for flags
document.addEventListener("keydown", (e) => {
  console.log(e.keyCode);
  switch (e.keyCode) {
    case 69:
      console.log('key right');
      player.rotate("right");
      break;
    case 81:
      console.log('key left');
      player.rotate("left");
      break;
    default:
      // Do nothing for other keys
      break;
  }
})

推荐阅读