实例介绍
【实例简介】适合入门,JS网页小游戏
【实例截图】
【实例截图】
【核心代码】
【核心代码】
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>大鱼吃小鱼</title>
<link rel="shortcut icon" href="fish.ico" type="image/x-icon"/>
<script src="jquery.min.js"></script>
<style type="text/css">
*{font-family:"Scerh",sans-serif}
.jdtstt{border:1px solid #000;}
.rightsty{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}
.trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)}
html,body{overflow:hidden;}
input[type="button"]{background-color:#fff;border:1px solid #808080;cursor:pointer}
</style>
</head>
<body>
<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>17素材<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>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论