欢迎来到程序小院
龟兔再跑
玩法：乌龟跳绳，点击鼠标左键乌龟跳跃，两只乌龟一直不停的甩绳子，另外一只乌龟从中跳过，赶快去跳绳吧^^。
开始游戏
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/
扫一扫
647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
