本文實例講述了原生JS實現的跳一跳小游戲。分享給大家供大家參考，具體如下：

以下說的是閑暇編寫的一個小游戲--跳一跳，類似于微信的跳一跳，大體實現功能有：

1.先隨機生成地圖；

2.按住按鈕釋放后完成動作并進行判斷；

首先po一下代碼；

代碼如下：

跳一跳

*{padding: 0;margin: 0;}

.game{

position: relative;

width: 800px;

height: 400px;

border: 1px solid black;

margin: 0 auto;

}

.game .content{

position: absolute;

width: 700px;

height: 400px;

left: 0;

top: 0;

}

.game #chess{

position: absolute;

width: 40px;

height: 48px;

overflow: hidden;

z-index:99;

transition-property: all;

}

.cylinder{

position: relative;

width: 70px;

height: 101px;

float: left;

}

.cylinder .top{

position: absolute;

width: 70px;

height: 35px;

border-radius: 50%;

background: yellow;

z-index: 4;

}

.cylinder .front{

position: absolute;

width: 70px;

height: 70px;

background: black;

margin-top: 17px;

z-index: 3;

}

.cylinder .bottom{

position: absolute;

width: 70px;

height: 35px;

border-radius: 50%;

background: black;

margin-top: 65px;

z-index: 4;

}

button{

position: absolute;

width: 80px;

height: 30px;

font-size: 16px;

text-align: center;

line-height: 30px;

border-radius: 20%;

bottom: 10px;

right: 10px;

}

.move{

animation-name: jump;

}

/* 跳棋運動動畫 */

@keyframes jump{

0%{transform: rotate(0deg);}

10%{transform: rotate(36deg);}

20%{transform: rotate(72deg);}

30%{transform: rotate(108deg);}

40%{transform: rotate(144deg);}

50%{transform: rotate(180deg);}

60%{transform: rotate(216deg);}

70%{transform: rotate(252deg);}

80%{transform: rotate(288deg);}

90%{transform: rotate(324deg);}

100%{transform: rotate(360deg);}

}

@-webkit-keyframes jump{

0%{transform: rotate(0deg);}

10%{transform: rotate(36deg);}

20%{transform: rotate(72deg);}

30%{transform: rotate(108deg);}

40%{transform: rotate(144deg);}

50%{transform: rotate(180deg);}

60%{transform: rotate(216deg);}

70%{transform: rotate(252deg);}

80%{transform: rotate(288deg);}

90%{transform: rotate(324deg);}

100%{transform: rotate(360deg);}

}

@-o-keyframes jump{

0%{transform: rotate(0deg);}

10%{transform: rotate(36deg);}

20%{transform: rotate(72deg);}

30%{transform: rotate(108deg);}

40%{transform: rotate(144deg);}

50%{transform: rotate(180deg);}

60%{transform: rotate(216deg);}

70%{transform: rotate(252deg);}

80%{transform: rotate(288deg);}

90%{transform: rotate(324deg);}

100%{transform: rotate(360deg);}

}

@-moz-keyframes jump{

0%{transform: rotate(0deg);}

10%{transform: rotate(36deg);}

20%{transform: rotate(72deg);}

30%{transform: rotate(108deg);}

40%{transform: rotate(144deg);}

50%{transform: rotate(180deg);}

60%{transform: rotate(216deg);}

70%{transform: rotate(252deg);}

80%{transform: rotate(288deg);}

90%{transform: rotate(324deg);}

100%{transform: rotate(360deg);}

}

按住它

var time = 0,score = 0,prev = 1;

var cylinders = document.getElementsByClassName('cylinder');

var chess = document.getElementById('chess');

var arrLeft = [10,20,30,50];

var arrTop = [210,290];

// 初始函數，入口函數

function init(){

draw();

BindEvent();

};

// 生成地圖

function draw(){

var str = '';

for(var n = 0; n < 7; n++){

str +="

}

document.getElementsByClassName('content')[0].innerHTML = str;

for(var m = 0; m < 7; m++){

var Left = arrLeft[Math.floor(Math.random() *arrLeft.length)];

var Top = arrTop[Math.floor(Math.random() * arrTop.length)];

cylinders[m].style.marginLeft = Left + 'px';

cylinders[m].style.marginTop = Top + 'px';

}

// 畫棋子

chess.style.marginTop = cylinders[0].offsetTop - 25 + 'px';

chess.style.marginLeft = cylinders[0].offsetLeft + 13 + 'px';

}

// 綁定事件函數

function BindEvent(){

document.getElementById('play').onmousedown = function () {

var timer = setInterval(function () {

time++;

}, 100);

document.getElementById('play').onmouseup = function () {

clearInterval(timer);

chess.classList.add('move');

chess.style.animationDuration = time * 0.1 + 's';

chess.style.transitionDuration = time * 0.1 + 's';

if (cylinders[prev - 1].offsetTop > cylinders[prev].offsetTop) {

var dx = setTran(prev - 1,prev);

chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';

chess.style.marginTop = chess.offsetTop + time * 15 * dx + 'px';

} else if (cylinders[prev - 1].offsetTop < cylinders[prev].offsetTop) {

var dy = setTran(prev - 1, prev);

chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';

chess.style.marginTop = chess.offsetTop + time * 15 * dy + 'px';

}else if(cylinders[prev - 1].offsetTop == cylinders[prev].offsetTop){

chess.style.marginTop = chess.offsetTop + 'px';

chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';

}

chess.addEventListener(getTransition(), function () {

chess.classList.remove('move');

time = 0;

judeg();

chess.removeEventListener(getTransition(), arguments.callee, false);

}, false);

};

};

};

// top和left移動的比例

function setTran(prev,next) {

var d_Top = cylinders[prev].offsetTop - cylinders[next].offsetTop;

var d_Left = cylinders[prev].offsetLeft - cylinders[next].offsetLeft;

return d_Top/d_Left;

}

// 判斷動畫是否結束

function getTransition() {

var t;

var transitions = {

'transition': 'transitionend',

'OTransition': 'oTransitionEnd',

'MozTransition': 'transitionend',

'WebkitTransition': 'webkitTransitionEnd'

};

for (t in transitions) {

if (chess.style[t] !== undefined) {

return transitions[t];

}

}

};

// 判斷是否跳出邊界

function judeg() {

for(; prev < cylinders.length;){

// 判斷條件

var e_Left = chess.offsetLeft > cylinders[prev].offsetLeft -20 && chess.offsetLeft < cylinders[prev].offsetLeft + 90;

var e_Top = chess.offsetTop + 48 > cylinders[prev].offsetTop && chess.offsetTop + 48 < cylinders[prev].offsetTop + 35;

if( e_Left && e_Top ){

score++;

if(prev >= cylinders.length){

prev = 1;

}else{

prev++;

}

break;

}else{

alert('you lost');

break;

}

}

}

init();

代碼主要分為用來繪制圓柱體分布的draw()函數，用來綁定按鈕事件的BindEvent()函數，用來監聽CSS3動畫是否結束的getTransition()函數，用來判斷棋子是否出界的函數judeg()函數。而控制棋子運動的距離，主要是通過當你按下按鈕時(onmousedown)觸發一個定時器函數中的(time的加加)，彈起按鈕時(onmouseup)棋子的left和top運動距離=設定像素值*time。

為了讓棋子運動不那么生硬我添加了一些css3動畫(rotate屬性)以及transition屬性。

實現效果如下：

雖然還有些許不足，但不影響整體功能。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設計有所幫助。

總結

以上是生活随笔為你收集整理的php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。