好家伙,
代码已开源
Git:
https://gitee.com/tang-and-han-dynasties/panghu-planebattle-esm.git
NPM:
panghu-planebattle-esm - npm (npmjs.com)
现在,比如说,我用Vue写好了个人博客主页的前端
我想在这个主页里面加点东西,让我的博客更缤纷多彩一点
我想在他的主页里面塞个小游戏，他会怎么做
1.思考步骤
如下：
第一步：去网上找个小游戏的资源,将这个包下载到本地,
诶,正好发现有个飞机大战 panghu-planebattle-modular 小游戏开发好了
我可以直接下载,或者通过npm安装
npm install panghu-planebattle-modular
第二步：导入到某个.vue文件或html文件
通过import导入
第三步：划一个区域<div>给这个包去渲染游戏
剩下的他就不用管了
大概是这么个过程,然后我们按着这个思路,反向去分我们这个包
先来看看原先的完整代码:
完整代码
<template> <div> <h1>欢迎来到主页面</h1> <div ref="stage"></div> </div> </template> <script> export default { mounted() { //canvas初始化 console.log("我被执行啦") let canvas = document.createElement('canvas'); this.$refs.stage.appendChild(canvas); canvas.width = 480; canvas.height = 650; canvas.ref = canvas; canvas.style = "border: 1px solid red;" const context = canvas.getContext("2d"); //图片初始化方法 function createImage(src) { let img; if (typeof src === "string") { img = new Image(); img.src = require('./img/' + src); } else { img = []; for (let i = 0; i < src.length; i++) { img[i] = new Image(); img[i].src = require('./img/' + src[i]); } } return img; } //createImage()方法测试样例 // let bg = createImage("4.jpg") // bg.onload = function () { // console.log("img加载完毕") // context.drawImage(bg, 0, 0, 480, 650) // } const IMAGES = { b: "bullet1.png", bg: "4.png", copyright: "shoot_copyright.png", pause: "game_pause.png", loading_frame: ["game_loading1.png", "game_loading2.png", "game_loading3.png", "game_loading4.png" ], hero_frame_live: ["hero1.png", "hero2.png"], hero_frame_death: ["hero_blowup_n1.png", "hero_blowup_n2.png", "hero_blowup_n3.png", "hero_blowup_n4.png" ], e1_live: ["enemy1.png"], e1_death: ["enemy1_down1.png", "enemy1_down2.png", "enemy1_down3.png", "enemy1_down4.png"], e2_live: ["enemy2.png"], e2_death: ["enemy2_down1.png", "enemy2_down2.png", "enemy2_down3.png", "enemy2_down4.png"], e3_live: ["enemy3_n1.png", "enemy3_n2.png"], e3_death: ["enemy3_down1.png", "enemy3_down2.png", "enemy3_down3.png", "enemy3_down4.png", "enemy3_down5.png", "enemy3_down6.png" ], c1: "lanqiu.png" }; //初始化各个图片 const b = createImage(IMAGES.b); const bg = createImage(IMAGES.bg); const copyright = createImage(IMAGES.copyright); const pause = createImage(IMAGES.pause); const loading_frame = createImage(IMAGES.loading_frame); const hero_frame = { live: createImage(IMAGES.hero_frame_live), death: createImage(IMAGES.hero_frame_death), }; const e1 = { live: createImage(IMAGES.e1_live), death: createImage(IMAGES.e1_death), }; const e2 = { live: createImage(IMAGES.e2_live), death: createImage(IMAGES.e2_death), }; const e3 = { live: createImage(IMAGES.e3_live), death: createImage(IMAGES.e3_death), }; const c1 = createImage(IMAGES.c1); //配置项: // 定义游戏的状态 // 开始 const START = 0; // 开始时 const STARTING = 1; // 运行时 const RUNNING = 2; // 暂停时 const PAUSE = 3; // 结束时 const END = 4; // 加载中 const LOADINGING = 5; //state表示游戏的状态 取值必须是以上的五种状态 let state = LOADINGING; // hero_frame.addEventListener("load", () => { // state = START; // }) pause.onload = function () { state = START; console.log(state) } //score 分数变量 life 变量 let score = 0; let life = 3; //天空类的配置项 const SKY = { bg: bg, width: 480, height: 650, speed: 10, }; // 飞机加载界面的配置项 const LOADING = { frame: loading_frame, width: 186, height: 38, x: 0, y: 650 - 38, speed: 400, }; // 英雄配置项 const HERO = { frame: hero_frame, width: 99, height: 124, speed: 100, }; // 子弹配置项 const BULLET = { img: b, width: 9, height: 21, }; //小敌机配置项 const E1 = { type: 1, width: 57, height: 51, life: 10, score: 1, frame: e1, minSpeed: 20, maxSpeed: 10 }; //中敌机配置项 const E2 = { type: 2, width: 69, height: 95, life: 50, score: 5, frame: e2, minSpeed: 50, maxSpeed: 20 }; //打敌机配置项 const E3 = { type: 3, width: 169, height: 258, life: 100, score: 20, frame: e3, minSpeed: 100, maxSpeed: 100 }; //奖励类配置项 const C1 = { type: 4, width: 75, height: 75, life: 1, score: 1, img: c1, minSpeed: 5, maxSpeed: 10 }; //正式代码 //初始化奖励类 class Award { constructor(config) { this.type = config.type; this.width = config.width; this.height = config.height; this.x = Math.floor(Math.random() * (480 - config.width)); this.y = -config.height; this.life = config.life; this.score = config.score; this.img = config.img; this.live = true; this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed; this.lastTime = new Date().getTime(); this.deathIndex = 0; this.destory = false; } move() { const currentTime = new Date().getTime(); if (currentTime - this.lastTime >= this.speed) { if (this.live) { this.y = this.y + 6; this.lastTime = currentTime; } else { this.destory = true; } } } paint(context) { context.drawImage(this.img, this.x, this.y, this.width, this.height); } outOfBounds() { if (this.y > 650) { return true; } } hit(o) { let ol = o.x; let or = o.x + o.width; let ot = o.y; let ob = o.y + o.height; let el = this.x; let er = this.x + this.width; let et = this.y; let eb = this.y + this.height; if (ol > er || or < el || ot > eb || ob < et) { return false; } else { return true; } } // collide() { // this.life--; // if (this.life === 0) { // this.live = false; // score += this.score; // } // } } // //初始化一个子弹类 class Bullet { constructor(config, x, y) { this.img = config.img; this.width = config.width; this.height = config.height; this.x = x; this.y = y; this.destory = false; } //子弹绘制方法 paint(context) { context.drawImage(this.img, this.x, this.y); } //移动子弹 this.y-- move() { this.y -= 8; } outOfBounds() { //如果返回的是真的话 那么我们应该销毁掉这个子弹 return this.y < -this.height; } collide() { //让这颗子弹变成可销毁状态 this.destory = true; } } // // 初始化一个敌机类 class Enemy { constructor(config) { this.type = config.type; this.width = config.width; this.height = config.height; this.x = Math.floor(Math.random() * (480 - config.width)); this.y = -config.height; this.life = config.life; this.score = config.score; this.frame = config.frame; this.img = this.frame.live[0]; this.live = true; this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed; this.lastTime = new Date().getTime(); this.deathIndex = 0; this.destory = false; } move() { const currentTime = new Date().getTime(); if (currentTime - this.lastTime >= this.speed) { if (this.live) { this.img = this.frame.live[0]; this.y++; this.lastTime = currentTime; } else { this.img = this.frame.death[this.deathIndex++]; if (this.deathIndex === this.frame.death.length) { this.destory = true; } } } } paint(context) { context.drawImage(this.img, this.x, this.y); } outOfBounds() { if (this.y > 650) { return true; } } hit(o) { let ol = o.x; let or = o.x + o.width; let ot = o.y; let ob = o.y + o.height; let el = this.x; let er = this.x + this.width; let et = this.y; let eb = this.y + this.height; if (ol > er || or < el || ot > eb || ob < et) { return false; } else { return true; } } collide() { this.life--; if (this.life === 0) { this.live = false; score += this.score; } } } // // 初始化一个英雄类 class Hero { constructor(config) { this.width = config.width; this.height = config.height; this.x = (480 - config.width) / 2; this.y = 650 - config.height; this.frame = config.frame; this.frameLiveIndex = 0; this.frameDeathIndex = 0; this.lastTime = new Date().getTime(); this.speed = config.speed; //当前展示的图片 this.img = null; this.live = true; //子弹上次射击的时间 this.lastShootTime = new Date().getTime(); //子弹射击的间隔 this.shootInterval = 50; //子弹夹数组 this.bulletList = []; this.destory = false; } judge() { const currentTime = new Date().getTime(); if (currentTime - this.lastTime > this.speed) { if (this.live) { this.img = this.frame.live[this.frameLiveIndex++ % this.frame.live.length]; } else { //0 1 2 3 4 this.img = this.frame.death[this.frameDeathIndex++]; //到4的时候英雄死了 if (this.frameDeathIndex === this.frame.death.length) { this.destory = true; } } this.lastTime = currentTime; } } paint(context) { context.drawImage(this.img, this.x, this.y, this.width, this.height); } //英雄可以射击子弹 shoot() { //获取当前时间 const currentTime = new Date().getTime(); //飞机的位置 if (currentTime - this.lastShootTime > this.shootInterval) { //在飞机的头部初始化一个子弹对象 let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2, this.y - BULLET.height); //英雄飞机要认领这个子弹 this.bulletList.push(bullet); //在网页上绘制一个子弹对象 bullet.paint(context); //更新英雄射击时间 this.lastShootTime = currentTime; } } collide() { //将活着标识符切换为false //活着 -> 爆炸中 -> 死亡(销毁) this.live = false; } } // // 初始化一个飞机界面加载类 class Loading { constructor(config) { this.frame = config.frame; this.frameIndex = 0; this.width = config.width; this.height = config.height; this.x = config.x; this.y = config.y; this.speed = config.speed; this.lastTime = new Date().getTime(); } judge() { const currentTime = new Date().getTime(); if (currentTime - this.lastTime > this.speed) { this.frameIndex++; if (this.frameIndex === 4) { state = RUNNING; } this.lastTime = currentTime; } } paint(context) { context.drawImage(this.frame[this.frameIndex], this.x, this.y); } } class Main { //一下全为全局变量或方法 (全局的!!) //初始化一个天空实例 //主启动方法 maingame() { const sky = new Sky(SKY); //初始化一个飞机界面加载实例 const loading = new Loading(LOADING); //初始化一个英雄实例 英雄是会变的 let hero = new Hero(HERO); //该变量中有所有的敌机实例 let enemies = []; //该变量中存放所有的奖励实例 let awards = []; //敌机产生的速率 let ENEMY_CREATE_INTERVAL = 800; let ENEMY_LASTTIME = new Date().getTime(); function stateControl() { //为canvas绑定一个点击事件 且他如果是START状态的时候需要修改成STARTING状态 canvas.addEventListener("click", () => { if (state === START) { state = STARTING; } }); // 为canvas绑定一个鼠标移动事件 鼠标正好在飞机图片的正中心 canvas.addEventListener("mousemove", (e) => { let x = e.offsetX; let y = e.offsetY; hero.x = x - hero.width / 2; hero.y = y - hero.height / 2; }); // 为canvas绑定一个鼠标离开事件 鼠标离开时 RUNNING -> PAUSE canvas.addEventListener("mouseleave", () => { if (state === RUNNING) { state = PAUSE; } }); // 为canvas绑定一个鼠标进入事件 鼠标进入时 PAUSE => RUNNING canvas.addEventListener("mouseenter", () => { if (state === PAUSE) { state = RUNNING; } }); //为canvas绑定一个屏幕移动触摸点事件 触碰点正好在飞机图片的正中心 canvas.addEventListener("touchmove", (e) => { // let x = e.pageX; // let y = e.pageY; console.log(e); // let x = e.touches[0].clientX; // let y = e.touches[0].clinetY; let x = e.touches[0].pageX; let y = e.touches[0].pageY; // let x = e.touches[0].screenX; // let y = e.touches[0].screenY; let write1 = (document.body.clientWidth - 480) / 2; let write2 = (document.body.clientHeight - 650) / 2; hero.x = x - write1 - hero.width / 2; hero.y = y - write2 - hero.height / 2; // hero.x = x - hero.width / 2; // hero.y = y - hero.height / 2; console.log(x, y); console.log(document.body.clientWidth, document.body.clientHeight); e.preventDefault(); // 阻止屏幕滚动的默认行为 }) } stateControl(); // 碰撞检测函数 //此处的碰撞检测包括 //1.子弹与敌机的碰撞 //2.英雄与敌机的碰撞 //3.英雄与随机奖励的碰撞 function checkHit() { // 遍历所有的敌机 for (let i = 0; i < awards.length; i++) { //检测英雄是否碰到奖励类 if (awards[i].hit(hero)) { //当然了,这个随机奖励的样式也要删了 awards.splice(i, 1); //清除所有的敌机 // for (let i = 0; i < enemies.length; i++) { // enemies.splice(i, 1); // } enemies.length = 0; } } for (let i = 0; i < enemies.length; i++) { //检测英雄是否撞到敌机 if (enemies[i].hit(hero)) { //将敌机和英雄的destory属性改为true enemies[i].collide(); hero.collide(); } for (let j = 0; j < hero.bulletList.length; j++) { enemies[i].hit(hero.bulletList[j]); //检测子弹是否撞到敌机 if (enemies[i].hit(hero.bulletList[j])) { //将敌机和子弹的destory属性改为true enemies[i].collide(); hero.bulletList[j].collide(); } } } } // 全局函数 隔一段时间就来初始化一架敌机/奖励 function createComponent() { const currentTime = new Date().getTime(); if (currentTime - ENEMY_LASTTIME >= ENEMY_CREATE_INTERVAL) { let ran = Math.floor(Math.random() * 100); if (ran < 55) { enemies.push(new Enemy(E1)); } else if (ran < 85 && ran > 55) { enemies.push(new Enemy(E2)); } else if (ran < 95 && ran > 85) { enemies.push(new Enemy(E3)); } else if (ran > 95) { awards.push(new award(C1)); } ENEMY_LASTTIME = currentTime; } } // 全局函数 来判断所有的子弹/敌人组件 "负责移动" function judgeComponent() { for (let i = 0; i < hero.bulletList.length; i++) { hero.bulletList[i].move(); } for (let i = 0; i < enemies.length; i++) { enemies[i].move(); } for (let i = 0; i < awards.length; i++) { awards[i].move(); } } // 全局函数 来绘制所有的子弹/敌人组件 绘制score&life面板 function paintComponent() { for (let i = 0; i < hero.bulletList.length; i++) { hero.bulletList[i].paint(context); } for (let i = 0; i < enemies.length; i++) { enemies[i].paint(context); } for (let i = 0; i < awards.length; i++) { awards[i].paint(context); } context.font = "20px 微软雅黑"; context.fillStyle = "green"; context.textAlign = "left"; context.fillText("score: " + score, 10, 20); context.textAlign = "right"; context.fillText("life: " + life, 480 - 10, 20); //重置样式 context.fillStyle = "black"; context.textAlign = "left"; } // 全局函数 来销毁所有的子弹/敌人组件 销毁掉英雄 function deleteComponent() { if (hero.destory) { life--; hero.destory = false; if (life === 0) { state = END; } else { hero = new Hero(HERO); } } for (let i = 0; i < hero.bulletList.length; i++) { if (hero.bulletList[i].outOfBounds() || hero.bulletList[i].destory) { hero.bulletList.splice(i, 1); } } for (let i = 0; i < enemies.length; i++) { if (enemies[i].outOfBounds() || enemies[i].destory) { enemies.splice(i, 1); } } } //当图片加载完毕时,需要做某些事情 bg.addEventListener("load", () => { setInterval(() => { switch (state) { case START: sky.judge(); sky.paint(context); let logo_x = (480 - copyright.naturalWidth) / 2; let logo_y = (650 - copyright.naturalHeight) / 2; context.drawImage(copyright, logo_x, logo_y); break; case STARTING: sky.judge(); sky.paint(context); loading.judge(); loading.paint(context); break; case RUNNING: sky.judge(); sky.paint(context); hero.judge(); hero.paint(context); hero.shoot(); createComponent(); judgeComponent(); deleteComponent(); paintComponent(); checkHit(); break; case PAUSE: let pause_x = (480 - pause.naturalWidth) / 2; let pause_y = (650 - pause.naturalHeight) / 2; context.drawImage(pause, pause_x, pause_y); break; case END: //给我的画笔设置一个字的样式 //后面写出来的字都是这个样式的 context.font = "bold 24px 微软雅黑"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("GAME_OVER", 480 / 2, 650 / 2); break; } }, 10); }); //背景切换方法 // function changebg() { // console.log("changebg方法被触发") // bg.src = "img/background.png" // } } } // //初始化一个天空类 class Sky { constructor(config) { this.bg = config.bg; this.width = config.width; this.height = config.height; this.x1 = 0; this.y1 = 0; this.x2 = 0; this.y2 = -this.height; this.speed = config.speed; this.lastTime = new Date().getTime(); } //判断方法 judge() { let currentTime = new Date().getTime(); if (currentTime - this.lastTime > this.speed) { this.y1++; this.y2++; this.lastTime = currentTime; } if (this.y2 === 0) { this.y1 = 0; this.y2 = -this.height; } } //绘图方法 paint(context) { context.drawImage(this.bg, this.x1, this.y1, this.width, this.height); context.drawImage(this.bg, this.x2, this.y2, this.width, this.height); } } let main_1 = new Main() main_1.maingame(); } } </script> <style> #stage { width: 480px; height: 650px; margin: 0 auto; } </style>
Helloworld.vue
一看,738行,这,没人想维护的,复制粘贴都嫌累
(再看一眼就要爆炸)
我们要实现一个这样的效果(事实上也实现了)
<template> <div> <div ref="stage"></div> </div> </template> <script> import { canvas, main_1 } from "panghu-planebattle-modular" export default { mounted() { this.$refs.stage.appendChild(canvas); main_1.maingame(); } } </script> <style> #stage { width: 480px; height: 650px; margin: 0 auto; } </style>
而事实上,就是三行代码:
//从包中导入canvas,main_1 import { canvas, main_1 } from "panghu-planebattle-modular" //dom操作添加canvas this.$refs.stage.appendChild(canvas); //调用main_1的maingame方法 main_1.maingame();
让使用者操作的部分由738行代码变成3行代码
2.开始分包
将程序主要分成下面几个需要处理的部分
1、静态的：图片，图片地址，配置项
2、六个小类：Enemy、Hero、Loading、Sky、Award、Bullet
3、主启动类：Main
4、全局方法，全局变量
5、入口（对外导出的对象）
项目目录结构如下：
1.图片
2.配置项
首先是配置项config.js
我们将所有的配置项文件都放在这里,全局变量也放在这里
如果将来我们要调参数,比如说,改改图片,改改子弹的速度之类,就直接在这个文件里改就行了
3.其中六个小类，我把他们"独立"分开
比如Bullet(子弹类)
//初始化一个子弹类 class Bullet { constructor(config, x, y) { this.img = config.img; this.width = config.width; this.height = config.height; this.x = x; this.y = y; this.destory = false; } //子弹绘制方法 paint(context) { context.drawImage(this.img, this.x, this.y); } //移动子弹 this.y-- move() { this.y -= 8; } outOfBounds() { //如果返回的是真的话 那么我们应该销毁掉这个子弹 return this.y < -this.height; } collide() { //让这颗子弹变成可销毁状态 this.destory = true; } } export default Bullet
这里需要提一嘴的是,类的导出必须带 default,否则会报错
export default Bullet
4.主启动类main
我们将所有曾经的全局方法，还有定时器都封装到这个类中
最后新建一个实例，并导出
1 import Enemy from "./enemy" 2 import Hero from "./hero" 3 import Loading from "./loading" 4 import Sky from "./sky" 5 import Award from "./award" 6 7 import { START, STARTING, RUNNING, PAUSE, END } from "./config" 8 import { SKY, LOADING, HERO, E1, E2, E3, C1 } from "./config" 9 import { bg, copyright, pause } from "./config" 10 import { canvas, context } from "./config" 11 12 class Main { 13 //以下全为全局变量或方法 (全局的!!) 14 //初始化一个天空实例 15 //主启动方法 16 maingame() { 17 const sky = new Sky(SKY); 18 //初始化一个飞机界面加载实例 19 const loading = new Loading(LOADING); 20 //初始化一个英雄实例 英雄是会变的 21 let hero = new Hero(HERO); 22 //该变量中有所有的敌机实例 23 let enemies = []; 24 //该变量中存放所有的奖励实例 25 let awards = []; 26 //敌机产生的速率 27 let ENEMY_CREATE_INTERVAL = 800; 28 let ENEMY_LASTTIME = new Date().getTime(); 29 30 function stateControl() { 31 //为canvas绑定一个点击事件 且他如果是START状态的时候需要修改成STARTING状态 32 canvas.addEventListener("click", () => { 33 if (state === START) { 34 state = STARTING; 35 } 36 }); 37 // 为canvas绑定一个鼠标移动事件 鼠标正好在飞机图片的正中心 38 canvas.addEventListener("mousemove", (e) => { 39 let x = e.offsetX; 40 let y = e.offsetY; 41 hero.x = x - hero.width / 2; 42 hero.y = y - hero.height / 2; 43 }); 44 // 为canvas绑定一个鼠标离开事件 鼠标离开时 RUNNING -> PAUSE 45 canvas.addEventListener("mouseleave", () => { 46 if (state === RUNNING) { 47 state = PAUSE; 48 } 49 }); 50 // 为canvas绑定一个鼠标进入事件 鼠标进入时 PAUSE => RUNNING 51 canvas.addEventListener("mouseenter", () => { 52 if (state === PAUSE) { 53 state = RUNNING; 54 } 55 }); 56 //为canvas绑定一个屏幕移动触摸点事件 触碰点正好在飞机图片的正中心 57 canvas.addEventListener("touchmove", (e) => { 58 // let x = e.pageX; 59 // let y = e.pageY; 60 console.log(e); 61 // let x = e.touches[0].clientX; 62 // let y = e.touches[0].clinetY; 63 let x = e.touches[0].pageX; 64 let y = e.touches[0].pageY; 65 // let x = e.touches[0].screenX; 66 // let y = e.touches[0].screenY; 67 let write1 = (document.body.clientWidth - 480) / 2; 68 let write2 = (document.body.clientHeight - 650) / 2; 69 hero.x = x - write1 - hero.width / 2; 70 hero.y = y - write2 - hero.height / 2; 71 72 // hero.x = x - hero.width / 2; 73 // hero.y = y - hero.height / 2; 74 console.log(x, y); 75 console.log(document.body.clientWidth, document.body.clientHeight); 76 e.preventDefault(); // 阻止屏幕滚动的默认行为 77 78 }) 79 } 80 stateControl(); 81 // 碰撞检测函数 82 //此处的碰撞检测包括 83 //1.子弹与敌机的碰撞 84 //2.英雄与敌机的碰撞 85 //3.英雄与随机奖励的碰撞 86 function checkHit() { 87 // 遍历所有的敌机 88 for (let i = 0; i < awards.length; i++) { 89 //检测英雄是否碰到奖励类 90 if (awards[i].hit(hero)) { 91 //当然了,这个随机奖励的样式也要删了 92 awards.splice(i, 1); 93 //清除所有的敌机 94 // for (let i = 0; i < enemies.length; i++) { 95 // enemies.splice(i, 1); 96 // } 97 enemies.length = 0; 98 99 } 100 } 101 for (let i = 0; i < enemies.length; i++) { 102 //检测英雄是否撞到敌机 103 if (enemies[i].hit(hero)) { 104 //将敌机和英雄的destory属性改为true 105 enemies[i].collide(); 106 hero.collide(); 107 } 108 for (let j = 0; j < hero.bulletList.length; j++) { 109 enemies[i].hit(hero.bulletList[j]); 110 //检测子弹是否撞到敌机 111 if (enemies[i].hit(hero.bulletList[j])) { 112 //将敌机和子弹的destory属性改为true 113 enemies[i].collide(); 114 hero.bulletList[j].collide(); 115 } 116 } 117 } 118 } 119 // 全局函数 隔一段时间就来初始化一架敌机/奖励 120 function createComponent() { 121 const currentTime = new Date().getTime(); 122 if (currentTime - ENEMY_LASTTIME >= ENEMY_CREATE_INTERVAL) { 123 let ran = Math.floor(Math.random() * 100); 124 if (ran < 55) { 125 enemies.push(new Enemy(E1)); 126 } else if (ran < 85 && ran > 55) { 127 enemies.push(new Enemy(E2)); 128 } else if (ran < 95 && ran > 85) { 129 enemies.push(new Enemy(E3)); 130 } else if (ran > 95) { 131 awards.push(new Award(C1)); 132 133 } 134 135 ENEMY_LASTTIME = currentTime; 136 } 137 } 138 // 全局函数 来判断所有的子弹/敌人组件 "负责移动" 139 function judgeComponent() { 140 for (let i = 0; i < hero.bulletList.length; i++) { 141 hero.bulletList[i].move(); 142 } 143 for (let i = 0; i < enemies.length; i++) { 144 enemies[i].move(); 145 } 146 for (let i = 0; i < awards.length; i++) { 147 awards[i].move(); 148 } 149 } 150 // 全局函数 来绘制所有的子弹/敌人组件 绘制score&life面板 151 function paintComponent() { 152 for (let i = 0; i < hero.bulletList.length; i++) { 153 hero.bulletList[i].paint(context); 154 } 155 for (let i = 0; i < enemies.length; i++) { 156 enemies[i].paint(context); 157 } 158 for (let i = 0; i < awards.length; i++) { 159 awards[i].paint(context); 160 } 161 context.font = "20px 微软雅黑"; 162 context.fillStyle = "green"; 163 context.textAlign = "left"; 164 context.fillText("score: " + score, 10, 20); 165 context.textAlign = "right"; 166 context.fillText("life: " + life, 480 - 10, 20); 167 //重置样式 168 context.fillStyle = "black"; 169 context.textAlign = "left"; 170 } 171 // 全局函数 来销毁所有的子弹/敌人组件 销毁掉英雄 172 function deleteComponent() { 173 if (hero.destory) { 174 life--; 175 hero.destory = false; 176 if (life === 0) { 177 state = END; 178 } else { 179 hero = new Hero(HERO); 180 } 181 } 182 for (let i = 0; i < hero.bulletList.length; i++) { 183 if (hero.bulletList[i].outOfBounds() || hero.bulletList[i].destory) { 184 hero.bulletList.splice(i, 1); 185 } 186 } 187 for (let i = 0; i < enemies.length; i++) { 188 if (enemies[i].outOfBounds() || enemies[i].destory) { 189 enemies.splice(i, 1); 190 } 191 } 192 } 193 194 //当图片加载完毕时,需要做某些事情 195 bg.addEventListener("load", () => { 196 setInterval(() => { 197 switch (state) { 198 case START: 199 sky.judge(); 200 sky.paint(context); 201 let logo_x = (480 - copyright.naturalWidth) / 2; 202 let logo_y = (650 - copyright.naturalHeight) / 2; 203 context.drawImage(copyright, logo_x, logo_y); 204 break; 205 case STARTING: 206 sky.judge(); 207 sky.paint(context); 208 loading.judge(); 209 loading.paint(context); 210 break; 211 case RUNNING: 212 sky.judge(); 213 sky.paint(context); 214 hero.judge(); 215 hero.paint(context); 216 hero.shoot(context); 217 createComponent(); 218 judgeComponent(); 219 deleteComponent(); 220 paintComponent(); 221 checkHit(); 222 break; 223 case PAUSE: 224 let pause_x = (480 - pause.naturalWidth) / 2; 225 let pause_y = (650 - pause.naturalHeight) / 2; 226 context.drawImage(pause, pause_x, pause_y); 227 break; 228 case END: 229 //给我的画笔设置一个字的样式 230 //后面写出来的字都是这个样式的 231 context.font = "bold 24px 微软雅黑"; 232 context.textAlign = "center"; 233 context.textBaseline = "middle"; 234 context.fillText("GAME_OVER", 480 / 2, 650 / 2); 235 break; 236 } 237 }, 10); 238 }); 239 240 241 //背景切换方法 242 // function changebg() { 243 // console.log("changebg方法被触发") 244 // bg.src = "img/background.png" 245 // } 246 } 247 } 248 export let main_1 = new Main() 249 // export default Main
main.js
5.包的入口
首先看一眼package.json
看main，（这个可以自己调的）
由上图可知，这个包的入口就是index.js了
//index.js export { canvas } from "./config" export { main_1 } from "./main"
config.js中的canvas
export let canvas = document.createElement('canvas'); canvas.width = 480; canvas.height = 650; canvas.ref = canvas; canvas.style = "border: 1px solid red;"
main.js中的main
export let main_1 = new Main()
在这里，用上我们前几天学的语法（嘿嘿）
分包完成
