今天晚上稍微试着把攻击做出来了，也就是说按 '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;elsereturn 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>
