是男人就要坚持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轰炸机（附一个抖音很火的小程序）

浪漫程序员会表白之抖音旋转立方体照片墙

抖音上的时钟屏保，被我改造完用来表白

是男人就要坚持30秒：原生JS小游戏

猜你喜欢