码迷,mamicode.com
首页 > Web开发 > 详细

WEB期中考试小游戏-找宝石

时间:2016-04-21 13:25:39      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>找宝石</title>
<script type="text/javascript">
var n;
var i;
var j=0;
var time=1000;

 


var timess=35;
var myArray=new Array(13);
var p=0;
var q=0;
var gqs=1;

/*function Refurbish()
{
 alert("1");
}
document.onkeypress=Refurbish;*/
/*function count()
{
 if(j==10 && timess>0)
  {
   alert("1")
   timess=timess+40;
    time=700;
  }
 else if(j==60 && timess>0)
  {
   timess=timess+50;
   time=350;
  }
}*/
 
function downs()  //键盘按键触发 加分与减分
{
 var win=window.event;
 //alert("1");
 if(win.keyCode==97)
  {
   if(i==6)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==98)
 {
   if(i==7)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==99)
 {
   if(i==8)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==100)
 {
   if(i==3)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==101)
 {
   if(i==4)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==102)
 {
   if(i==5)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==103)
 {
   if(i==0)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==104)
 {
   if(i==1)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
    else j=j-1;
   }
 else if (win.keyCode==105)
  {
   if(i==2)
   {
   var Img=document.getElementById("img_"+i);
   Img.src="photo/image0.gif";
   j+=1;
   }
   else j=j-1;
   }
   document.getElementById("fs").innerHTML=j;
  
 }
document.onkeydown=downs;
 
 
 

function mySort()
{
  return Math.random()>.5;
}

function show1() //关卡+倒计时
 { 
  timess--;
  document.getElementById("times").innerHTML=timess;
  if(j>=30 && timess>0)
  {
   if(q==0)
   {
    q=1;
    timess=timess+25;
    time=700;
    gqs=2;
    document.getElementById("gq").innerHTML=gqs;
   }
  }
  if(j>=60 && timess>0)
  {
  
   if(p==0)
   {
    p=1;
    timess=timess+25;
    time=350;
    gqs=3;
    document.getElementById("gq").innerHTML=gqs;
   }
  }
  if(timess==0)   //游戏结束判定
   {
   alert("你的分数是"+j);
   clearTimeout(setTimeout("show1()",2000));
   }
  setTimeout("show1()",2000);
 }

//t=setTimeout(show2,1000);
function show2()

  i=Math.round(Math.random()*8);
  //document.write(Math.random()*(n-m)+m);m-n的值
 var currImg=document.getElementById("img_"+i);
 currImg.src="photo/image1.gif";
 setTimeout("show3()",time);
 setTimeout("show2()",time);

function show3()
{
var Img=document.getElementById("img_"+i);
 Img.src="photo/image0.gif";
}
function init()
{
 setTimeout(show1,time);
 var str=‘<table name="myT" border="0" width="300"  height="300" align="center" valign="middle">‘;
 for(var i=1;i<=3;i++)
 {
  str+="<tr>";
  for(var j=0;j<3;j++)
  {
   str+="<td onclick=‘judge("+ ((i-1)*3+j )+");‘>"
   str +="<img id=‘img_"+ ((i-1)*3 +j )+"‘ src=‘photo/image0.gif‘/>" 
   str+="</td>";
  }
  str+="</tr>";
 }
 str+= "</table>"
 document.getElementById("mt").innerHTML=str;
 setTimeout("show2()",0);
 setTimeout("show1()",0);
 setTimeout("count()",0);
}
alert("                       游戏流程\n第一关:要在倒计时结束前分数到达30\n第二关:在计时结束前到60则进入第四关\n每过一关加时25秒,共3关!")
</script>
<style type="text/css">
body {
 background-image: url(photo/image1.1.jpg);
 background-repeat: no-repeat;
 background-color: #FFF;
 background-size: cover;
 font-size: 36px;
}

</style>
</head>
<body >
<h1 align="center"> <div id="mt"></div></h1>
<input type="button" value="开始游戏"  onClick="init()"/>
<h4 align="center">关卡:<div id="gq">1</div></h4>
<h2 align="center"> 分数:<div id="fs"><span id="fs">0</span></div>
</h2>
<h3 align="center">倒计时: <div id="times"><span id="fs">0</span></div></h3>
</body>
</html>

技术分享

 

WEB期中考试小游戏-找宝石

标签:

原文地址:http://www.cnblogs.com/Kongshanyu/p/5416477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!