1 <template>
  2     <div>
  3     <h1>欢迎来到主页面</h1>
  4       <div ref="stage"></div>
  5     </div>
  6   </template>
  7   
  8   <script>
  9   export default {
 10     mounted() {
 11         //canvas初始化
 12         console.log("我被执行啦")
 13         let canvas = document.createElement('canvas');
 14         this.$refs.stage.appendChild(canvas);
 15         canvas.width = 480;
 16         canvas.height = 650;
 17         canvas.ref = canvas;
 18         canvas.style = "border: 1px solid red;"
 19         const context = canvas.getContext("2d");
 20   
 21         //图片初始化方法
 22         function createImage(src) {
 23           let img;
 24           if (typeof src === "string") {
 25             img = new Image();
 26             img.src = require('./img/' + src);
 27           } else {
 28             img = [];
 29             for (let i = 0; i < src.length; i++) {
 30               img[i] = new Image();
 31               img[i].src = require('./img/' + src[i]);
 32             }
 33           }
 34           return img;
 35         }
 36         //createImage()方法测试样例
 37         // let bg = createImage("4.jpg")
 38         // bg.onload = function () {
 39         //   console.log("img加载完毕")
 40         //   context.drawImage(bg, 0, 0, 480, 650)
 41         // }
 42         const IMAGES = {
 43           b: "bullet1.png",
 44           bg: "4.png",
 45           copyright: "shoot_copyright.png",
 46           pause: "game_pause.png",
 47           loading_frame: ["game_loading1.png", "game_loading2.png", "game_loading3.png",
 48             "game_loading4.png"
 49           ],
 50           hero_frame_live: ["hero1.png", "hero2.png"],
 51           hero_frame_death: ["hero_blowup_n1.png", "hero_blowup_n2.png", "hero_blowup_n3.png",
 52             "hero_blowup_n4.png"
 53           ],
 54           e1_live: ["enemy1.png"],
 55           e1_death: ["enemy1_down1.png", "enemy1_down2.png", "enemy1_down3.png", "enemy1_down4.png"],
 56           e2_live: ["enemy2.png"],
 57           e2_death: ["enemy2_down1.png", "enemy2_down2.png", "enemy2_down3.png", "enemy2_down4.png"],
 58           e3_live: ["enemy3_n1.png", "enemy3_n2.png"],
 59           e3_death: ["enemy3_down1.png", "enemy3_down2.png", "enemy3_down3.png", "enemy3_down4.png",
 60             "enemy3_down5.png", "enemy3_down6.png"
 61           ],
 62           c1: "lanqiu.png"
 63         };
 64         //初始化各个图片
 65         const b = createImage(IMAGES.b);
 66         const bg = createImage(IMAGES.bg);
 67         const copyright = createImage(IMAGES.copyright);
 68         const pause = createImage(IMAGES.pause);
 69         const loading_frame = createImage(IMAGES.loading_frame);
 70         const hero_frame = {
 71           live: createImage(IMAGES.hero_frame_live),
 72           death: createImage(IMAGES.hero_frame_death),
 73         };
 74         const e1 = {
 75           live: createImage(IMAGES.e1_live),
 76           death: createImage(IMAGES.e1_death),
 77         };
 78         const e2 = {
 79           live: createImage(IMAGES.e2_live),
 80           death: createImage(IMAGES.e2_death),
 81         };
 82         const e3 = {
 83           live: createImage(IMAGES.e3_live),
 84           death: createImage(IMAGES.e3_death),
 85         };
 86         const c1 = createImage(IMAGES.c1);
 87   
 88         //配置项:
 89         // 定义游戏的状态
 90         // 开始
 91         const START = 0;
 92         // 开始时
 93         const STARTING = 1;
 94         // 运行时
 95         const RUNNING = 2;
 96         // 暂停时
 97         const PAUSE = 3;
 98         // 结束时
 99         const END = 4;
100         // 加载中
101         const LOADINGING = 5;
102   
103         //state表示游戏的状态 取值必须是以上的五种状态
104         let state = LOADINGING;
105         // hero_frame.addEventListener("load", () => {
106         //   state = START;
107         // })
108   
109         pause.onload = function () {
110           state = START;
111           console.log(state)
112         }
113   
114         //score 分数变量 life 变量
115         let score = 0;
116         let life = 3;
117   
118         //天空类的配置项
119         const SKY = {
120           bg: bg,
121           width: 480,
122           height: 650,
123           speed: 10,
124         };
125   
126         // 飞机加载界面的配置项
127         const LOADING = {
128           frame: loading_frame,
129           width: 186,
130           height: 38,
131           x: 0,
132           y: 650 - 38,
133           speed: 400,
134         };
135   
136         // 英雄配置项
137         const HERO = {
138           frame: hero_frame,
139           width: 99,
140           height: 124,
141           speed: 100,
142         };
143   
144         // 子弹配置项
145         const BULLET = {
146           img: b,
147           width: 9,
148           height: 21,
149         };
150   
151         //小敌机配置项
152         const E1 = {
153           type: 1,
154           width: 57,
155           height: 51,
156           life: 10,
157           score: 1,
158           frame: e1,
159           minSpeed: 20,
160           maxSpeed: 10
161         };
162         //中敌机配置项
163         const E2 = {
164           type: 2,
165           width: 69,
166           height: 95,
167           life: 50,
168           score: 5,
169           frame: e2,
170           minSpeed: 50,
171           maxSpeed: 20
172         };
173         //打敌机配置项
174         const E3 = {
175           type: 3,
176           width: 169,
177           height: 258,
178           life: 100,
179           score: 20,
180           frame: e3,
181           minSpeed: 100,
182           maxSpeed: 100
183         };
184         //奖励类配置项
185         const C1 = {
186           type: 4,
187           width: 75,
188           height: 75,
189           life: 1,
190           score: 1,
191           img: c1,
192           minSpeed: 5,
193           maxSpeed: 10
194         };
195         //正式代码
196   
197         //初始化奖励类
198         class Award {
199           constructor(config) {
200             this.type = config.type;
201             this.width = config.width;
202             this.height = config.height;
203             this.x = Math.floor(Math.random() * (480 - config.width));
204             this.y = -config.height;
205             this.life = config.life;
206             this.score = config.score;
207             this.img = config.img;
208             this.live = true;
209             this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;
210             this.lastTime = new Date().getTime();
211             this.deathIndex = 0;
212             this.destory = false;
213           }
214           move() {
215             const currentTime = new Date().getTime();
216             if (currentTime - this.lastTime >= this.speed) {
217               if (this.live) {
218                 this.y = this.y + 6;
219                 this.lastTime = currentTime;
220               } else {
221                 this.destory = true;
222   
223               }
224             }
225           }
226           paint(context) {
227             context.drawImage(this.img, this.x, this.y, this.width, this.height);
228           }
229           outOfBounds() {
230             if (this.y > 650) {
231               return true;
232             }
233           }
234           hit(o) {
235             let ol = o.x;
236             let or = o.x + o.width;
237             let ot = o.y;
238             let ob = o.y + o.height;
239             let el = this.x;
240             let er = this.x + this.width;
241             let et = this.y;
242             let eb = this.y + this.height;
243             if (ol > er || or < el || ot > eb || ob < et) {
244               return false;
245             } else {
246               return true;
247             }
248           }
249           // collide() {
250           //   this.life--;
251           //   if (this.life === 0) {
252           //     this.live = false;
253           //     score += this.score;
254           //   }
255           // }
256         }
257   
258         //
259         //初始化一个子弹类
260         class Bullet {
261           constructor(config, x, y) {
262             this.img = config.img;
263             this.width = config.width;
264             this.height = config.height;
265             this.x = x;
266             this.y = y;
267             this.destory = false;
268           }
269           //子弹绘制方法
270           paint(context) {
271             context.drawImage(this.img, this.x, this.y);
272           }
273           //移动子弹 this.y--
274           move() {
275             this.y -= 8;
276           }
277           outOfBounds() {
278             //如果返回的是真的话 那么我们应该销毁掉这个子弹
279             return this.y < -this.height;
280           }
281           collide() {
282             //让这颗子弹变成可销毁状态
283             this.destory = true;
284           }
285         }
286         //
287   
288         // 初始化一个敌机类
289         class Enemy {
290   
291   
292   
293   
294   
295           
296           constructor(config) {
297             this.type = config.type;
298             this.width = config.width;
299             this.height = config.height;
300             this.x = Math.floor(Math.random() * (480 - config.width));
301             this.y = -config.height;
302             this.life = config.life;
303             this.score = config.score;
304             this.frame = config.frame;
305             this.img = this.frame.live[0];
306             this.live = true;
307             this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;
308             this.lastTime = new Date().getTime();
309             this.deathIndex = 0;
310             this.destory = false;
311           }
312           move() {
313             const currentTime = new Date().getTime();
314             if (currentTime - this.lastTime >= this.speed) {
315               if (this.live) {
316                 this.img = this.frame.live[0];
317                 this.y++;
318                 this.lastTime = currentTime;
319               } else {
320                 this.img = this.frame.death[this.deathIndex++];
321                 if (this.deathIndex === this.frame.death.length) {
322                   this.destory = true;
323                 }
324               }
325             }
326           }
327           paint(context) {
328             context.drawImage(this.img, this.x, this.y);
329           }
330           outOfBounds() {
331             if (this.y > 650) {
332               return true;
333             }
334           }
335           hit(o) {
336             let ol = o.x;
337             let or = o.x + o.width;
338             let ot = o.y;
339             let ob = o.y + o.height;
340             let el = this.x;
341             let er = this.x + this.width;
342             let et = this.y;
343             let eb = this.y + this.height;
344             if (ol > er || or < el || ot > eb || ob < et) {
345               return false;
346             } else {
347               return true;
348             }
349           }
350           collide() {
351             this.life--;
352             if (this.life === 0) {
353               this.live = false;
354               score += this.score;
355             }
356           }
357         }
358   
359         //
360         // 初始化一个英雄类
361         class Hero {
362           constructor(config) {
363             this.width = config.width;
364             this.height = config.height;
365             this.x = (480 - config.width) / 2;
366             this.y = 650 - config.height;
367             this.frame = config.frame;
368             this.frameLiveIndex = 0;
369             this.frameDeathIndex = 0;
370             this.lastTime = new Date().getTime();
371             this.speed = config.speed;
372             //当前展示的图片
373             this.img = null;
374             this.live = true;
375             //子弹上次射击的时间
376             this.lastShootTime = new Date().getTime();
377             //子弹射击的间隔
378             this.shootInterval = 50;
379             //子弹夹数组
380             this.bulletList = [];
381             this.destory = false;
382           }
383           judge() {
384             const currentTime = new Date().getTime();
385             if (currentTime - this.lastTime > this.speed) {
386               if (this.live) {
387                 this.img = this.frame.live[this.frameLiveIndex++ % this.frame.live.length];
388               } else {
389                 //0 1 2 3 4
390                 this.img = this.frame.death[this.frameDeathIndex++];
391                 //到4的时候英雄死了
392                 if (this.frameDeathIndex === this.frame.death.length) {
393                   this.destory = true;
394                 }
395               }
396               this.lastTime = currentTime;
397             }
398           }
399           paint(context) {
400             context.drawImage(this.img, this.x, this.y, this.width, this.height);
401           }
402           //英雄可以射击子弹
403           shoot() {
404             //获取当前时间
405             const currentTime = new Date().getTime();
406             //飞机的位置
407             if (currentTime - this.lastShootTime > this.shootInterval) {
408               //在飞机的头部初始化一个子弹对象
409               let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2, this.y - BULLET.height);
410               //英雄飞机要认领这个子弹
411               this.bulletList.push(bullet);
412               //在网页上绘制一个子弹对象
413               bullet.paint(context);
414               //更新英雄射击时间
415               this.lastShootTime = currentTime;
416             }
417           }
418           collide() {
419             //将活着标识符切换为false
420             //活着 -> 爆炸中 -> 死亡(销毁)
421             this.live = false;
422           }
423         }
424         //
425         // 初始化一个飞机界面加载类
426         class Loading {
427           constructor(config) {
428             this.frame = config.frame;
429             this.frameIndex = 0;
430             this.width = config.width;
431             this.height = config.height;
432             this.x = config.x;
433             this.y = config.y;
434             this.speed = config.speed;
435             this.lastTime = new Date().getTime();
436           }
437           judge() {
438             const currentTime = new Date().getTime();
439             if (currentTime - this.lastTime > this.speed) {
440               this.frameIndex++;
441               if (this.frameIndex === 4) {
442                 state = RUNNING;
443               }
444               this.lastTime = currentTime;
445             }
446           }
447           paint(context) {
448             context.drawImage(this.frame[this.frameIndex], this.x, this.y);
449           }
450         }
451   
452   
453         class Main {
454           //一下全为全局变量或方法 (全局的!!)
455           //初始化一个天空实例
456           //主启动方法
457           maingame() {
458             const sky = new Sky(SKY);
459             //初始化一个飞机界面加载实例
460             const loading = new Loading(LOADING);
461             //初始化一个英雄实例 英雄是会变的
462             let hero = new Hero(HERO);
463             //该变量中有所有的敌机实例
464             let enemies = [];
465             //该变量中存放所有的奖励实例
466   
467             let awards = [];
468             //敌机产生的速率
469             let ENEMY_CREATE_INTERVAL = 800;
470             let ENEMY_LASTTIME = new Date().getTime();
471   
472             function stateControl() {
473               //为canvas绑定一个点击事件 且他如果是START状态的时候需要修改成STARTING状态
474               canvas.addEventListener("click", () => {
475                 if (state === START) {
476                   state = STARTING;
477                 }
478               });
479               // 为canvas绑定一个鼠标移动事件 鼠标正好在飞机图片的正中心
480               canvas.addEventListener("mousemove", (e) => {
481                 let x = e.offsetX;
482                 let y = e.offsetY;
483                 hero.x = x - hero.width / 2;
484                 hero.y = y - hero.height / 2;
485               });
486               // 为canvas绑定一个鼠标离开事件 鼠标离开时 RUNNING -> PAUSE
487               canvas.addEventListener("mouseleave", () => {
488                 if (state === RUNNING) {
489                   state = PAUSE;
490                 }
491               });
492               // 为canvas绑定一个鼠标进入事件 鼠标进入时 PAUSE => RUNNING
493               canvas.addEventListener("mouseenter", () => {
494                 if (state === PAUSE) {
495                   state = RUNNING;
496                 }
497               });
498               //为canvas绑定一个屏幕移动触摸点事件 触碰点正好在飞机图片的正中心
499               canvas.addEventListener("touchmove", (e) => {
500                 // let x = e.pageX;
501                 // let y = e.pageY;
502                 console.log(e);
503                 // let x = e.touches[0].clientX;
504                 // let y = e.touches[0].clinetY;
505                 let x = e.touches[0].pageX;
506                 let y = e.touches[0].pageY;
507                 // let x = e.touches[0].screenX;
508                 // let y = e.touches[0].screenY;
509                 let write1 = (document.body.clientWidth - 480) / 2;
510                 let write2 = (document.body.clientHeight - 650) / 2;
511                 hero.x = x - write1 - hero.width / 2;
512                 hero.y = y - write2 - hero.height / 2;
513   
514                 // hero.x = x - hero.width / 2;
515                 // hero.y = y - hero.height / 2;
516                 console.log(x, y);
517                 console.log(document.body.clientWidth, document.body.clientHeight);
518                 e.preventDefault(); // 阻止屏幕滚动的默认行为
519   
520               })
521             }
522             stateControl();
523             // 碰撞检测函数
524             //此处的碰撞检测包括 
525             //1.子弹与敌机的碰撞
526             //2.英雄与敌机的碰撞
527             //3.英雄与随机奖励的碰撞
528             function checkHit() {
529               // 遍历所有的敌机
530               for (let i = 0; i < awards.length; i++) {
531                 //检测英雄是否碰到奖励类
532                 if (awards[i].hit(hero)) {
533                   //当然了,这个随机奖励的样式也要删了
534                   awards.splice(i, 1);
535                   //清除所有的敌机
536                   // for (let i = 0; i < enemies.length; i++) {
537                   //   enemies.splice(i, 1);
538                   // }
539                   enemies.length = 0;
540   
541                 }
542               }
543               for (let i = 0; i < enemies.length; i++) {
544                 //检测英雄是否撞到敌机
545                 if (enemies[i].hit(hero)) {
546                   //将敌机和英雄的destory属性改为true
547                   enemies[i].collide();
548                   hero.collide();
549                 }
550                 for (let j = 0; j < hero.bulletList.length; j++) {
551                   enemies[i].hit(hero.bulletList[j]);
552                   //检测子弹是否撞到敌机
553                   if (enemies[i].hit(hero.bulletList[j])) {
554                     //将敌机和子弹的destory属性改为true
555                     enemies[i].collide();
556                     hero.bulletList[j].collide();
557                   }
558                 }
559               }
560             }
561             // 全局函数 隔一段时间就来初始化一架敌机/奖励
562             function createComponent() {
563               const currentTime = new Date().getTime();
564               if (currentTime - ENEMY_LASTTIME >= ENEMY_CREATE_INTERVAL) {
565                 let ran = Math.floor(Math.random() * 100);
566                 if (ran < 55) {
567                   enemies.push(new Enemy(E1));
568                 } else if (ran < 85 && ran > 55) {
569                   enemies.push(new Enemy(E2));
570                 } else if (ran < 95 && ran > 85) {
571                   enemies.push(new Enemy(E3));
572                 } else if (ran > 95) {
573                   awards.push(new award(C1));
574   
575                 }
576   
577                 ENEMY_LASTTIME = currentTime;
578               }
579             }
580             // 全局函数 来判断所有的子弹/敌人组件 "负责移动"
581             function judgeComponent() {
582               for (let i = 0; i < hero.bulletList.length; i++) {
583                 hero.bulletList[i].move();
584               }
585               for (let i = 0; i < enemies.length; i++) {
586                 enemies[i].move();
587               }
588               for (let i = 0; i < awards.length; i++) {
589                 awards[i].move();
590               }
591             }
592             // 全局函数 来绘制所有的子弹/敌人组件 绘制score&life面板
593             function paintComponent() {
594               for (let i = 0; i < hero.bulletList.length; i++) {
595                 hero.bulletList[i].paint(context);
596               }
597               for (let i = 0; i < enemies.length; i++) {
598                 enemies[i].paint(context);
599               }
600               for (let i = 0; i < awards.length; i++) {
601                 awards[i].paint(context);
602               }
603               context.font = "20px 微软雅黑";
604               context.fillStyle = "green";
605               context.textAlign = "left";
606               context.fillText("score: " + score, 10, 20);
607               context.textAlign = "right";
608               context.fillText("life: " + life, 480 - 10, 20);
609               //重置样式
610               context.fillStyle = "black";
611               context.textAlign = "left";
612             }
613             // 全局函数 来销毁所有的子弹/敌人组件 销毁掉英雄
614             function deleteComponent() {
615               if (hero.destory) {
616                 life--;
617                 hero.destory = false;
618                 if (life === 0) {
619                   state = END;
620                 } else {
621                   hero = new Hero(HERO);
622                 }
623               }
624               for (let i = 0; i < hero.bulletList.length; i++) {
625                 if (hero.bulletList[i].outOfBounds() || hero.bulletList[i].destory) {
626                   hero.bulletList.splice(i, 1);
627                 }
628               }
629               for (let i = 0; i < enemies.length; i++) {
630                 if (enemies[i].outOfBounds() || enemies[i].destory) {
631                   enemies.splice(i, 1);
632                 }
633               }
634             }
635   
636             //当图片加载完毕时,需要做某些事情
637             bg.addEventListener("load", () => {
638               setInterval(() => {
639                 switch (state) {
640                   case START:
641                     sky.judge();
642                     sky.paint(context);
643                     let logo_x = (480 - copyright.naturalWidth) / 2;
644                     let logo_y = (650 - copyright.naturalHeight) / 2;
645                     context.drawImage(copyright, logo_x, logo_y);
646                     break;
647                   case STARTING:
648                     sky.judge();
649                     sky.paint(context);
650                     loading.judge();
651                     loading.paint(context);
652                     break;
653                   case RUNNING:
654                     sky.judge();
655                     sky.paint(context);
656                     hero.judge();
657                     hero.paint(context);
658                     hero.shoot();
659                     createComponent();
660                     judgeComponent();
661                     deleteComponent();
662                     paintComponent();
663                     checkHit();
664                     break;
665                   case PAUSE:
666                     let pause_x = (480 - pause.naturalWidth) / 2;
667                     let pause_y = (650 - pause.naturalHeight) / 2;
668                     context.drawImage(pause, pause_x, pause_y);
669                     break;
670                   case END:
671                     //给我的画笔设置一个字的样式
672                     //后面写出来的字都是这个样式的
673                     context.font = "bold 24px 微软雅黑";
674                     context.textAlign = "center";
675                     context.textBaseline = "middle";
676                     context.fillText("GAME_OVER", 480 / 2, 650 / 2);
677                     break;
678                 }
679               }, 10);
680             });
681   
682   
683             //背景切换方法
684             // function changebg() {
685             //     console.log("changebg方法被触发")
686             //     bg.src = "img/background.png"
687             // }
688           }
689         }
690         //
691   
692         //初始化一个天空类
693         class Sky {
694           constructor(config) {
695             this.bg = config.bg;
696             this.width = config.width;
697             this.height = config.height;
698             this.x1 = 0;
699             this.y1 = 0;
700             this.x2 = 0;
701             this.y2 = -this.height;
702             this.speed = config.speed;
703             this.lastTime = new Date().getTime();
704           }
705           //判断方法
706           judge() {
707             let currentTime = new Date().getTime();
708             if (currentTime - this.lastTime > this.speed) {
709               this.y1++;
710               this.y2++;
711               this.lastTime = currentTime;
712             }
713             if (this.y2 === 0) {
714               this.y1 = 0;
715               this.y2 = -this.height;
716             }
717           }
718           //绘图方法
719           paint(context) {
720             context.drawImage(this.bg, this.x1, this.y1, this.width, this.height);
721             context.drawImage(this.bg, this.x2, this.y2, this.width, this.height);
722           }
723         }
724         let main_1 = new Main()
725         main_1.maingame();
726       }
727     }
728   
729   
730   </script>
731   
732   <style>
733   #stage {
734     width: 480px;
735     height: 650px;
736     margin: 0 auto;
737   }
738   </style>
739   
740