20251107

news/2025/11/7 21:25:31/文章来源:https://www.cnblogs.com/Leesz/p/19200923

每次写类的时候都会觉得发明面向对象的人真是个天才。今天晚上又稍微写了点，增加了碰撞伤害，现在玩家碰到怪物会回扣怪物.at血量并进入一秒的无敌状态，并且自身颜色变为白色，也是第一次体会到异步的方便之处吧。更新后代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <title>Document</title>
  8 </head>
  9 <style>
 10   body {
 11     margin: 0;
 12     overflow: hidden;
 13   }
 14 </style>
 15 
 16 <body>
 17   <canvas id="Canvas" style="border:1px solid #000000;"></canvas>
 18 </body>
 19 <script>
 20   //初始化画布
 21   const canvas = document.getElementById('Canvas');
 22   canvas.width = window.innerWidth;
 23   canvas.height = window.innerHeight;
 24   canvas.style.backgroundColor = '#000000';
 25   const ctx = canvas.getContext('2d');
 26   //定义游戏对象数组
 27   const grounds = [];
 28   const monsters = [];
 29   //定义玩家类
 30   class Player {
 31     //基础属性
 32     hp = 10;
 33     x = Math.round(canvas.width / 2);
 34     y = Math.round(canvas.height / 2);
 35     width = 30;
 36     height = 30;
 37     color = '#FF0000';
 38     invincibleColor = 'white';
 39     speedX = 0;
 40     speedY = 0;
 41     a = 0.05;
 42     g = 0.1;
 43     maxSpeedX = 3;
 44     maxSpeedY = 3;
 45 
 46     lastAttackedTime = Date.now();
 47 
 48     status = {
 49       up: false,
 50       down: false,
 51       left: false,
 52       right: false,
 53 
 54       landing: false,
 55       toward: 'right',
 56       attacking: false,
 57       invincible: false,
 58     }
 59 
 60     damage = {
 61       at: 1,
 62       width: 80,
 63       height: 40,
 64     }
 65 
 66     //方法
 67 
 68     //跳跃方法
 69     jump() {
 70       this.speedY = -5;
 71       this.status.landing = false;
 72     }
 73     //碰撞检测方法
 74     crush(ground) {
 75       if (ground.y - (this.y + this.height) <= 0 && ground.y - (this.y + this.height) >= -this.speedY)
 76         return true;
 77       else
 78         return false;
 79     }
 80     //玩家运动
 81     move() {
 82       this.x += this.speedX;
 83       this.y += this.speedY;
 84     }
 85     //碰撞监测
 86     checkCrash() {
 87       grounds.forEach(Ground => {
 88         if (this.crush(Ground)) {
 89           this.y = Ground.y - this.height;
 90           this.status.landing = true;
 91         }
 92       });
 93     }
 94     //重力作用
 95     applyGravity() {
 96       if (this.status.landing == false) {
 97         this.speedY += this.g;
 98         if (this.speedY > this.maxSpeedY)
 99           this.speedY = this.maxSpeedY;
100       } else {
101         this.speedY = 0;
102       }
103     }
104     //水平无操作时水平减速
105     velocityDecay() {
106       if ((this.status.left == false && this.status.right == false) || (this.status.left == true && this.status.right == true)) {
107         if (this.speedX > 0) {
108           this.speedX -= this.a;
109           if (this.speedX < 0) this.speedX = 0;
110         } else if (this.speedX < 0) {
111           this.speedX += this.a;
112           if (this.speedX > 0) this.speedX = 0;
113         }
114       }
115     }
116     //水平加速度操作速度
117     controlSpeed() {
118       if (this.status.left) {
119         this.speedX -= this.a;
120         if (this.speedX < -this.maxSpeedX) this.speedX = -this.maxSpeedX;
121       }
122       if (this.status.right) {
123         this.speedX += this.a;
124         if (this.speedX > this.maxSpeedX) this.speedX = this.maxSpeedX;
125       }
126     }
127     //绘制玩家
128     draw() {
129       if (this.status.invincible)
130         ctx.fillStyle = this.invincibleColor;
131       else
132         ctx.fillStyle = this.color;
133       ctx.fillRect(this.x, this.y, this.width, this.height);
134     }
135     //展示血量数字
136     showHp() {
137       ctx.fillStyle = 'white';
138       ctx.font = '12px Arial';
139       ctx.fillText(this.hp, this.x + this.width / 2 - 6, this.y - 2);
140     }
141     //攻击方法
142     attack(m) {
143       m.hp -= this.damage.at;
144       console.log("攻击命中！怪物剩余血量：" + m.hp);
145       if (m.hp <= 0) {
146         const index = monsters.indexOf(m);
147         if (index > -1) {
148           monsters.splice(index, 1);
149           console.log("怪物已被击败！");
150         }
151       }
152     }
153     //绘制攻击范围与攻击判定
154     drawAttackRange() {
155       //绘制范围
156       if (this.status.attacking) {
157         ctx.fillStyle = '#FFFF00';
158         if (this.status.toward == 'right') {
159           ctx.fillRect(this.x + this.width, this.y + (this.height - this.damage.height) / 2, this.damage.width, this.damage.height);
160         } else if (this.status.toward == 'left') {
161           ctx.fillRect(this.x - this.damage.width, this.y + (this.height - this.damage.height) / 2, this.damage.width, this.damage.height);
162         }
163         //攻击判定
164         monsters.forEach(m => {
165           if (this.status.toward == 'right' &&
166             m.x < this.x + this.width + this.damage.width &&
167             m.x + m.width > this.x + this.width &&
168             m.y < this.y + (this.height + this.damage.height) / 2 &&
169             m.y + m.height > this.y + (this.height - this.damage.height) / 2
170           ) {
171             this.attack(m);
172           }
173           else if (
174             this.status.toward == 'left' &&
175             m.x + m.width > this.x - this.damage.width &&
176             m.x < this.x &&
177             m.y < this.y + (this.height + this.damage.height) / 2 &&
178             m.y + m.height > this.y + (this.height - this.damage.height) / 2
179           ) {
180             this.attack(m);
181           }
182         })
183         this.status.attacking = false;
184       }
185     }
186     //受击方法
187     attacked() {
188       monsters.forEach(m => {
189         if (
190           m.x < this.x + this.width &&
191           m.x + m.width > this.x &&
192           m.y < this.y + this.height &&
193           m.y + m.height > this.y
194         ) {
195           this.reduceHp(m.at);
196         }
197       });
198     }
199     //常规血量减少
200     reduceHp(at) {
201       const currentTime = Date.now();
202       if (currentTime - this.lastAttackedTime > 1000) {
203         this.hp -= at;
204         this.status.invincible = true;
205         this.lastAttackedTime = currentTime;
206         //异步延迟
207         setTimeout(() => {
208           this.status.invincible = false;
209         }, 1000);
210       }
211     }
212   }
213   //定义地面类
214   class Ground {
215     x = 0;
216     y = 0;
217     width = 0;
218     height = 0;
219     color = '#654321';
220 
221     constructor(x, y, width, height) {
222       this.x = x;
223       this.y = y;
224       this.width = width;
225       this.height = height;
226     }
227   }
228   //定义怪物类
229   class Monster {
230     hp = 5;
231     at = 1;
232     x = 0;
233     y = 0;
234     width = 30;
235     height = 30;
236     color = '#00FF00';
237 
238     constructor(x, y, width, height) {
239       this.x = x;
240       this.y = y;
241       this.width = width;
242       this.height = height;
243     }
244     //绘制怪物
245     draw() {
246       ctx.fillStyle = this.color;
247       ctx.fillRect(this.x, this.y, this.width, this.height);
248     }
249     //展示血量数字
250     showHp() {
251       ctx.fillStyle = 'white';
252       ctx.font = '12px Arial';
253       ctx.fillText(this.hp, this.x + this.width / 2 - 6, this.y - 2);
254     }
255   }
256 
257   //创建初始测试 玩家对象 地面对象 怪物对象
258   const p = new Player();
259   const ground1 = new Ground(0, Math.round(canvas.height - 100), Math.round(canvas.width), 100);
260   grounds.push(ground1);
261   const monster1 = new Monster(200, ground1.y - 30, 30, 30);
262   monsters.push(monster1);
263 
264   //键盘事件监听
265 
266   //1.按下按键
267   document.addEventListener('keydown', function (event) {
268     switch (event.key) {
269       case 'ArrowUp':
270         if (p.status.landing == true)
271           p.jump();
272         break;
273       case 'ArrowDown':
274         p.status.down = true;
275         break;
276       case 'ArrowLeft':
277         p.status.left = true;
278         p.status.toward = 'left';
279         break;
280       case 'ArrowRight':
281         p.status.right = true;
282         p.status.toward = 'right';
283         break;
284       case 'z':
285         p.status.attacking = true;
286         break;
287       case 'Z':
288         p.status.attacking = true;
289         break;
290     }
291   });
292   //2.松开按键
293   document.addEventListener('keyup', function (event) {
294     switch (event.key) {
295       case 'ArrowUp':
296         break;
297       case 'ArrowDown':
298         p.status.down = false;
299         break;
300       case 'ArrowLeft':
301         p.status.left = false;
302         break;
303       case 'ArrowRight':
304         p.status.right = false;
305         break;
306     }
307   });
308   //3.c键查看玩家状态
309   document.addEventListener('keydown', function (event) {
310     if (event.key === 'c' || event.key === 'C') {
311       console.log("玩家状态：", p);
312     }
313 
314   });
315   //动画循环
316   function animate() {
317     ctx.clearRect(0, 0, canvas.width, canvas.height);
318 
319     //绘制陆地
320     grounds.forEach(Ground => {
321       ctx.fillStyle = Ground.color;
322       ctx.fillRect(Ground.x, Ground.y, Ground.width, Ground.height);
323     });
324 
325     //玩家
326     {
327       //玩家运动
328       p.move();
329       //碰撞监测
330       p.checkCrash();
331       //重力作用
332       p.applyGravity();
333       //水平无操作时水平减速
334       p.velocityDecay();
335       //水平加速度操作速度
336       p.controlSpeed();
337       //受到伤害方法
338       p.attacked()
339       //绘制玩家
340       p.draw();
341       //展示血量
342       p.showHp();
343       //绘制攻击范围
344       p.drawAttackRange();
345     }
346 
347     //怪物
348     {
349       monsters.forEach(m => {
350         //绘制怪物
351         m.draw();
352         //展示血量
353         m.showHp();
354       });
355 
356     }
357     requestAnimationFrame(animate);
358   }
359   //启动！！
360   animate();
361 </script>
362 
363 </html>