龟兔再跑&

欢迎来到程序小院

龟兔再跑

玩法：乌龟跳绳，点击鼠标左键乌龟跳跃，两只乌龟一直不停的甩绳子，另外一只乌龟从中跳过，赶快去跳绳吧^^。

开始游戏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=1
?if(!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;//偏移位置f
??this.speed=1;//跳绳速度速度
??this.timeSpeed=80;//动画速度
??this.timeer=0;
??this.state=0;
??this.jumpJudgeState=0;//0还未点击跳跃,1跳跃按钮成功
??this.jumpState=-1;//0lose,1win
??this.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,1win
??jumpInfoTemp.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/