在繼之前完成的數個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
附之前作品精選: