20251104

昨天晚上重寫了方塊的移動邏輯，今天晚上淺淺優化了一些東西，優化后的代碼如下：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    margin: 0;
    overflow: hidden;
  }
</style>

<body>
  <canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
</body>
<script>
  //初始化畫布
  const canvas = document.getElementById('myCanvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  canvas.style.backgroundColor = '#000000';
  const ctx = canvas.getContext('2d');
  //定義游戲對象數組
  const grounds = [];
  const monsters = [];
  //定義玩家類
  class player {
    hp = 10;
    at = 1;
    x = Math.round(canvas.width / 2);
    y = Math.round(canvas.height / 2);
    width = 20;
    height = 20;
    color = '#FF0000';
    speedX = 0;
    speedY = 0;
    a = 0.05;
    g = 0.1;
    maxSpeedX = 3;
    maxSpeedY = 3;
    status = {
      up: false,
      down: false,
      left: false,
      right: false,
      landing: false,
    }
    //跳躍方法
    jump() {
      this.speedY = -5;
      this.status.landing = false;
    }
    //碰撞檢測方法
    crush(ground) {
      if (ground.y - (this.y + this.height) <= 0 && ground.y - (this.y + this.height) >= -this.speedY)
        return true;
      else
        return false;
    }
  }
  //定義地面類
  class ground {
    x = 0;
    y = 0;
    width = 0;
    height = 0;
    color = '#654321';
    constructor(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    }
  }

  //創建玩家與地面對象
  const p = new player();
  const ground1 = new ground(0, Math.round(canvas.height - 100), Math.round(canvas.width), 100);
  grounds.push(ground1);

  //鍵盤事件監聽

  //1.按下按鍵
  document.addEventListener('keydown', function (event) {
    switch (event.key) {
      case 'ArrowUp':
        if (p.status.landing == true)
          p.jump();
        break;
      case 'ArrowDown':
        p.status.down = true;
        break;
      case 'ArrowLeft':
        p.status.left = true;
        break;
      case 'ArrowRight':
        p.status.right = true;
        break;
    }
  });
  //2.松開按鍵
  document.addEventListener('keyup', function (event) {
    switch (event.key) {
      case 'ArrowUp':
        break;
      case 'ArrowDown':
        p.status.down = false;
        break;
      case 'ArrowLeft':
        p.status.left = false;
        break;
      case 'ArrowRight':
        p.status.right = false;
        break;
    }
  });
  //3.c鍵查看玩家狀態
  document.addEventListener('keydown', function (event) {
    if (event.key === 'c' || event.key === 'C') {
      console.log("玩家狀態：", p);
    }

  });
  //動畫循環
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    //玩家運動
    p.x += p.speedX;
    p.y += p.speedY;

    //繪制陸地與碰撞監測
    grounds.forEach(ground => {
      //繪制陸地
      ctx.fillStyle = ground.color;
      ctx.fillRect(ground.x, ground.y, ground.width, ground.height);
      //碰撞監測
      if (p.crush(ground)) {
        p.y = ground.y - p.height;
        p.status.landing = true;
      }
    });

    //重力作用
    if (p.status.landing == false) {
      p.speedY += p.g;
      if (p.speedY > p.maxSpeedY)
        p.speedY = p.maxSpeedY;
    } else {
      p.speedY = 0;
    }

    //水平無操作時水平減速
    if ((p.status.left == false && p.status.right == false) || (p.status.left == true && p.status.right == true)) {
      if (p.speedX > 0) {
        p.speedX -= p.a;
        if (p.speedX < 0) p.speedX = 0;
      } else if (p.speedX < 0) {
        p.speedX += p.a;
        if (p.speedX > 0) p.speedX = 0;
      }

    }
    //水平加速度操作速度
    if (p.status.left) {
      p.speedX -= p.a;
      if (p.speedX < -p.maxSpeedX) p.speedX = -p.maxSpeedX;
    }
    if (p.status.right) {
      p.speedX += p.a;
      if (p.speedX > p.maxSpeedX) p.speedX = p.maxSpeedX;
    }

    //繪制玩家
    ctx.fillStyle = p.color;
    ctx.fillRect(p.x, p.y, p.width, p.height);

    requestAnimationFrame(animate);
  }
  animate();
</script>

</html>
posted @ 2025-11-04 22:08 世z 閱讀(5) 評論(0) 收藏舉報
刷新頁面返回頂部
Leesz

20251104

公告
