【Golang语言社区】H5游戏开发从零开始开发一款H5小游戏(三) 攻守阵营，赋予粒子新的生命

//index.js
function createEnemy(numEnemy) {
    enemys = [];
    for (let i = 0; i < numEnemy; i++) {
        const x = Math.random() * map.width + map.width;
        const y = Math.random() * map.height;
        enemys.push(new Enemy({x, y}));
    }
}
接下来只要在update中给粒子一个位移偏量speed，粒子就会做匀速运动。speed越大，速度越快。
update() {
    this.x -= this.speed; //speed为位移偏量
    this.y += this.speed;
}
由于红色粒子看起来是无穷无尽的，而我们只是创建了有限个粒子，所以需要在粒子离开视界的时候重置粒子的位置。视界之外的位置开始运动，并保证该位置的随机性。
//Enemy.js
update() {
    this.x -= this.speed; //speed为位移偏量
    this.y += this.speed;
    //粒子从左边离开视界
    if (this.x < -10) {
        this.x = map.width + 10 + Math.random() * 30;
    }
    //粒子从底部离开视界
    if (this.y > map.height + 10) {
        this.y = -10 + Math.random() * -30;
    }
}

//Player.js
if (isMobile) {
    self.moveTo(self.x, self.y);
    window.addEventListener('touchstart', e => {
        e.preventDefault();
        self.touchStartX = e.touches[0].pageX;
        self.touchStartY = e.touches[0].pageY;
    });
    //手机上用位移计算位置
    window.addEventListener('touchmove', e => {
        e.preventDefault();
        let moveX = e.touches[0].pageX - self.touchStartX;
        let moveY = e.touches[0].pageY - self.touchStartY;
        self.moveTo(self.x + moveX, self.y + moveY);
        self.touchStartX = e.touches[0].pageX;
        self.touchStartY = e.touches[0].pageY;
    });
} else {
    let left = (document.getElementById("game").clientWidth - 
            document.getElementById("world").clientWidth)/2;
    window.addEventListener('mousemove', (e = window.event) => {
        self.moveTo(e.clientX - left - 10, e.clientY - 30);
    });
}

//Player.js
render() {
    self.recordTail();
}
recordTail() {
    let self = this;
    //保持尾巴粒子个数不变
    if (self.tail.length > self.tailLen) {
        self.tail.splice(0, self.tail.length - self.tailLen);
    }
    self.tail.push({
        x: self.x,
        y: self.y
    });
}
这样只是记录了一些尾巴上点的位置，我们需要把各个点连起来。这里需要用到lineTo方法。
具体代码实现：
//Player.js
renderTail() {
    let self = this;
    let tails = self.tail, prevPot, nextPot;
    map.ctx.beginPath();
    map.ctx.lineWidth = 2;
    map.ctx.strokeStyle = self.color;
    for(let i = 0; i < tails.length - 1; i++) {
        prevPot = tails[i];
        nextPot = tails[i + 1];
        if (i === 0) {
            map.ctx.moveTo(prevPot.x, prevPot.y);
        } else {
            map.ctx.lineTo(nextPot.x, nextPot.y);
        }
        //保持尾巴最小长度，并有波浪效果
        prevPot.x -= 1.5;
        prevPot.y += 1.5;
    }
    map.ctx.stroke();
    self.renderLife();
}

//Player.js
//渲染生命值节点
renderLife() {
    let self = this;
    for(let j = 1; j <= self.livesPoint.length; j++) {
        let tailIndex = j * 5;
        let life = self.livesPoint[j - 1];
        life.render(self.tail[tailIndex]);
    }
}
//Life.js
render(pos) {
    let self = this;
    //粒子撞击后不渲染
    if (!this.dead) {
        map.ctx.beginPath();
        map.ctx.fillStyle = self.color;
        map.ctx.arc(pos.x, pos.y, 3, 0, 2 * Math.PI, false);
        map.ctx.fill();
    }
}
Skill粒子
Skill粒子实际上可以看做是Enemy中的一种特殊粒子，具有和Enemy一样的运动规律。代码中的Skill也是继承自Enemy的（这有点奇怪..）
Skill粒子具有不同的属性和颜色，实现起来也很简单。
//Skill.js
const COLORS = {
    shield: '#007766',
    gravity: '#225599',
    time: '#665599',
    minimize: '#acac00',
    life: '#009955'
};
const TEXTS = {
    shield: '盾',
    gravity: '力',
    time: '慢',
    minimize: '小',
    life: '命'
};
render() {
    var self = this;
    map.ctx.beginPath();
    self.color = COLORS[self.type];
    map.ctx.fillStyle = self.color;
    map.ctx.arc(self.x, self.y, self.radius, 0, Math.PI*2, false);
    map.ctx.fill(); 
}