利用jQuery实现大鱼吃小鱼游戏源代码



24 92 31



特效描述:利用jQuery实现 大鱼吃小鱼 游戏源代码,利用jQuery实现大鱼吃小鱼游戏源代码

代码结构

1. 引入JS

<script src="jquery.min.js"></script>

2. HTML代码

<div style="width:100%;height:50px;background-color:#888;position:absolute;left:0;top:-50px;z-index:10000" class="title-head">
<div style="width:10%;height:50px;display:inline-block">
分数<br><span class="Score">0</span>
</div><div style="width:10%;height:50px;display:inline-block">
生命<br><span class="Life">20</span>
</div><div style="width:10%;height:50px;display:inline-block">
等级<br><span class="Level">1</span>
</div><div style="width:10%;height:50px;display:inline-block;text-align:right">
生命进度<br>等级进度
</div>
<div style="width:59%;height:50px;display:inline-block">
<div style="width:100%;height:15px;display:inline-block;" class="jdtstt">
 <div style="width:0%;height:15px;display:inline-block;background-color:#f21255" class="jdtsww1"></div>
</div>
<div style="width:100%;height:15px;display:inline-block;" class="jdtstt">
 <div style="width:0%;height:15px;display:inline-block;background-color:#72f3fe" class="jdtsww2"></div>
</div>
</div>
</div>
<div style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:10" class="gamestt">
<img src="img/fish.png" width="50px" style="position:absolute;left:0;top:0;transition:transform 0.5s;margin:-25px 0 0 -25px;visibility:hidden" class="fish">
</div>
<div style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:12000;" class="mainmenu">
<br><br><br><br><br><center style="font-size:80px;">大鱼吃小鱼</center><br><br>
<center><input type="button" value="开始游戏" onClick="startgame()" style="font-size:25px"></center><br>
<center><input type="button" value="游戏说明" onClick="$('.mainmenu').hide();$('.explain').show()" style="font-size:25px"></center>
</div>
<div style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:12000;display:none" class="explain">
<br><br><br><br><br>
<center style="font-size:80px;">游戏说明</center>
<center>哇哦,大鱼吃小鱼jQuery版。美丽的大海,灿烂的珊瑚。吃小鱼了!!<br>放飞梦想,全部鱼群。好玩的游戏,小鱼来吃呀!<br>小心,这个等级过小,这个大的鱼扣除生命<br>作者:放飞的你们<br><br>站长素材<input type="button" value="关闭" onClick="$('.mainmenu').show();$('.explain').hide()"></center>
</div>
<div style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:12000;display:none" class="gameover">
<br><br><br><br><br>
<center style="font-size:80px;">游戏结束</center>
<center><input type="button" value="重新开始" onClick="startgame()" style="font-size:25px"></center><br>
<center><input type="button" value="返回主菜单" onClick="$('.mainmenu').show();$('.gameover').hide();$('.title-head').animate({top:'-50px'});" style="font-size:25px"></center>
</div>
<img src="img/bg.jpg" style="position:absolute;left:0;top:0;left:0;top:0;width:100%;height:100%">
<script type="text/javascript">
var fish_a_1=0,fish_a_2=0,score=0,life=20,level=1,lifest=0,lvst=0,lvmax=5,lvaccd=1,gamestyle
$(".gamestt").bind("mousemove",function(event){
var event=event||window.event
$(".fish").css({left:event.clientX+"px",top:event.clientY+"px"}).show()
fish_a_1=event.clientX
if(fish_a_1>fish_a_2){$(".fish").addClass("rightsty")}else{$(".fish").removeClass("rightsty")}
fish_a_2=event.clientX
})
$(".title-head").bind("mouseover",function(){
$(".fish").hide()
})
var dedeabc=1
function fishaa(){
dedeabc++
var acbb=(Math.floor(Math.random()*lvaccd)+1)
if(Math.random()>0.5){
 $(".gamestt").append("<img src='img/fish"+acbb+".png' class='abccaae"+dedeabc+"' style='position:absolute;left:100%;top:"+(10+(Math.random()*70))+"%' onmouseover='abcyu(this,"+acbb+")'>")
 $(".abccaae"+dedeabc).animate({left:"-126px"},(Math.random()*8000)+2000,"linear",function(){$(this).remove()})
}else{
 $(".gamestt").append("<img src='img/fish"+acbb+".png' class='abccaae"+dedeabc+" rightsty' style='position:absolute;right:100%;top:"+(10+(Math.random()*70))+"%' onmouseover='abcyu(this,"+acbb+")'>")
 $(".abccaae"+dedeabc).animate({right:"-126px"},(Math.random()*8000)+2000,"linear",function(){$(this).remove()})
}
}
function smjds(i){
lifest+=i;if(lifest>=500){lifest=0;life+=10;$(".Life").html(life)}
$(".jdtsww1").css("width",((lifest/500)*100)+"%")
lvst++;if(lvst>=lvmax){lvst=0;level+=1;lvmax+=5;$(".Level").html(level)}
$(".jdtsww2").css("width",((lvst/lvmax)*100)+"%")
}
function abcyu(i,j){
if(!(j==lvaccd&&Math.random()>0.9)){
 $(i).remove()
 score+=(10*j)*level;$(".Score").html(score)
 smjds(10)
}else{
 life--;$(".Life").html(life)
 if(life==0){$(".gameover").show();$(".fish").css("visibility","hidden");clearTimeout(gamestyle)}
}
if(level==3){lvaccd=2}
if(level==10){lvaccd=3}
if(level==20){lvaccd=4}
if(level==30){lvaccd=5}
if(level==40){lvaccd=6}
if(level==50){lvaccd=7}
if(level==60){lvaccd=8}
}
function awwae(){fishaa();gamestyle=setTimeout(awwae,Math.random()*1000)}
setInterval(function(){lifest--;if(lifest<=0){lifest=0;};$(".jdtsww1").css("width",((lifest/500)*100)+"%")},100)
function startgame(){
score=0;life=20;level=1;lifest=0;lvst=0;lvmax=5;lvaccd=1
gamestyle=setTimeout(awwae,Math.random()*1000)
$(".mainmenu,.gameover").hide();$(".fish").css("visibility","");$(".title-head").animate({top:"0px"});
$(".Score").html(score);$(".Life").html(life);$(".Level").html(level);$(".jdtsww1").css("width","0%");$(".jdtsww2").css("width","0%")
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 小游戏 H5游戏 游戏源码 手机游戏 微信游戏 网页游戏 其他游戏 其他h5游戏 其他h5源码游戏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到