好家伙,

我继续尝试着将我的飞机大战使用ES6模块化分离开来,出了点问题

(资料图)

1.出现问题:

edge,chrome等一系列浏览器,会为了安全,禁止你跨域访问

目录如下:

主程序

index.html

main_1.js

main.js

完整代码如下:

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

然后打开index.html

直接报错,跨域问题

2.解决问题:

网上搜了一大片问题解决方案:

方案一:使用npm模块 anywhere

anywhere可以将你的当前目录变成一个静态文件服务器的根目录。

全局安装:

npm install anywhere -g

在index.html目录下;

anywhere

随后自动打开网页,不再报错

方案二:

使用Live Server插件

安装后,直接在右下角启动服务

方案三:

买个服务器,部署到服务器上

.....