小編給大家分享一下原生JS怎么實(shí)現(xiàn)的跳一跳小游戲,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、網(wǎng)站建設(shè)與策劃設(shè)計(jì),景洪網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:景洪等地區(qū)。景洪做網(wǎng)站價(jià)格咨詢:028-86922220
JS是JavaScript的簡(jiǎn)稱,它是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,主要用于web的開發(fā),可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果,讓網(wǎng)頁更加美觀。
具體如下:
以下說的是閑暇編寫的一個(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 ></div> <div > </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)效果如下:
雖然還有些許不足,但不影響整體功能。
以上是“原生JS怎么實(shí)現(xiàn)的跳一跳小游戲”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站標(biāo)題:原生JS怎么實(shí)現(xiàn)的跳一跳小游戲
轉(zhuǎn)載源于:http://bm7419.com/article36/jdedsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷推廣、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、Google、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)