好家伙,
我們先來嘗試完成一個最簡單的功能
正面buff:
1.消滅全圖敵機
我們要先找一個好看一點的素材
把背景弄成透明的(搞了好久),感謝度娘的技術支持Photoshop中如何把圖片的背景變成透明的-百度經驗 (baidu.com)
你問我為什么是籃球?
只因你太美
為了方便測驗,我們先弄個測驗版本出來
// 全域函式 隔一段時間就來初始化一架敵機/獎勵
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));
// }
if (ran < 30) {
enemies.push(new Enemy(E1));
} else {
awards.push(new award(C1));
}
ENEMY_LASTTIME = currentTime;
}
}
(將原本的敵機生產流程,變成只生產小敵機和獎勵類)
這么做是為了方便測驗
來吧,
1.獎勵類圖片素材路徑
c1: "img/lanqiu.jpg"
const c1 = createImage(IMAGES.c1);
2.獎勵類配置項
const C1 = {
type: 4,
width: 75,
height: 75,
life: 1,
score: 1,
img: c1,
minSpeed: 5,
maxSpeed: 10
};
3.獎勵類
這個獎勵類的實作邏輯其實和敵機一樣(沒有影片渲染,甚至比敵機類更簡單一點)
//初始化獎勵類
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;
// }
// }
}
4.全域渲染
// 全域函式 來繪制所有的子彈/敵人組件 繪制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 = "red";
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";
}
5.全域移動
// 全域函式 來判斷所有的子彈/敵人組件 "負責移動"
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();
}
}
6.全域碰撞判斷
// 碰撞檢測函式
//此處的碰撞檢測包括
//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();
}
}
}
}
看這里就好
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;
}
}
(全刪了不就好了,剛開始是想著一個個刪的)
來看看效果:
(非常nice)
現在我們調回上線版本
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;
}
}
(隨機獎勵給個百分之五吧,不然太bug了)
來看看效果:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509048.html
標籤：其他
上一篇：2021年3月-第03階段-前端基礎-JavaScript基礎語法-JavaScript基礎第01天
下一篇：CSS 筆記