20251105

今天晚上稍微试着把攻击做出来了，也就是说按 'z' 可以攻击了，具体的攻击模块和怪物机制等到明天再做吧，完善以后的代码如下： 
<!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="Canvas" style="border:1px solid #000000;"></canvas>
</body>
<script>
  //初始化画布
  const canvas = document.getElementById('Canvas');
  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;
    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,
      toward: 'right',
      attacking: false,
    }

    damage = {
      at: 1,
      width: 80,
      height: 40,
    }
    //攻击方法
    attack(monster) {

    }
    //跳跃方法
    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;
    }
  }
  //定义怪物类
  class Monster {
    hp = 5;
    at = 1;
    x = 0;
    y = 0;
    width = 20;
    height = 20;
    color = '#00FF00';
  }

  //创建玩家与地面对象
  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;
        p.status.toward = 'left';
        break;
      case 'ArrowRight':
        p.status.right = true;
        p.status.toward = 'right';
        break;
      case 'z' || 'Z':
        p.status.attacking = 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);

    //绘制攻击范围
    if (p.status.attacking) {
      ctx.fillStyle = '#FFFF00';
      if (p.status.toward == 'right') {
        ctx.fillRect(p.x + p.width, p.y + (p.height - p.damage.height) / 2, p.damage.width, p.damage.height);
      }else if(p.status.toward == 'left'){
        ctx.fillRect(p.x - p.damage.width, p.y + (p.height - p.damage.height) / 2, p.damage.width, p.damage.height);
      }

      p.status.attacking = false;
    }

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

</html>

 

posted @ 2025-11-05 19:51  Lee_sz  阅读(5)  评论(0)    收藏  举报