龟兔再跑&

欢迎来到程序小院

龟兔再跑

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

开始游戏icon-default.png?t=N7T8https://www.ormcc.com/play/gameStart/255

龟兔再跑&_第1张图片

html


 
                                                           
        
                                                                                                                                                                                                                                                                                                                                                                                   
        
                              
                                                                                                                 
                                                                                                                        
                                                                                                                        
                                                                                                                                                                                                                                                                                                                            点击手机控制乌龟跳绳                                                                                                                                                                                                                   

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;i0){
   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/

龟兔再跑&_第2张图片

你可能感兴趣的:(H5小游戏,前端,html,javascript,游戏,html5,css)