在继之前完成的数个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
附之前作品精选: