好家伙,
这是未进行分包的vue版本的飞机大战
效果如下:
这里说明一下,大概使用逻辑是提供一个<div>
然后在这<div>中渲染游戏
游戏主界面代码如下:
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
标签：Vue,hero,主页,塞到,height,width,let,context,config From： https://www.cnblogs.com/FatTiger4399/p/17290782.html