欢迎来到程序小院

龟兔再跑

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

开始游戏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/