javascript 旋转矩形< canvas>

sr4lhrrt 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(154)

我正在做一个几何短跑游戏。我现在尝试旋转我不断绘制的矩形。我需要让它在基本跳跃时能跳180度。我所尝试的一切只是打破了一切，画布是5倍小。我该怎么做？
下面的代码来自不同的文件，顺序可能不对

//player class

class Player {
  constructor() {
    this.position = {
      x: 280,
      y: 100,
    }

    this.velocity = {
      x: 0,
      y: 0,
    }

    this.width = 50
    this.height = 50
    this.sides = {
      bottom: this.position.y + this.height,
      left: this.position.x,
      right: this.position.x + this.width,
      top: this.position.y,
    }
    this.gravity = 1
  }

  draw() {
    c.fillStyle = 'red'
    c.fillRect(this.position.x, this.position.y, this.width, this.height)
  }

  update() {
    this.position.x += this.velocity.x
    this.position.y += this.velocity.y
    this.sides.bottom = this.position.y + this.height
    if (this.sides.bottom + this.velocity.y < canvas.height - this.height) {
      this.velocity.y += 1

    } else this.velocity.y = 0
  }
}

//index file

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

canvas.width = 1024
canvas.height = 576

const background = {
  position: {
    x: 0,
    y: 0,
  }
}


const player = new Player()

const keys = {
  w: {
    pressed: false,
  },
}

function animate() {
  window.requestAnimationFrame(animate)
  c.clearRect(background.position.x, background.position.y, canvas.width, canvas.height)

  player.velocity.x = 0
  player.draw()
  player.update()
}

animate()

//events file

window.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'w':
      if (player.velocity.y === 0 || jumps > 0) {
        player.velocity.y = -17.5;
        rotate = true;
        angle += Math.PI; // 180 degrees
      }
  }
});

function update() {
  player.velocity.y += gravityAcceleration;

  player.position.x += player.velocity.x;
  player.position.y += player.velocity.y;

  if (player.position.y >= canvas.height - player.height) {
    player.position.y = canvas.height - player.height;
    player.velocity.y = 0;
  }

}

body {
  background: black;
}

canvas {
  background-color: white;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">

<head></head>

<body>
  <canvas></canvas>
</body>

<script src="js/classes/Player.js"></script>
<script src="js/classes/events.js"></script>
<script src="index.js"></script>

</html>

JavaScript

来源：https://stackoverflow.com/questions/76396184/rotate-a-rectangle-in-canvas

1条答案

按热度按时间

q9yhzks01#

//#region Classes
class Player {
    position = { x: 280, y: 100 };
    velocity = { x: 0, y: 0 };
    height = 50;
    width = 50;
    sides = {
        bottom: this.position.y + this.height,
        left: this.position.x,
        right: this.position.x + this.width,
        top: this.position.y,
    };
    gravity = 1;
    rotation = 0;
    jumping = false;

    draw() {
        c.save();
        c.translate(this.position.x, this.position.y);
        c.fillStyle = "red";
        c.rotate(this.rotation);
        c.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
        c.restore();
    }

    update() {
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;
        this.sides.bottom = this.position.y + this.height;
        if (this.sides.bottom + this.velocity.y < canvas.height - this.height) {
            this.velocity.y += this.gravity;
        } else this.velocity.y = 0;
        if (this.jumping) {
            this.rotation += (Math.PI / 180) * this.gravity * 4;
            if (this.rotation > (Math.PI / 180) * 180) {
                this.jumping = false;
            }
        } else {
            this.rotation = 0;
        }
    }
}
//#endregion

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
const background = {
    position: {
        x: 0,
        y: 0,
    },
};
const keys = {
    w: {
        pressed: false,
    },
};
const player = new Player();

canvas.width = 1024;
canvas.height = 576;

function update() {}

function animate() {
    window.requestAnimationFrame(animate);
    c.clearRect(background.position.x, background.position.y, canvas.width, canvas.height);

    player.velocity.x = 0;
    player.draw();
    player.update();
    update();
}

window.addEventListener("keydown", (event) => {
    switch (event.key) {
        case "w":
            if (player.velocity.y === 0) {
                player.velocity.y = -17.5;
                player.jumping = true;
            }
    }
});

animate();

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="style.css" />

    <head></head>

    <body>
        <canvas></canvas>
    </body>
    <script src="index.js"></script>
</html>

每次按下w键，player.jumping将被设置为true。在update()函数中，它检查player.jumping是否为true，并递增player.rotation。draw()函数将绘制按player.rotation的值旋转的播放器。旋转代码来自Rotate square on its axis in HTML5 Canvas?。
希望这对你有帮助：）

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 旋转矩形< canvas>

1条答案

相关问题

热门标签

最新问答