欢迎来到程序小院
龟兔再跑
玩法:乌龟跳绳,点击鼠标左键乌龟跳跃,两只乌龟一直不停的甩绳子,另外一只乌龟从中跳过,赶快去跳绳吧^^。
开始游戏https://www.ormcc.com/play/gameStart/255
html
<div class="main" id="mainId"><div class="sence sence0" id="sence0Id"></div><div class="sence sence1" id="sence1Id"><div class="rabbitFront"><img src="images/rabbit1.png"><div class="rabbitHand"><!--<img src="images/hand1.png" id="rabbitHandId" />--></div></div><div class="jumpLineCtxBox" id="jumpLineCtxBoxId"><div class="jumpLineImg"><img src="images/line0.png" id="line0Id" style="z-index:5;"><img src="images/line1.png" id="line1Id" style="z-index:5;"><img src="images/line2.png" id="line2Id" style="z-index:5;"><img src="images/line3.png" id="line3Id" style="z-index:5;"><img src="images/line4.png" id="line4Id" style="z-index:5;"><img src="images/line5.png" id="line5Id"><img src="images/line6.png" id="line6Id"><img src="images/line7.png" id="line7Id"><img src="images/line8.png" id="line8Id"><img src="images/line9.png" id="line9Id"><img src="images/line10.png" id="line10Id"><img src="images/line11.png" id="line11Id"><img src="images/line12.png" id="line12Id"><img src="images/line13.png" id="line13Id"><img src="images/line14.png" id="line14Id"><img src="images/line15.png" id="line15Id" style="z-index:5;"><img src="images/line16.png" id="line16Id" style="z-index:5;"><img src="images/line17.png" id="line17Id" style="z-index:5;"><img src="images/line18.png" id="line18Id" style="z-index:5;"><img src="images/line19.png" id="line19Id" style="z-index:5;"></div></div><div class="rabbitBack"><img src="images/rabbit2.png"></div><div class="tortoiseBox" id="tortoiseBoxId"><div class="tortoise1" id="tortoise1Id" style="display: none;"><img src="images/tortoise_f1.png" id="tortoise1_loseId"><img src="images/tortoise_n1.png" id="torroise1_waitId"><img src="images/tortoise_n1.png" id="torroise1_walk1Id"><img src="images/tortoise_w1.png" id="torroise1_walk2Id"><img src="images/tortoise_up1.png" id="torroise1_jumpId"></div><div class="tortoise2" id="tortoise2Id" style="display: none;"><img src="images/tortoise_f2.png" id="tortoise2_loseId"><img src="images/tortoise_n2.png" id="torroise2_waitId"><img src="images/tortoise_n2.png" id="torroise2_walk1Id"><img src="images/tortoise_w2.png" id="torroise2_walk2Id"><img src="images/tortoise_up2.png" id="torroise2_jumpId"></div><div class="tortoise3" id="tortoise3Id" style="display: none;"><img src="images/tortoise_f3.png" id="tortoise3_loseId"><img src="images/tortoise_n3.png" id="torroise3_waitId"><img src="images/tortoise_n3.png" id="torroise3_walk1Id"><img src="images/tortoise_w3.png" id="torroise3_walk2Id"><img src="images/tortoise_up3.png" id="torroise3_jumpId"></div><div class="tortoise4" id="tortoise4Id" style="display: none;"><img src="images/tortoise_f4.png" id="tortoise4_loseId"><img src="images/tortoise_n4.png" id="torroise4_waitId"><img src="images/tortoise_n4.png" id="torroise4_walk1Id"><img src="images/tortoise_w4.png" id="torroise4_walk2Id"><img src="images/tortoise_up4.png" id="torroise4_jumpId"></div></div><div class="scoreBox" id="scoreBoxId"><img src="images/0.png"><img src="images/1.png" class="display_no"><img src="images/2.png" class="display_no"><img src="images/3.png" class="display_no"><img src="images/4.png" class="display_no"><img src="images/5.png" class="display_no"><img src="images/6.png" class="display_no"><img src="images/7.png" class="display_no"><img src="images/8.png" class="display_no"><img src="images/9.png" class="display_no"></div><!--文字提示--><div class="bannerText"><div class="text">点击手机控制乌龟跳绳</div></div> <div class="ctrlBox" id="ctrlBoxId"></div> </div><div class="sence sence2" id="sence2Id" style="opacity: 0; display: none; z-index: -1;"><div class="gameEndBox"><img src="images/end.png"></div><div class="mark"><span id="markId"><img src="images/0.png"></span></div><div class="btn restartBtn" id="restartBtnId"><img src="images/btn_1.png"></div><div class="btn shareBtn" id="shareBtnId"><img src="images/btn_2.png"></div><div class="btn paihangBtn" id="paihangBtnId"><img src="images/btn_3.png"></div></div>
</div>
css
input{outline: none;resize: none;-webkit-appearance: none;}img{border:none; vertical-align:middle;}.left{float:left;}.right{float:right;}.clear{clear:both;}.aleft{text-align:left;}.aright{text-align:right;}.acenter{text-align:center;}.h10{height:10px;}.h20{height:20px;}.h30{height:30px;}.h60{height:60px;}.w20{width:20px;}.w40{width:40px;}.w60{width:60px;}.w80{width:80px;}.w120{width:120px;}.w160{width:160px;}.w170{width:170px;}.w180{width:180px;}.w200{width:200px;}.w240{width:240px;}.w260{width:260px;}.w270{width:270px;}.w280{width:280px;}.w320{width:320px;}.w360{width:360px;}.w400{width:400px;}.w440{width:440px;}.w480{width:480px;}.w30pe{width:30%;}.w40pe{width:40%;}.w100pe{width:100%;}.f08{font-size:0.8em}.f12{font-size:1.2em}.f14{font-size:1.4em;}.f16{font-size:1.6em;}.f24{font-size:2em;}.display_yes{display:block;}.display_no{display:none;}p{margin:10px 0;padding:0;}.p_indent{text-indent:24px;}.no_wrap{white-space:nowrap;}.ml_10{margin-left:10px;}.ml_20{margin-left:20px;}.mr_10{margin-right:10px;}.mr_20{margin-right:20px;}.mt_10{margin-top:10px;}.mt_20{margin-top:20px;}.mb_10{margin-bottom:10px;}.mb_20{margin-bottom:20px;}.ma_10{margin:10px;}.ma_20{margin:20px;}.pl_10{padding-left:10px;}.pl_20{padding-left:20px;}.pr_10{padding-right:10px;}.pr_20{padding-right:20px;}.pr_p1{padding-right:1%;}.pt_10{padding-top:10px;}.pt_20{padding-top:20px;}.pb_10{padding-bottom:10px;}.pb_20{padding-bottom:20px;}/*under line yes*/.underline_yes{text-decoration:underline;}/*under line no*/.underline_no{text-decoration:none;}.f_black{color:#000;}.f_white{color:#fff;}.f_blue{color:#069;}.f_red{color:#c00;}.f_green{color:#006600;}.f_yellow{color:#9d882a;}.f_pink{color:#fedbce;}.f_light_gray{color:#999;}.f_brown{color:#231815;}.f_orange{color:#f29600;}
js
var gameInfo=function(){this.score=0;//游戏得分this.timer=0;//游戏计时this.state=0;//0就绪,1进行中,2结束this.hp=0;//允许被绊倒的次数this.tortoiseInfo=-1;//-1未就绪,0乌龟就绪,1乌龟进入跳绳,2乌龟准备跳绳,3乌龟通过了,4乌龟被绊倒了this.nowTortoise=0;//当前乌龟this.waitTortoise=0;//下一只乌龟this.outTortoise=0;//离开的乌龟this.walkState=0;//0停止走路,1走路中
}
var gameInfoTemp;
var tortoiseInfoRightPositon={1:['-24%','-10%','40%'],2:['-21%','-11.2%','38.8%'],3:['-27.3%','-15.3%','33.7%'],4:['-21%','-11.2%','38.8%']
};
function initGame(){resetTortoise();document.getElementById('sence2Id').style.opacity='0';document.getElementById('sence0Id').style.display='block';document.getElementById('sence0Id').style.opacity='1';document.getElementById('sence0Id').style.zIndex=1if(!GetParam('restart')){loadingBox.style.opacity='0';}document.getElementById('sence0Id').style.opacity='1';setTimeout(function(){if(!GetParam('restart')){loadingBox.style.display='none';}document.getElementById('sence2Id').style.display='none';document.getElementById('sence2Id').style.zIndex=-1;},500);gameInfoTemp=new gameInfo;gameInfoTemp.score=0;//游戏得分gameInfoTemp.timer=0;//游戏计时gameInfoTemp.state=0;//0就绪,1进行中,2结束gameInfoTemp.hp=0;//允许被绊倒的次数gameInfoTemp.tortoiseInfo=-1;//-1未就绪,0乌龟就绪,1乌龟进入跳绳,2乌龟准备跳绳,3乌龟通过了,4乌龟被绊倒了gameInfoTemp.nowTortoise=0;//当前乌龟gameInfoTemp.waitTortoise=0;//下一只乌龟gameInfoTemp.outTortoise=0;//离开的乌龟gameInfoTemp.walkState=0;//0停止走路,1走路中document.getElementById('sence0Id').onclick=function(){gotoSence1();//进入场景1,游戏开始}
}
function resetTortoise(){for(var i=1;i<=4;i++){document.getElementById('tortoise'+i+'Id').style.right=tortoiseInfoRightPositon[i-1];document.getElementById('tortoise'+i+'Id').style.display='none';}
}
function gotoSence1(){setScore(gameInfoTemp.score);document.getElementById('sence0Id').style.opacity='0';document.getElementById('sence1Id').style.display='block';document.getElementById('sence1Id').style.opacity='1';document.getElementById('sence1Id').style.zIndex=9;setTimeout(function(){document.getElementById('sence0Id').style.display='none';document.getElementById('sence0Id').style.zIndex=1;},500);setJumpLineAni();
}
function setJumpLineAni(){var lineInfo=function(){this.nowPosition=0;//偏移位置fthis.speed=1;//跳绳速度速度this.timeSpeed=80;//动画速度this.timeer=0;this.state=0;this.jumpJudgeState=0;//0还未点击跳跃,1跳跃按钮成功this.jumpState=-1;//0lose,1winthis.jumpStep=0;}var jumpInfoTemp;document.getElementById('ctrlBoxId').onclick=function(){}var valuesLeft={node:'ctrlBoxId',clickEvent:'on',eventStart:function(e){ },eventMove:function(e){},eventEnd:function(e){jumpJudge();//点击跳跃,判断是否跳成功}}AddEventHandlers(valuesLeft);jumpInfoTemp=new lineInfo;runJumpLine();function runJumpLine(){//执行一次跳绳动画jumpInfoTemp.nowPosition=0;//偏移位置//jumpInfoTemp.speed=jumpInfoTemp.speed+0.1;//跳绳速度速度jumpInfoTemp.timeer=0;jumpInfoTemp.state=0;//跳绳圈位置jumpInfoTemp.jumpJudgeState=0;//0还未点击跳跃,1跳跃按钮开始成功jumpInfoTemp.jumpState=-1;//0lose,1winjumpInfoTemp.jumpStep=0;//设置跳绳速度/*jumpInfoTemp.speed=1+Math.floor(gameInfoTemp.score/2)*5/100;*/console.log('当前跳绳速度'+jumpInfoTemp.speed); //console.log(jumpInfoTemp);jumpInfoTemp.timer=window.setInterval(function(){if(jumpInfoTemp.state==5){window.clearInterval(jumpInfoTemp.timer);return;}if(jumpInfoTemp.state==4){window.clearInterval(jumpInfoTemp.timer);runJumpLine();return;}getJumpPosition();},jumpInfoTemp.timeSpeed);function getJumpPosition(){//计算二次赛贝尔曲线坐标switch(jumpInfoTemp.jumpStep){case 0:jumpInfoTemp.jumpStep++;document.getElementById('line19Id').style.display='none';document.getElementById('line0Id').style.display='block';if(gameInfoTemp.tortoiseInfo==0){setTortoiseGo();}jumpInfoTemp.jumpJudgeState=0;break;case 1:jumpInfoTemp.jumpStep++;document.getElementById('line0Id').style.display='none';document.getElementById('line1Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 2:jumpInfoTemp.jumpStep++;document.getElementById('line1Id').style.display='none';document.getElementById('line2Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 3:jumpInfoTemp.jumpStep++;document.getElementById('line2Id').style.display='none';document.getElementById('line3Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 4:jumpInfoTemp.jumpStep++;document.getElementById('line3Id').style.display='none';document.getElementById('line4Id').style.display='block';jumpInfoTemp.jumpJudgeState=0; break;case 5:jumpInfoTemp.jumpStep++;document.getElementById('line4Id').style.display='none';document.getElementById('line5Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 6:jumpInfoTemp.jumpStep++;document.getElementById('line5Id').style.display='none';document.getElementById('line6Id').style.display='block';if(gameInfoTemp.waitTortoise==0){setTortoiseReady();gameInfoTemp.tortoiseInfo=0;}jumpInfoTemp.jumpJudgeState=0;break;case 7:jumpInfoTemp.jumpStep++;document.getElementById('line6Id').style.display='none';document.getElementById('line7Id').style.display='block';break;case 8:jumpInfoTemp.jumpStep++;document.getElementById('line7Id').style.display='none';document.getElementById('line8Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 9:jumpInfoTemp.jumpStep++;document.getElementById('line8Id').style.display='none';document.getElementById('line9Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 10:jumpInfoTemp.jumpStep++;document.getElementById('line9Id').style.display='none';document.getElementById('line10Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 11:jumpInfoTemp.jumpStep++;document.getElementById('line10Id').style.display='none';document.getElementById('line11Id').style.display='block';jumpInfoTemp.jumpJudgeState=0;break;case 12:jumpInfoTemp.jumpStep++;document.getElementById('line11Id').style.display='none';document.getElementById('line12Id').style.display='block';for(var i=1;i<=4;i++){var tr=document.getElementById('tortoise'+i+'Id').style.right;if(tortoiseInfoRightPositon[i][2]==tr){gameInfoTemp.tortoiseInfo=2;}}jumpInfoTemp.jumpJudgeState=1;break;case 13:jumpInfoTemp.jumpStep++;document.getElementById('line12Id').style.display='none';document.getElementById('line13Id').style.display='block';break;case 14:jumpInfoTemp.jumpStep++;document.getElementById('line13Id').style.display='none';document.getElementById('line14Id').style.display='block'; break;case 15:jumpInfoTemp.jumpStep++;document.getElementById('line14Id').style.display='none';document.getElementById('line15Id').style.display='block';break;case 16:jumpInfoTemp.jumpStep++;document.getElementById('line15Id').style.display='none';document.getElementById('line16Id').style.display='block';if(jumpInfoTemp.nowPosition<=jumpInfoTemp.maxMove/4){jumpInfoTemp.jumpJudgeState=0;console.log('进行跳跃判断结束');}break;case 17:jumpInfoTemp.jumpStep++;document.getElementById('line16Id').style.display='none';document.getElementById('line17Id').style.display='block';break;case 18:jumpInfoTemp.jumpStep++;document.getElementById('line17Id').style.display='none';document.getElementById('line18Id').style.display='block';break;case 19:jumpInfoTemp.jumpStep++;document.getElementById('line18Id').style.display='none';document.getElementById('line19Id').style.display='block';if(jumpInfoTemp.nowPosition<=0){if(gameInfoTemp.tortoiseInfo>1){console.log('当前乌龟状态:'+gameInfoTemp.tortoiseInfo);if(jumpInfoTemp.jumpState==1 || gameInfoTemp.tortoiseInfo==3){jumpInfoTemp.state=4;gameInfoTemp.score++;console.log('得分:'+gameInfoTemp.score);setTimeout(function(){setScore(gameInfoTemp.score);setTortoiseOut();},500);}else{jumpInfoTemp.state=5;jumpInfoTemp.jumpState=2;gameInfoTemp.tortoiseInfo=4;gameInfoTemp.walkState=0;//document.getElementById('linel0Id').src='images/endLine.png'; gameOver(); }}else{jumpInfoTemp.state=4;}jumpInfoTemp.jumpJudgeState=0; }break;default: } }}function hideTortoiseImg(tortoiseNumber){//隐藏乌龟图片var tortoiseObj=document.getElementById('tortoise'+tortoiseNumber+'Id').getElementsByTagName('img');for(var i=0;i<tortoiseObj.length;i++){tortoiseObj[i].style.display='none';}}function setTortoiseReady(){//设置乌龟准备if (gameInfoTemp.waitTortoise>0){return;}if(gameInfoTemp.nowTortoise<4){var torroiseRndNumber=gameInfoTemp.nowTortoise+1;}else{gameInfoTemp.waitTortoise=0;return;}hideTortoiseImg(torroiseRndNumber);gameInfoTemp.waitTortoise=torroiseRndNumber;console.log(gameInfoTemp.waitTortoise+'号乌龟进入准备');//初始化乌龟位置document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.webkitTransition='all 0s linear';document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.transition='all 0s linear';document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.display='none';//document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.webkitAnimation='tortoiseA 0.8s linear 1';//document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.animation='tortoiseA 0.8s linear 1';document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.webkitAnimation='';document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.animation='';document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.right=tortoiseInfoRightPositon[torroiseRndNumber][0];//设置乌龟岛准备位置setTimeout(function(){document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.display='block';document.getElementById('torroise'+gameInfoTemp.waitTortoise+'_walk1Id').style.display='block'; document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.webkitTransition='all 0.3s linear';document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.transition='all 0.3s linear';document.getElementById('tortoise'+gameInfoTemp.waitTortoise+'Id').style.right=tortoiseInfoRightPositon[gameInfoTemp.waitTortoise][1];},400);}
源码
需要源码请关注添加好友哦^ ^
转载:欢迎来到本站,转载请注明文章出处
https://ormcc.com/