<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.warp{
width: 320px;
height: 480px;
/*background:url(images/myrank_bg.jpg);*/
background: url(images/game_bg.jpg);
position: relative;
margin: auto;
}
.score_box{
position: absolute;
left: 65px;
top: 5px;
font-size: 1.5rem;
color:orange;
text-shadow: 2px 2px 10px white;
}
.progress_bar{
width: 180px;
height: 16px;
background: red;
position: absolute;
top: 66px;
left: 63px;
border-radius: 10px;
box-shadow: 3px 3px 10px red;
/*background: rgba(255, 0, 0, 0.5);*/
/*background: url(images/progress.png)*/
}
.wolf_box img{
position: absolute;
}
/*.wolf_box img:nth-child(1){left:98px;top: 118px;}
.wolf_box img:nth-child(2){left:20px;top: 160px}
.wolf_box img:nth-child(3){left:188px;top: 140px}
.wolf_box img:nth-child(4){left:16px;top: 220px}
.wolf_box img:nth-child(5){left:100px;top: 191px}
.wolf_box img:nth-child(6){left:195px;top: 210px}
.wolf_box img:nth-child(7){left:28px;top: 294px}
.wolf_box img:nth-child(8){left:113px;top: 273px}
.wolf_box img:nth-child(9){left:202px;top: 293px}*/
.wolf_menu{
position: absolute;
left: 0px;
top: 0px;
width: 320px;
height: 480px;
background:rgba(0, 0, 0, 0.5);
}
.wolf_menu .game_start{
position: absolute;
left: 100px;
top: 240px;
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
background: orange;
color: white;
border-radius: 6px;
box-shadow: 3px 3px 10px black;
}
.game_over{
width: 300px;
height: 100px;
border: 2px solid black;
position: absolute;
top: 200px;
left: 10px;
box-shadow: 1px 1px 10px black;
/*margin-top: 200px;*/
text-align: center;
line-height: 50px;
font-size: 2rem;
color: red;
background: lightgray;
display: none;
}
.restart{
display: block;
width: 120px;
height: 40px;
background: orange;
text-align: center;
line-height: 40px;
font-size: 1.5rem;
position: absolute;
left: 80px;
top: 50px;
color: white;
border-radius: 10px;
box-shadow:1px 1px 10px orange;
}
</style>
</head>
<body>
<div class="warp">
<!-- 积分 -->
<div class="score_box">
0
</div>
<!-- 时间进度条 -->
<div class="progress_bar">
</div>
<!-- 狼🐺 -->
<div class="wolf_box">
</div>
<!-- 开始 -->
<div class="wolf_menu">
<span class="game_start">开始</span>
</div>
<!-- 结束yemian -->
<div class="game_over">
GAMOVER!!!!
<span class="restart"> 重新开始</span>
</div>
</div>
</body>
<script type="text/javascript">
var wolf_menu=document.querySelector('.wolf_menu');
var game_start=document.querySelector('.game_start');
var game_over=document.querySelector('.game_over');
var restart=document.querySelector('.restart');
var wolfBox=document.querySelector('.wolf_box');
var score_box=document.querySelector('.score_box');
var progress_bar=document.querySelector('.progress_bar')
var timer=null;
var time=80;
//狼的位置 数组
var wolf_PosArr=[[98,118],[20,160],[188,140],[16,220],[100,191],[195,210],[28,294],[113,273],[202,293]];
function rand(min,max) {
return parseInt(Math.random()*(max-min))+min;
}
//创建狼🐺
function creatWilf() {
var wolf=document.createElement('img');
wolf.type=rand(0,100)>70 ? "x":"h"; //出现小灰灰和灰太狼的比例（三目运算符）
wolf.index=0;//初始化图片的 索引
wolf.src="images/"+wolf.type+wolf.index+".png";
//所有狼
var wolfs=wolfBox.children;
var bol=true;//是否出现多只狼
while (bol) {
var randomPos=rand(0,wolf_PosArr.length);
for (var i = 0; i < wolfs.length; i++) {
if (wolfs[i].offsetLeft==wolf_PosArr[randomPos][0]){
break;
}//当狼的坐标确认以后，退出循环
}
if (i==wolfs.length) {
bol=false;
}
}
console.log(wolf_PosArr.length);
//设置生成狼的坐标
wolf.style.left=wolf_PosArr[randomPos][0]+'px';
wolf.style.top=wolf_PosArr[randomPos][1]+'px';
//添加到容器中
wolfBox.appendChild(wolf);
return wolf;
}
//开始 按钮
game_start.onclick=function() {
wolf_menu.style.display='none';
gameStartFn();
// creatWilf();
}
// 游戏开始
function gameStartFn() {
//开始计时
function time_(){
var progress_barWidth=progress_bar.offsetWidth;
progress_bar.progressTimer=setInterval(function(){
progress_barWidth-=2
if(progress_barWidth<=0) {
// clearInterval(progress_bar.progressTimer);
// clearInterval(timer);
clearTimer();
game_over.style.display='block';
wolfBox.innerHTML='';
}
progress_bar.style.width=progress_barWidth+'px';
},100)
}
time_();
//创建狼
timer=setInterval(function() {
var wolf=creatWilf();//获取狼这个对象
//灰太狼出现
wolf.showTimer=setInterval(function() {
wolf.index++;
if (wolf.index>4) {//如果展示到打击前最后一个状态；
clearInterval(wolf.showTimer);
wolf.disHide();
}
wolf.src="images/"+wolf.type+wolf.index+".png"
},time)
//灰太狼消失
wolf.disHide=function(){
wolf.hideTimer=setInterval(function(){
wolf.index--;
if (wolf.index<=0) {//消失到最后一个时 清空整个狼的容器；
wolfBox.removeChild(wolf);
clearInterval(wolf.hideTimer)
}
wolf.src="images/"+wolf.type+wolf.index+".png"
},time)
}
beatWolf(wolf);
},1000);
}
//打狼🐺
function beatWolf(wolf) {
wolf.beat=false;//没有被打
wolf.onclick=function() {
if (wolf.beat===true) {
return;
}
//积分
function scoreFn(as) {
var score=parseInt(score_box.innerHTML);
if (as.type=='h') {
score_box.innerHTML=score+10;
}else {
score_box.innerHTML=score-10;
}
}
scoreFn(wolf)
wolf.beat=true;//设置状态为击打
//重置
wolf.index=5;
clearInterval(wolf.showTimer);
clearInterval(wolf.hideTimer)
//极大效果
wolf.clickTimer=setInterval(function () {
wolf.index++;
if (wolf.index>=9) {//狼的最后一个状态
clearInterval(wolf.clickTimer);
wolfBox.removeChild(wolf);
return;
}
wolf.src="images/"+wolf.type+wolf.index+".png";
},time)
}
}
//游戏结束重新开始
restart.onclick=function() {
game_over.style.display='none';
// wolf_menu.style.display='block';
score_box.innerHTML=0;
progress_bar.style.width='180px';
gameStartFn();
// time_();
// window.location.
h5小游戏源码
需积分: 36 136 浏览量
2018-08-16
09:17:48
上传
评论
收藏 357KB ZIP 举报
灰太狼.zip （30个子文件） 
灰太狼 
index.html 8KB
.DS_Store 6KB images 
x.png 56KB x0.png 1KB h1.png 3KB h5.png 8KB x7.png 11KB x8.png 11KB
myrank_bg.jpg 47KB h7.png 11KB x3.png 5KB x2.png 3KB progress.png 4KB x9.png 12KB x1.png 2KB game_bg.jpg 45KB h6.png 12KB x4.png 6KB x6.png 11KB h.png 58KB h8.png 13KB h2.png 5KB h9.png 11KB logo.png 6KB h4.png 7KB h0.png 3KB icon_19.png 357B h3.png 6KB x5.png 7KB js ._.DS_Store 4KB css 资源评论
