<!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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
html,body{
height:100%;
}
#houseBox {
}
.house {
position: absolute;
border: 1px solid red
}
#chess {
position: absolute;
/*border: 1px solid black;*/
}
@keyframes jump {
0% {
bottom: 0px;
left: 0px;
}
100% {
bottom: 100px;
left: 100px;
}
}
@keyframes move {
0% {
bottom: 0px;
left: 0px;
}
100% {
bottom: 100px;
left: 100px;
}
}
@keyframes fadeInOut {
0% {
opacity:0;
}
25% {
opacity:0.1;
}
50% {
opacity: 0.5;
}
75% {
opacity:1;
}
}
#result{
position:absolute;
top:0;
left:0
}
</style>
<link rel="stylesheet">
</head>
<body>
<div style="postion:relative;">
<div id="result">
<div id="gameScore"></div>
<div id="gameState"></div>
</div>
<div id="houseBox" style=" position:absolute;left:0px;">
<div style="width:20px;height:20px;">
<svg id="chess" style="width:20px;height:20px" t="1579240209615" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="561" width="200" height="200">
<path d="M795.02336 418.02752a15.9488 15.9488 0 0 1-15.95392-15.95392c0-149.71904-121.79968-271.52384-271.51872-271.52384C357.8368 130.55488 236.032 252.35968 236.032 402.07872a15.95392 15.95392 0 1 1-31.90784 0c0-167.31136 136.1152-303.43168 303.42144-303.43168 167.31136 0 303.42656 136.12032 303.42656 303.43168a15.94368 15.94368 0 0 1-15.9488 15.9488zM220.07808 808.89344a15.95392 15.95392 0 0 1-15.95392-15.9488v-191.16544a15.9488 15.9488 0 0 1 31.90784 0v191.16544a15.9488 15.9488 0 0 1-15.95392 15.9488z"
fill="#2E0C08" p-id="562"></path>
<path d="M220.07808 564.56192a15.95392 15.95392 0 0 1-15.95392-15.9488v-146.5344a15.95392 15.95392 0 1 1 31.90784 0v146.5344a15.95392 15.95392 0 0 1-15.95392 15.9488zM795.02336 851.43552a15.9488 15.9488 0 0 1-15.95392-15.9488v-433.408a15.95392 15.95392 0 1 1 31.90272 0v433.408a15.94368 15.94368 0 0 1-15.9488 15.9488z"
fill="#2E0C08" p-id="563"></path>
<path d="M386.75968 407.54688m-65.46432 0a65.46432 65.46432 0 1 0 130.92864 0 65.46432 65.46432 0 1 0-130.92864 0Z"
fill="#CF3924" p-id="564"></path>
<path d="M386.75968 488.96512c-44.89216 0-81.41312-36.52096-81.41312-81.41312s36.52608-81.41824 81.41312-81.41824c44.89216 0 81.41312 36.52608 81.41312 81.41824s-36.52096 81.41312-81.41312 81.41312z m0-130.92864c-27.29984 0-49.5104 22.21056-49.5104 49.5104s22.21056 49.5104 49.5104 49.5104c27.30496 0 49.5104-22.21056 49.5104-49.5104s-22.20544-49.5104-49.5104-49.5104z"
fill="#2E0C08" p-id="565"></path>
<path d="M385.61792 404.05504m-27.8784 0a27.8784 27.8784 0 1 0 55.7568 0 27.8784 27.8784 0 1 0-55.7568 0Z"
fill="#2E0C08" p-id="566"></path>
<path d="M625.84832 407.54688m-65.46432 0a65.46432 65.46432 0 1 0 130.92864 0 65.46432 65.46432 0 1 0-130.92864 0Z"
fill="#CF3924" p-id="567"></path>
<path d="M625.84832 488.96512c-44.89216 0-81.408-36.52096-81.408-81.41312s36.52096-81.41824 81.408-81.41824c44.89728 0 81.41312 36.52608 81.41312 81.41824s-36.51584 81.41312-81.41312 81.41312z m0-130.92864c-27.29472 0-49.50528 22.21056-49.50528 49.5104s22.21056 49.5104 49.50528 49.5104c27.29984 0 49.5104-22.21056 49.5104-49.5104s-22.21056-49.5104-49.5104-49.5104z"
fill="#2E0C08" p-id="568"></path>
<path d="M625.85344 402.23744m-27.8784 0a27.8784 27.8784 0 1 0 55.7568 0 27.8784 27.8784 0 1 0-55.7568 0Z"
fill="#2E0C08" p-id="569"></path>
<path d="M261.51424 911.39584c-31.6416 0-57.38496-25.56416-57.38496-56.99584v-57.68192a15.95392 15.95392 0 1 1 31.90784 0v57.68192c0 13.83424 11.43296 25.09312 25.48224 25.09312 14.0544 0 25.48736-11.25888 25.48736-25.09312v-57.68192a15.95392 15.95392 0 1 1 31.90272 0v57.68192c-0.00512 31.43168-25.7536 56.99584-57.3952 56.99584zM427.264 841.74848c-31.6416 0-57.38496-25.55904-57.38496-56.99072v-57.70752a15.95392 15.95392 0 1 1 31.90784 0v57.70752c0 13.83424 11.43296 25.08288 25.48224 25.08288s25.48224-11.24864 25.48224-25.08288v-57.70752a15.9488 15.9488 0 1 1 31.90784 0v57.70752c-0.01024 31.43168-25.7536 56.99072-57.3952 56.99072zM593.00864 804.1728c-31.64672 0-57.39008-25.56416-57.39008-56.9856v-57.69216a15.9488 15.9488 0 1 1 31.90272 0v57.69216c0 13.82912 11.42784 25.07776 25.48736 25.07776 14.04928 0 25.48736-11.24864 25.48736-25.07776v-57.69216a15.9488 15.9488 0 1 1 31.90272 0v57.69216c0 31.42144-25.74336 56.9856-57.39008 56.9856z"
fill="#2E0C08" p-id="570"></path>
<path d="M385.8176 749.49632a15.95392 15.95392 0 0 1-15.95392-15.9488V675.84c0-13.82912-11.42784-25.088-25.48224-25.088s-25.48224 11.25888-25.48224 25.088v57.70752a15.9488 15.9488 0 1 1-31.90272 0V675.84c0-31.42656 25.74336-56.99584 57.38496-56.99584S401.77152 644.41344 401.77152 675.84v57.70752a15.95392 15.95392 0 0 1-15.95392 15.9488zM551.57248 743.50592a15.9488 15.9488 0 0 1-15.95392-15.95392v-57.7024c0-13.83424-11.43296-25.08288-25.48736-25.08288-14.04928 0-25.48224 11.24864-25.48224 25.08288v57.7024a15.9488 15.9488 0 1 1-31.90784 0v-57.7024c0-31.42656 25.74336-56.99072 57.38496-56.99072 31.64672 0 57.39008 25.56416 57.39008 56.99072v57.7024a15.94368 15.94368 0 0 1-15.94368 15.95392zM717.69088 757.36576a15.9488 15.9488 0 0 1-15.9488-15.95392V683.7248c0-13.83424-11.43296-25.088-25.48736-25.088-14.0544 0-25.49248 11.25376-25.49248 25.088v57.68704a15.9488 15.9488 0 1 1-31.8976 0V683.7248c0-31.42656 25.74336-56.99584 57.39008-56.99584s57.39008 25.56928 57.39008 56.99584v57.68704a15.9488 15.9488 0 0 1-15.95392 15.95392z"
fill="#2E0C08" p-id="571"></path>
</svg>
</div>
</div>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">游戲失敗</h4>
</div>
<div class="modal-body">你的分數(shù)是x</div>
<div class="modal-footer">
<!--<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>-->
<button id="newGame" type="button" class="btn btn-primary" onclick="newGame()">再來一次</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</body>
<script>
//接下去做長按壓縮效果裙士。
houses = []//house{x:左下角坐標,y:左下角坐標,w:width,h:height}
houseid=0
let chessdom = document.getElementById('chess')
let clientWidth = document.body.clientWidth
let clientHeigth = document.body.clientHeight
let chessmovexpersecond = clientWidth / 1//按1秒,x移動
let max_chess_movex = clientWidth
let max_move_time=clientWidth/chessmovexpersecond*1000//ms
let max_press_househeight=20
let max_press_housetime=max_move_time//ms
let chess={
x:0,//left
y:0,//bottom
w:20,
h:20
}
let gameRes={
score:0,
state:0//-1失敗,1成功,0進行時
}
let rotate_deg_i=1
let _inval=null
time = 0
document.getElementById('houseBox').style.top=clientHeigth+'px'
function addhouse() {
let random_dis, x_orgin, y_orgin, res;
if (houses.length == 0) {
x_orgin = 0
y_orgin = 0
} else {
let item = houses[houses.length - 1]
x_orgin = item.x + item.w;
y_orgin = item.y + item.h;
}
random_dis = {
xd: Math.ceil(Math.random() * 50)+chess.w, //高度一到五隨機（向上取整）
yd: Math.ceil(Math.random() * 50)+chess.w, //高度一到五隨機（向上取整）
zd: Math.ceil(Math.random() * 50)+chess.w, //高度一到五隨機（向上取整）
}
res = {
x: x_orgin + random_dis.xd,
y: y_orgin + random_dis.yd,
w: Math.ceil(Math.random() * 50)+chess.w,//大于棋子
h: Math.ceil(Math.random() * 50)+chess.h,//大于棋子
id:houseid
}
houseid++
houses.push(res)
let id = 'house' + houseid
newhousedom = `<div class='house' id="${id}" style="left:${res.x + 'px'};bottom:${res.y + 'px'};width:${res.w + 'px'};height:${res.h + 'px'};animation:fadeInOut 2s cubic-bezier(0.25,0.1,0.25,1) forwards" >${id}</div>`
$("#houseBox").append(newhousedom);//jquery
if (houses.length == 1){
chess.x=res.x+res.w/2-chess.w/2
chess.y=res.y + res.h
chessdom.style.left = res.x+res.w/2-chess.w/2 + 'px';
chessdom.style.bottom = res.y + res.h + 'px';
}
}
newGame=function(){
$('#myModal').modal('hide')
window.location.reload()
}
updateGameState=function(chess_movex,nexthouse,cuhousex){
setTimeout(function(){
//有了這一步還原,才可以執(zhí)行animation
chessdom.style.animation=''
switch (gameRes.state){
case -1:
$('#gameState').html('游戲失敗')
$('#myModal').modal('show')
break;
case 1:
$('#gameState').html('游戲成功')
gameRes.score= gameRes.score+Math.floor(chess_movex/7)
$('#gameScore').html('游戲分數(shù):'+gameRes.score)
addhouse()
$("#house"+houses.shift().id).remove();
moveScene(chess_movex,nexthouse.y+nexthouse.h-cuhousex.y-cuhousex.h)
break;
}
},time/100*1000)
}
moveScene=function(xmovedis,ymovedis){
let scenedom=document.getElementById('houseBox')
scenedom.style.animation=''
//修改keyframes,找到rule,刪除,并重新設(shè)置
let style = document.styleSheets[0];
let dompos={left:scenedom.offsetLeft,top:(scenedom.offsetTop)}
let movePos={l1:dompos.left,l2:dompos.left-xmovedis,t1:dompos.top,t2:dompos.top+ymovedis}
for (let i = 0; i < style.cssRules.length; i++) {
let key = i, item = style.cssRules[i]
if (item && item.name && item.name == 'move') {
document.styleSheets[0].deleteRule(key);
let keyframes_move = `@keyframes move {
0% {left: ${movePos.l1}px;top:${movePos.t1}px}
100% {left: ${movePos.l2}px;top:${movePos.t2}px }`
style.insertRule(keyframes_move, 5);//寫入樣式
}
}
//
scenedom.style.animation = `move ${time/100}s cubic-bezier(0.25,0.1,0.25,1)`;
scenedom.style.left=movePos.l2+'px'
scenedom.style.top=movePos.t2+'px'
//動畫結(jié)束以后利用
}
addhouse()
addhouse()
addhouse()
window.addEventListener('load', load, false);
function load() {
document.getElementById("chess").addEventListener('touchstart', touch, false);
document.getElementById("chess").addEventListener('touchmove', touch, false);
document.getElementById("chess").addEventListener('touchend', touch, false);
function touch(event) {
event.preventDefault();
var event = event || window.event;
var oInp = chessdom;
switch (event.type) {
case "touchstart":
start_time = new Date().getTime()
orgin_house_height=parseInt($("#house"+(houses[0].id+1)).css('height'))
orgin_chess_height=chess.h
orgin_chess_bottom=parseInt($("#chess").css('bottom'))
_inval=setInterval(function(){
//點擊以后調(diào)整house,chess壓縮,chess,top修改。
let hpertime=max_press_househeight/max_press_housetime*100
$("#house"+(houses[0].id+1)).css('height', (parseInt($("#house"+(houses[0].id+1)).css('height'))-hpertime)+'px')
$("#chess").css('bottom', (parseInt($("#chess").css('bottom'))-hpertime)+'px')
},100)
setTimeout(function(){
clearInterval(_inval)
},max_press_housetime)
break;
case "touchend":
clearInterval(_inval)
end_time = new Date().getTime()
time = end_time - start_time;
let chess_movex = time / 1000 * chessmovexpersecond > max_chess_movex ? max_chess_movex : time / 1000 * chessmovexpersecond
cuhousex=houses[0]
nexthouse=houses[1]
let prechess={
x:chess.x,
y:chess.y,
w:chess.w,
h:chess.h
}
//判斷是否在下一個house區(qū)域內(nèi)
chess.x=chess.x+chess_movex;
chess.y=chess.y
if((chess.x+chess.w/2)<nexthouse.x){
chess.y=cuhousex.y
gameRes.state=-1
}else if((chess.x+chess.w/2)>nexthouse.x+nexthouse.w){
chess.y=nexthouse.y+nexthouse.h
gameRes.state=-1
}else{
chess.y=nexthouse.y+nexthouse.h
//著陸,新房子,移動。
//添加新房子
gameRes.state=1
}
//修改keyframes,找到rule,刪除,并重新設(shè)置
var style = document.styleSheets[0];
for (let i = 0; i < style.cssRules.length; i++) {
let key = i, item = style.cssRules[i]
if (item && item.name && item.name == 'jump') {
document.styleSheets[0].deleteRule(key);
//根據(jù)chess的offset
let keyframes_jump = `@keyframes jump {
0% {left: ${prechess.x}px;bottom:${prechess.y}px}
50% {left: ${prechess.x+(chess.x-prechess.x)/2}px;bottom:${chess.y+300}px}
100% {left: ${chess.x}px;bottom:${chess.y}px}
}`
style.insertRule(keyframes_jump, 4);//寫入樣式
}
}
//被壓縮的house還原
let curhousedom=$("#house"+(houses[0].id+1)).get(0)
curhousedom.style.height = orgin_house_height+'px';
curhousedom.style.transition = `height 0.3s linear`;
chessdom.style.animation = `jump ${time/100}s cubic-bezier(0.25,0.1,0.25,1) forwards`;
//forwards修改了,但是dom的值沒有變過來,這里一定要變過來鬓照。
chessdom.style.left=chess.x+'px'
chessdom.style.bottom=chess.y+'px'
chessdom.style.transform = 'rotate('+360*rotate_deg_i+'deg)';
rotate_deg_i++
chessdom.style.transition = `transform ${time/100}s linear`;
updateGameState(chess_movex,nexthouse,cuhousex)
break;
case "touchmove":
break;
}
}
}
</script>
</html>
jquery跳一跳小游戲
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門嘁捷，熙熙樓的掌柜王于貴愁眉苦臉地迎上來造成，“玉大人，你說我怎么就攤上這事雄嚣∩故海” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵缓升，是天一觀的道長鼓鲁。 經(jīng)常有香客問我，道長港谊，這世上最難降的妖魔是什么骇吭？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮歧寺，結(jié)果婚禮上燥狰，老公的妹妹穿的比我還像新娘。我一直安慰自己斜筐，他們只是感情好龙致，可當我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著顷链，像睡著了一般目代。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嗤练，一...
- 文/蒼蘭香墨 我猛地睜開眼遮婶，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了湖笨？” 一聲冷哼從身側(cè)響起，我...
- 正文 年R本政府宣布断傲，位于F島的核電站，受9級特大地震影響智政，放射性物質(zhì)發(fā)生泄漏认罩。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一续捂、第九天 我趴在偏房一處隱蔽的房頂上張望垦垂。 院中可真熱鬧，春花似錦牙瓢、人聲如沸劫拗。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽杨幼。三九已至，卻和暖如春聂渊，著一層夾襖步出監(jiān)牢的瞬間差购，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 索愛k790c,k800i: jbenchmark:5733 jbenchmark2:366 jbenchmark...
- 2017年時閱讀過100本書彰居，最近很開心能有些許時間把書單整理出來诚纸，供有需要的你參考。 一陈惰、圖書評級 星級★★★強...
- 尊敬的老師，智慧的班主任溶握，親愛的學(xué)兄們杯缺！大家晚上好！我是福建漳州的candy睡榆，我的幸福里程開啟第5天萍肆。 今天是20...
