原生JS實(shí)現(xiàn)的跳一跳小游戲完整實(shí)例
更新時(shí)間：2019年01月27日 09:34:43 作者：Cairo960918
這篇文章主要介紹了原生JS實(shí)現(xiàn)的跳一跳小游戲,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)跳一跳游戲的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了原生JS實(shí)現(xiàn)的跳一跳小游戲。分享給大家供大家參考，具體如下：
以下說的是閑暇編寫的一個(gè)小游戲--跳一跳，類似于微信的跳一跳，大體實(shí)現(xiàn)功能有：
1.先隨機(jī)生成地圖；
2.按住按鈕釋放后完成動(dòng)作并進(jìn)行判斷；
首先po一下代碼；
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跳一跳</title>
<style>
*{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;
}
/* 跳棋運(yùn)動(dòng)動(dòng)畫 */
@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);}
}
</style>
</head>
<body>
<div class="game">
<div class="content">
<!-- 圓柱體 -->
<div class="cylinder">
<!-- 頂部 -->
<div class="top"></div>
<!-- 前面 -->
<div class="front"></div>
<!-- 底部 -->
<div class="bottom"></div>
</div>
</div>
<!-- 跳棋 -->
<div id="chess">
<div style="width:20px;height:20px;border-radius:50%;background:red;position:absolute;margin-left:13px;z-index: 100;"></div>
<div style="width:40px;height:40px;background:blue;overflow: hidden;margin-top: 32px;transform:rotate(67deg) skewX(40deg);">
</div>
</div>
<button id="play">按住它</button>
</div>
</body>
<script>
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];
// 初始函數(shù)，入口函數(shù)
function init(){
draw();
BindEvent();
};
// 生成地圖
function draw(){
var str = '';
for(var n = 0; n < 7; n++){
str +="<div class='cylinder'><div class='top'></div><div class='front'></div><div class='bottom'></div></div >"
}
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';
}
// 綁定事件函數(shù)
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移動(dòng)的比例
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;
}
// 判斷動(dòng)畫是否結(jié)束
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();
</script>
</html>
代碼主要分為用來繪制圓柱體分布的draw()函數(shù)，用來綁定按鈕事件的BindEvent()函數(shù)，用來監(jiān)聽CSS3動(dòng)畫是否結(jié)束的getTransition()函數(shù)，用來判斷棋子是否出界的函數(shù)judeg()函數(shù)。而控制棋子運(yùn)動(dòng)的距離，主要是通過當(dāng)你按下按鈕時(shí)(onmousedown)觸發(fā)一個(gè)定時(shí)器函數(shù)中的(time的加加)，彈起按鈕時(shí)(onmouseup)棋子的left和top運(yùn)動(dòng)距離=設(shè)定像素值*time。
為了讓棋子運(yùn)動(dòng)不那么生硬我添加了一些css3動(dòng)畫（rotate屬性）以及transition屬性。
實(shí)現(xiàn)效果如下：
雖然還有些許不足，但不影響整體功能。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
JavaScript架構(gòu)前端不能沒有監(jiān)控系統(tǒng)原因
這篇文章主要為大家介紹了為什么前端不能沒有監(jiān)控系統(tǒng)的原因，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了這樣回答繼承可能面試官更滿意,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-12-12
JavaScript實(shí)現(xiàn)向右伸出的多級(jí)網(wǎng)頁菜單效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向右伸出的多級(jí)網(wǎng)頁菜單效果,通過javascript調(diào)用頁面元素屬性的動(dòng)態(tài)改變實(shí)現(xiàn)向右展開菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
微信小程序8種數(shù)據(jù)通信的方式小結(jié)
這篇文章主要介紹了微信小程序8種數(shù)據(jù)通信的方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了JavaScript 變量、作用域及內(nèi)存,需要的朋友可以參考下2015-04-04
javascript:;與javascript:void(0)使用介紹
有時(shí)候我們?cè)诰帉慾s過程中，需要觸發(fā)事件而不需要返回值，那么就可能需要這樣的寫法2013-06-06
這篇文章主要介紹了JavaScript中的包裝對(duì)象介紹,存取字符串、數(shù)字、或布爾值的屬性時(shí)創(chuàng)建的臨時(shí)對(duì)象稱作包裝對(duì)象,本文著重講解了什么是包裝對(duì)象,需要的朋友可以參考下2015-01-01
小程序點(diǎn)餐界面添加購物車左右擺動(dòng)動(dòng)畫
這篇文章主要介紹了小程序點(diǎn)餐界面添加購物車左右擺動(dòng)動(dòng)畫，當(dāng)用戶點(diǎn)擊添加到購物車后會(huì)有一個(gè)左右擺動(dòng)的購物車提示效果，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
javascript jquery對(duì)form元素的常見操作詳解
下面小編就為大家?guī)硪黄猨avascript jquery對(duì)form元素的常見操作詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06