js實現跳一跳小遊戲
阿新 • • 發佈：2020-08-02
本文例項為大家分享了js實現跳一跳小遊戲的具體程式碼，供大家參考，具體內容如下
效果
流程分析
1、滑鼠按下開始蓄力
2、滑鼠鬆開，根據滑鼠按下的時間讓小球運動相應的距離
3、判斷小球落點是否在平臺內
4、如果在平臺範圍內，產生下一個平臺，分數加10.如果不在遊戲結束，判斷分數是否大於歷史最高分，更新歷史最高分。
動畫效果
5、滑鼠按下小球所在平臺要有蓄力效果，滑鼠鬆開後慢慢恢復，
6、小球在空中的運動曲線要平滑
7、小球和平臺要有3D效果
注意事項
8、運動涉及到計算器和延時器，要注意清除定時器以免擾亂動畫效果
9、滑鼠按下和鬆開為一個完整的流程，在小球運動完之前不能重複觸發
10、確保小球運動的時間與滑鼠按下的時間相關聯
佈局
<div class="wrap"> <h3 class="tit">滑鼠按下蓄力，鬆開滑鼠小球開始運動</h3> <h1>分數：</h1> <h2>歷史最高：</h2> <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),rgba(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) { //產生[min,max]範圍內的整數
return Math.round(Math.random() * (max - min)) + min;
}
function randomColor() { //產生隨機的顏色
var map = [1,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; //記錄滑鼠按下的時間
var timer2 = null; //小球平拋運動定時器
var timer3 = null; //滑鼠按下變形定時器
var num = 0; //遊戲成績
var mouseD = false; //記錄滑鼠是否按下
var mouseUp = true; //記錄滑鼠是否鬆開
var h1 = document.querySelector('h1');
var h2 = document.querySelector('h2');
var max = localStorage.getItem('max');
var div = document.createElement('div'); //建立下一個平臺
h2.innerText = '歷史最高：' + localStorage.getItem('max'); //從瀏覽器資料庫獲取最高分
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(); //隨機顏色
wrap.appendChild(div); //存入平臺
document.onmousedown = function () { //監聽頁面點選事件
if (!mouseD) { //如果滑鼠按下沒有抬起
var blc = document.querySelectorAll('.blc1'); //獲取所有平臺
oldtime = Date.now(); //記錄滑鼠按下的時間
var target = blc[blc.length - 2]; //小球所在的平臺
var down_c = 10; //平臺最大下沉距離
var left = target.offsetLeft; //記錄滑鼠按下後下沉效果之前平臺的left值
var bottom = 40 - target.offsetHeight / 2; //記錄滑鼠按下後下沉效果之前平臺的bottom值
var con_l = con.offsetLeft; //記錄滑鼠按下後下沉效果之前小球的left值
var con_b = 30; //記錄滑鼠按下後下沉效果之前小球的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'; //邊框陰影向裡縮，實現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'; //小球和平臺一起向右下角移動，配合陰影達到3D效果
},1);
mouseD = true; //滑鼠已經按下
mouseUp = false; //滑鼠即將鬆開
}
}
document.onmouseup = function () {
if (!mouseUp) { //如果沒有觸發mousedown事件不會執行以下程式碼
mouseUp = true; //鎖定事件，小球運動結束前不能執行以下程式碼
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; //滑鼠按下的時間
var bottom = 40 - target.offsetHeight / 2 - (click_time * 0.03 > 10 ? 10 : click_time *
0.03); //原來的bottom-下沉的距離，最大為10
timer4 = setInterval(() => { //恢復原來的狀態
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; //小球運動時間為滑鼠按下的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 () { //控制小球運動的時間與滑鼠按下的時間*1.5相等，控制小球運動的時間
clearInterval(timer2); //結束小球運動
x = con.offsetLeft; //獲取運動結束後小球的left值
var blc = document.querySelectorAll('.blc1'); //獲取所有的平臺
if (con.offsetLeft >= wrap.lastElementChild.offsetLeft && con.offsetLeft <= wrap
.lastElementChild.offsetLeft + wrap.lastElementChild.offsetHeight - 10
) { //判斷小球是否位於平臺裡面
num += 10; //每跳一次加10分
h1.innerText = '分數：' + num; //動態展示分數
//生成下一個平臺
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('遊戲結束,分數：' + num);
max = max > num ? max : num;
localStorage.setItem('max',max) //更新最高分
location.reload(); //重新整理當前頁面
}
wrap.scrollLeft = wrap.scrollWidth; //控制滾動條位於最右邊
mouseD = false; //完成一次事件，重新開啟
mouseUp = true; //
},clicktime)
}
}更多有趣的經典小遊戲實現專題，分享給大家：
C++經典小遊戲彙總
python經典小遊戲彙總
python俄羅斯方塊遊戲集合
JavaScript經典遊戲 玩不停
java經典小遊戲彙總
javascript經典小遊戲彙總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。