是男人就要堅持30秒：原生JS小遊戲

在繼之前完成的數個JavaScript demo後，我發現我還沒有寫過JS小遊戲，這次呢，我就來分享一個，非常經典的“是男人就要堅持30s”的小遊戲。當然我肯定 is a man，嘿嘿嘿。閒言少許，先看看效果圖吧：

這個小demo的源代碼在 GitHub 上，地址在文章最後！

整個項目的html非常簡單，只有兩個div

<div class="outer">
    <div class="white"></div>
</div>

那麼 css 樣式的話，我也是簡單的羅列一下，主要是要給黃色和白色小球設置爲絕對定位和顏色，非常簡單。

.white {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    left: 195px;
    top: 195px;
    cursor: grabbing;
}
.yellow {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(234, 250, 8, 0.8);
    top: 0;
    left: 0;
}

首先我們來初始化一下變量，需要注意的是movePlus中存放的是小球的移動信息等。初始化後調用各個方法，其中 createBall 是創建黃色小球的方法。

function init() {
    this.creatBall(this.movePlus);
    this.dragwhiteBall(this.movePlus);
    this.timerRun();
}

那麼我們再來看看 createBall 方法，這個方法主要是創建黃色小球，並且搞一個定時器，讓我們可以每隔一段時間產生一個黃色小球，增加遊戲難度。

function creatBall(obj) {
    var plus = obj;
    function Yellow(plus) {
        //黃色小球基礎信息
        this.ball = document.createElement('div');
        this.ball.className = 'yellow';
        plus.outer.appendChild(this.ball);
        this.sumWidth = Math.floor(Math.random() * (plus.iWidth - this.ball.offsetWidth));
        this.ball.style.left = this.sumWidth + 'px';
        //小球橫向移動速度
        this.speedX = Math.floor(Math.random() * plus.ispeedX) + 1;
        //小球縱向移動速度
        this.speedY = Math.floor(Math.random() * plus.ispeedY) + 1;
        this.iWidth = plus.iWidth;
        this.iHeight = plus.iHeight;
    }
    var that = this;
    //創建黃色小球
    var yellowBall = new Yellow(plus);
    //將黃色小球添加到數組中
    this.yellowArr.push(yellowBall);
    //寫個定時器，每隔2s產生一個黃色小球
    this.creatTimer = setInterval(function () {
        var yellowBall = new Yellow(plus);
        that.yellowArr.push(yellowBall);
    }, 2000)

    this.moveBall();
}

下面這個 moveBall 方法呢是用來移動小球的，需要注意的是，我們的小球移動到邊界時，該方向上的移動速度要取反，這樣呢就可以是一個碰撞效果了。

function moveBall() {
    var that = this;
    //黃色小球不停移動的
    this.gotimer = setInterval(function () {
        for (var i = 0; i < that.yellowArr.length; i++) {
            //在進行移動前，判斷下是否觸碰了白色小球
            that.crashCheck(that.yellowArr[i]);
            //移動黃色小球
            var newLeft = that.yellowArr[i].speedX + that.yellowArr[i].ball.offsetLeft;
            var newTop = that.yellowArr[i].speedY + that.yellowArr[i].ball.offsetTop;
            //如果碰到牆壁，該方向的速度要取反
            if (newLeft < 0 || newLeft > (that.yellowArr[i].iWidth - that.yellowArr[i].ball.offsetWidth)) {
                that.yellowArr[i].speedX *= -1;
            } else if (newTop < 0 ||newTop > (that.yellowArr[i].iHeight - that.yellowArr[i].ball.offsetHeight)) {
                that.yellowArr[i].speedY *= -1;
            }
            //重新設置小球的位置
            that.yellowArr[i].ball.style.left = newLeft + 'px';
            that.yellowArr[i].ball.style.top = newTop + 'px';
        }
    }, 50)
}

我們再看看 dragwhiteBall 方法，這個方法其實是一個鼠標拖拽的效果 ，可以說是非常簡單的一個效果，而且實現的方式真的好多呀，這裏我就不再多贅述了，給你個眼神自己體會

function dragwhiteBall(obj) {
    //鼠標拖拽效果
    var that = this;
    this.whiteBall.onmousedown = function (e) {
        var ePageX = e.pageX;
        var ePageY = e.pageY;
        document.onmousemove = function (e) {
            that.whiteBall.style.left = e.pageX - ePageX + that.whiteBall.offsetLeft + 'px';
            that.whiteBall.style.top = e.pageY - ePageY + that.whiteBall.offsetTop + 'px';
            ePageX = e.pageX;
            ePageY = e.pageY;
            if (that.whiteBall.offsetLeft < 0 && that.flag) {
                //如果超出了左邊邊線,遊戲結束
                that.gameOver()
            } else if (that.whiteBall.offsetLeft > (obj.iWidth - that.whiteBall.offsetWidth) && that.flag) {
                 //如果超出了右邊邊線,遊戲結束
                that.gameOver()
            } else if (that.whiteBall.offsetTop < 0 && that.flag) {
                //如果超出了上邊邊線,遊戲結束
                that.gameOver()
            } else if (that.whiteBall.offsetTop > (obj.iHeight - that.whiteBall.offsetHeight) && that.flag) {
                //如果超出了下邊邊線,遊戲結束
                that.gameOver()
            }
        }
        document.onmouseup = function (e) {
            document.onmousemove = null;
        }
    }
}

檢查黃色小球是否碰到了白色小球，如果是的話，遊戲結束！

function crashCheck(yellow) {
    //判斷下白色小球是否碰到黃色小球，是的話，遊戲結束
    var yellowX1 = yellow.ball.offsetLeft + Math.floor(yellow.ball.offsetWidth / 2);
    var yellowY1 = yellow.ball.offsetTop + Math.floor(yellow.ball.offsetWidth / 2);
    var whiteX2 = this.whiteBall.offsetLeft + Math.floor(this.whiteBall.offsetWidth / 2);
    var whiteY2 = this.whiteBall.offsetTop + Math.floor(this.whiteBall.offsetWidth / 2);
    var dx = Math.abs(yellowX1 - whiteX2);
    var dy = Math.abs(yellowY1 - whiteY2);
    var dis = Math.floor(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)));
    var R = this.whiteBall.offsetWidth / 2 + yellow.ball.offsetWidth / 2;
    if (dis < R && this.flag) {
        this.gameOver()
    }
}

這個項目已經上傳到github上啦，有需要的自己去下載一下。

https://github.com/young-monk/Insist-on-30-seconds

附之前作品精選：

java代碼30行實現用我愛你重繪女朋友美照（我對你的愛，在每一個字裏行間）

用vb語言七行寫一個QQ轟炸機（附一個抖音很火的小程序）

浪漫程序員會表白之抖音旋轉立方體照片牆

抖音上的時鐘屏保，被我改造完用來表白