我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

Clickの奇妙冒险

这几天苦于没有好的想法不知道怎么水文章 呸！苦于没有好想法创作新游文章，各路找朋友给我提建议，最终掘金“偷”掘金的一些素材做个游戏，就有了一篇以Click为主角的游戏。为什么是click而不是别的YOYO或者是HAWKING呢？因为你看Click的样子，没有比他更适合打子弹的了，尖尖的头，对称的流线形体~

当然为了能20天内创作出10篇文章这个游戏肯定不能太复杂，所以只是一个简简单单的游戏。先简单讲一下游戏的规则：

1.Click通过射击来消灭bug，并且有bug记数

2.Click在场上每过一秒都要消耗掉一个矿石，初始矿石为10

3.每过4秒就会掉落一个矿石块，Click捡到之后矿石增加5个

4.Click与bug发生碰撞的话会失去5个矿石

游戏的制作

界面的搭建

界面上，我决定采用复古式的游戏掌机的方式展现出来，这样也比较有感觉嘛你说是不是。大概就是下面的情况。代码直接参考在线代码。

按键响应

因为按键的响应主要还是玩家控制的Click做动作，所以直接写一个Click类来封装一些要调用的东西

class Click {
    constructor() {
        this.moveX = 0;
        this.moveY = 0;
        this.clickPlayer = $('.click');

        this.clickX = 50;
        this.clickY = this.clickPlayer.position().top;

        this.move();
        this.bind();
    }

    // 按键控制
    // 这种js按键控制方法全网应该很普遍使用的，应该随便就能查到类似的方法，也是我个人喜欢使用的方法
    bind(){
        document.addEventListener('keydown' ,ev=>{
            if(time) {
                switch (ev.keyCode) {
                    case 37:
                        this.moveX = -1
                        break
                    case 38:
                        this.moveY = -1
                        break
                    case 39:
                        this.moveX = 1
                        break
                    case 40:
                        this.moveY = 1
                        break
                    case 32:
                        new Zidan('right');
                        break
                }
            }
        })

        document.addEventListener('keyup', ev=>{
            if(ev.keyCode == 37||ev.keyCode == 39) this.moveX = 0;
            if(ev.keyCode == 38||ev.keyCode == 40) this.moveY = 0;
        })
    }

    // 移动的函数
    move(){
        // 放个计时器，以60帧的方式移动
        setInterval(() => {
            // 根据按键进行的方向移动
            this.clickX += this.moveX * 2.5;
            this.clickY += this.moveY * 2.5;

            // 判断不可超出边界
            if(this.clickX <0){
                this.clickX = 0
            }
            if(this.clickX > 515){
                this.clickX = 515
            }
            if(this.clickY <0){
                this.clickY = 0
            }
            if(this.clickY > 370){
                this.clickY = 370
            }

            $('.click').css({
                left: this.clickX + 'px',
                top: this.clickY + 'px',
            })
        }, 1000 / 60)
    }
}

物品和BUG生成

先封装好一个通用的类，我取名为item，然后通过穿进去不同的参数来实现创建不同的东西：矿石，Bug，子弹

// 通用的类
class Item {
    constructor(dir) {
        this.dir = dir;
        this.ele = null;
    }

    move(){
        setInterval(() => {
            $(this.ele).css({
                left: $(this.ele).position().left + (this.dir === 'left' ? -2.5 : 0) + (this.dir === 'right' ? 4 : 0)  + "px",
                top: $(this.ele).position().top + (this.dir === 'bottom' ? 2.5 : 0) + "px"
            })

            if(this.dir === 'left' && $(this.ele).position().left <= -85 || this.dir === 'right' && $(this.ele).position().left >= 600){
                $(this.ele).remove();
            }

            if(this.dir === 'bottom' && $(this.ele).position().top >= 400){
                $(this.ele).remove();
            }
        }, 1000 / 60)
    }
}

// Bug生成
class Bug extends Item{
    constructor(dir) {
        super(dir);
        this.dir = dir;

        this.create();
    }

    create(){
        this.ele = $(`<div class="ele bug"><img src="images/hbug.png" alt="123"></div>`).css({
            left: '600px',
            top: Math.random() * 200 + 100 + 'px'
        })
        $('.map').append(this.ele);
        this.move();
    }
}

// 矿石生成
class Ore extends Item{
    constructor(dir) {
        super(dir);
        this.dir = dir;

        this.create();
    }

    create(){
        this.ele = $(`<div class="ele ore"><img src="images/矿石.png" alt="123"></div>`).css({
            left: Math.random() * 500 +'px',
            top: '-100px'
        })
        $('.map').append(this.ele);
        this.move();
    }
}

// Click打的子弹生成
class Zidan extends Item{
    constructor(dir) {
        super(dir);
        this.dir = dir;
        this.create();
    }

    create(){
        this.ele = $(`<div class="zidan"></div>`).css({
            position: 'absolute',
            width: '30px',
            height: '5px',
            backgroundColor: "#20DFB0",
            left: $('.click').position().left + 85 + "px",
            top: $('.click').position().top + 20 + "px"
        })
        $('.map').append(this.ele);
        this.move();
    }
}

碰撞

上面生成了所有的东西，接下来就是判断他们怎么碰撞了，原理也很简单一看便知

// 判断碰撞的函数
function knock(node1, node2) {
    let l1 = $(node1).position().left;
    let r1 = $(node1).position().left+$(node1).width();
    let t1 = $(node1).position().top;
    let b1 = $(node1).position().top+$(node1).height();

    let l2 = $(node2).position().left;
    let r2 = $(node2).position().left+$(node2).width();
    let t2 = $(node2).position().top;
    let b2 = $(node2).position().top+$(node2).height();
    if(l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1){
        return false;
    }else{
        return true;
    }
}

// 实现碰撞后执行的东西
function knockTime(){
    setInterval(() => {
        for(let i=0;$('.zidan').length > i;i++){
            for(let j=0;$('.bug').length > j;j++){
                if(this.knock($('.zidan').eq(i), $('.bug').eq(j))){
                    $('.zidan').eq(i).remove();
                    $('.bug').eq(j).remove();
                    bug+=1;
                }
            }
        }

        for(let j=0;$('.bug').length > j;j++){
            if(this.knock($('.click'), $('.bug').eq(j))){
                $('.bug').eq(j).remove();
                ore-=5;
            }
        }

        for(let j=0;$('.ore').length > j;j++){
            if(this.knock($('.click'), $('.ore').eq(j))){
                $('.ore').eq(j).remove();
                ore+=5;
            }
        }
        appendSpan()
    }, 1000 / 60)
}

这上面其实还能简化一下的

在线代码

上面最基本的功能点就已经全部拿出来了，有点水，时间紧迫也没有办法更精细的进行介绍，因为要花时间去想写什么游戏，功能写出来也需要时间，20天写10篇还是太困难了。以下直接放出来所有的代码供大家进行参考，其实代码也足够节俭，功能点也都标注了

如果大家喜欢的话，请为我的文章点点关注点点赞，瑞斯败！jym