您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了js如何實(shí)現(xiàn)跳一跳小游戲,內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
效果
流程分析
1、鼠標(biāo)按下開始蓄力
2、鼠標(biāo)松開,根據(jù)鼠標(biāo)按下的時間讓小球運(yùn)動相應(yīng)的距離
3、判斷小球落點(diǎn)是否在平臺內(nèi)
4、如果在平臺范圍內(nèi),產(chǎn)生下一個平臺,分?jǐn)?shù)加10.如果不在游戲結(jié)束,判斷分?jǐn)?shù)是否大于歷史最高分,更新歷史最高分。
動畫效果
5、鼠標(biāo)按下小球所在平臺要有蓄力效果,鼠標(biāo)松開后慢慢恢復(fù),
6、小球在空中的運(yùn)動曲線要平滑
7、小球和平臺要有3D效果
注意事項(xiàng)
8、運(yùn)動涉及到計算器和延時器,要注意清除定時器以免擾亂動畫效果
9、鼠標(biāo)按下和松開為一個完整的流程,在小球運(yùn)動完之前不能重復(fù)觸發(fā)
10、確保小球運(yùn)動的時間與鼠標(biāo)按下的時間相關(guān)聯(lián)
布局
<div class="wrap"> <h4 class="tit">鼠標(biāo)按下蓄力,松開鼠標(biāo)小球開始運(yùn)動</h4> <h2>分?jǐn)?shù):</h2> <h3>歷史最高:</h3> <div class="con"></div> <div class="blc1"></div> </div>
樣式
* { margin: 0; padding: 0; } .wrap { height: 500px; position: relative; overflow: hidden; } .con { background-color: hotpink; /*左邊的沒有背景色,右邊的加了背景色*/ background-image: radial-gradient(10px at 4px 4px, rgba(0, 0, 0, 0), rgba(2, 2, 2, 1)); width: 20px; height: 20px; border-radius: 50%; position: absolute; left: 30px; bottom: 30px; z-index: 2; } .blc1 { box-shadow: 10px 10px 7px #000; border-radius: 30%; width: 40px; height: 40px; background-color: midnightblue; position: absolute; left: 20px; bottom: 20px; } .tit { text-align: center; }
js
function randomInt(min, max) { //產(chǎn)生[min,max]范圍內(nèi)的整數(shù) return Math.round(Math.random() * (max - min)) + min; } function randomColor() { //產(chǎn)生隨機(jī)的顏色 var map = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']; var str = '#'; for (var i = 0; i < 6; i++) { var index = randomInt(0, 15); str += map[index]; } return str; } var wrap = document.querySelector('.wrap'); var con = document.querySelector('.con'); var oldtime = 0; //記錄鼠標(biāo)按下的時間 var timer2 = null; //小球平拋運(yùn)動定時器 var timer3 = null; //鼠標(biāo)按下變形定時器 var num = 0; //游戲成績 var mouseD = false; //記錄鼠標(biāo)是否按下 var mouseUp = true; //記錄鼠標(biāo)是否松開 var h2 = document.querySelector('h2'); var h3 = document.querySelector('h3'); var max = localStorage.getItem('max'); var div = document.createElement('div'); //創(chuàng)建下一個平臺 h3.innerText = '歷史最高:' + localStorage.getItem('max'); //從瀏覽器數(shù)據(jù)庫獲取最高分 div.style.left = 35 + randomInt(30, 60) + 'px'; //初始化平臺距離左邊的值 var div_sex = randomInt(30, 70); //初始化平臺大小,范圍 div.style.bottom = 40 - div_sex / 2 + 'px'; //平臺距離底部為小球底部減去平臺 div.style.height = div_sex + 'px'; div.style.width = div_sex + 'px'; div.className = 'blc1'; //添加初始化樣式 div.style.backgroundColor = randomColor(); //隨機(jī)顏色 wrap.appendChild(div); //存入平臺 document.onmousedown = function () { //監(jiān)聽頁面點(diǎn)擊事件 if (!mouseD) { //如果鼠標(biāo)按下沒有抬起 var blc = document.querySelectorAll('.blc1'); //獲取所有平臺 oldtime = Date.now(); //記錄鼠標(biāo)按下的時間 var target = blc[blc.length - 2]; //小球所在的平臺 var down_c = 10; //平臺最大下沉距離 var left = target.offsetLeft; //記錄鼠標(biāo)按下后下沉效果之前平臺的left值 var bottom = 40 - target.offsetHeight / 2; //記錄鼠標(biāo)按下后下沉效果之前平臺的bottom值 var con_l = con.offsetLeft; //記錄鼠標(biāo)按下后下沉效果之前小球的left值 var con_b = 30; //記錄鼠標(biāo)按下后下沉效果之前小球的bottom值 timer3 = setInterval(() => { //下沉效果定時器 down_c -= 0.03; //每一次變化0.03px if (down_c <= 0) { //最小值為0 down_c = 0.03; } target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c + 'px #000'; //邊框陰影向里縮,實(shí)現(xiàn)3D效果 target.style.left = left + 10 - down_c + 'px'; target.style.bottom = bottom + -10 + down_c + 'px'; con.style.left = con_l + 10 - down_c + 'px'; con.style.bottom = con_b - 10 + down_c + 'px'; //小球和平臺一起向右下角移動,配合陰影達(dá)到3D效果 }, 1); mouseD = true; //鼠標(biāo)已經(jīng)按下 mouseUp = false; //鼠標(biāo)即將松開 } } document.onmouseup = function () { if (!mouseUp) { //如果沒有觸發(fā)mousedown事件不會執(zhí)行以下代碼 mouseUp = true; //鎖定事件,小球運(yùn)動結(jié)束前不能執(zhí)行以下代碼 clearInterval(timer3); //清除下沉動畫 var timer4 = null; //上升動畫 var blc = document.querySelectorAll('.blc1'); //獲取所有平臺 var target = blc[blc.length - 2]; //同下沉動畫 var left = target.offsetLeft; var down_time = 0; var down_c = 0; var click_time = Date.now() - oldtime; //鼠標(biāo)按下的時間 var bottom = 40 - target.offsetHeight / 2 - (click_time * 0.03 > 10 ? 10 : click_time * 0.03); //原來的bottom-下沉的距離,最大為10 timer4 = setInterval(() => { //恢復(fù)原來的狀態(tài) down_time++; if (down_time > click_time) { clearInterval(timer4); } down_c += 0.03; if (down_c >= 10) { down_c = 10; } target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c + 'px #000'; target.style.left = left - down_c + 'px'; target.style.bottom = bottom + down_c + 'px'; }, 1); var clicktime = (Date.now() - oldtime) * 1.5; //小球運(yùn)動時間為鼠標(biāo)按下的1.5倍,減少蓄力時間 var time2 = 0; //小球跳一跳計時器 var y = 30; //小球初始bottom值 var x = con.offsetLeft; //小球初始left值 clearTimeout(tout); //清除延時器 timer2 = setInterval(() => { //小球彈跳計時器 time2 += 20; y = 30 + clicktime / 50 * Math.sin(time2 * Math.PI / clicktime); //將總的時間分成180份通過sin(0,180)從0到0的特性完成一個圓滑的拋物線 con.style.left = x + time2 / 20 + 'px'; con.style.bottom = y + 'px'; }, 20); var tout = setTimeout(function () { //控制小球運(yùn)動的時間與鼠標(biāo)按下的時間*1.5相等,控制小球運(yùn)動的時間 clearInterval(timer2); //結(jié)束小球運(yùn)動 x = con.offsetLeft; //獲取運(yùn)動結(jié)束后小球的left值 var blc = document.querySelectorAll('.blc1'); //獲取所有的平臺 if (con.offsetLeft >= wrap.lastElementChild.offsetLeft && con.offsetLeft <= wrap .lastElementChild.offsetLeft + wrap.lastElementChild.offsetHeight - 10 ) { //判斷小球是否位于平臺里面 num += 10; //每跳一次加10分 h2.innerText = '分?jǐn)?shù):' + num; //動態(tài)展示分?jǐn)?shù) //生成下一個平臺 var div_sex2 = randomInt(40, 60); var newdiv = document.createElement('div'); newdiv.style.bottom = 40 - div_sex2 / 2 + 'px'; newdiv.style.height = div_sex2 + 'px'; newdiv.style.width = div_sex2 + 'px'; newdiv.style.left = x + randomInt(80, 120) + 'px'; newdiv.style.backgroundColor = randomColor(); newdiv.className = 'blc1'; wrap.appendChild(newdiv); } else { alert('游戲結(jié)束,分?jǐn)?shù):' + num); max = max > num ? max : num; localStorage.setItem('max', max) //更新最高分 location.reload(); //刷新當(dāng)前頁面 } wrap.scrollLeft = wrap.scrollWidth; //控制滾動條位于最右邊 mouseD = false; //完成一次事件,重新開啟 mouseUp = true; // }, clicktime) } }
以上就是關(guān)于js如何實(shí)現(xiàn)跳一跳小游戲的內(nèi)容,如果你們有學(xué)習(xí)到知識或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。