js小游戏——看你能坚持多久
点击另存用到的图片。
<!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" xml:lang="zh-cn" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>看你能坚持多久</title>
<style type="text/css">
#top{
color:white;
height:20px;
}
#time{
float:left;
}
#item{
float:left;
border:solid 1px gray;
width:100px;
padding:0;
margin:0 20px;
}
#item div{
background:yellow;
width:0px;
}
input{
margin:0 10px;
float:left;
}
#desc{float:left}
body{background:black}
</style>
<script type="text/javascript">
window.onload = init;
function init(){
time = 0;
timeDiv = document.getElementById('time');
input = document.getElementsByTagName('input')[0];
body = document.getElementById('body');
input.addEventListener('click',wenzi);
div = document.getElementById('item').firstChild;
width = screen.width;
}
function action(){
var xx = document.createElement('img');
xx.src = './xingxing.gif';
xx.style.width = random(10,100)+'px';
xx.style.position = 'absolute';
xx.style.left = random(0,width-100)+'px';
xx.style.top = random(20,600)+'px';
xx.onclick = del;
body.appendChild(xx);
time++;
setTime();
setWidth();
isGameOver();
}
function setTime(){
var timeText = document.createTextNode('时间：'+Math.floor(time*0.5));
timeDiv.replaceChild(timeText,timeDiv.firstChild);
}
function setWidth(){
div.style.width = num()*5+'px';
var numText = document.createTextNode(num());
div.firstChild.replaceChild(numText,div.firstChild.firstChild);
}
function isGameOver(){
if(num()>=20){
clearInterval(clock);
for(var i=0;i<document.images.length;i++){
(document.images)[i].onclick = '';
}
input.value="重新开始"
alert('游戏结束,您坚持了'+Math.floor(time*0.5)+'秒');
}
}
function random(x,y){
return Math.floor( Math.random() * (y-x+1) ) + x
}
function num(){
return document.images.length;
}
function del(){
body.removeChild(this);
setWidth();
}
function wenzi(){
if(input.value=='开始'){
input.value = '暂停';
begin();
for(var i=0;i<document.images.length;i++){
document.images[i].onclick = del;
}
}else if(input.value=='暂停'){
input.value = '开始';
clearInterval(clock);
for(var i=0;i<document.images.length;i++){
(document.images)[i].onclick = '';
}
}else if(input.value=='重新开始'){
input.value = '暂停';
while(body.hasChildNodes()) //当div下还存在子节点时 循环继续
{
body.removeChild(body.firstChild);
}
time = 0;
timeDiv.innerHTML='时间：0';
begin();
}
}
function begin(){
clock = setInterval('action()',500);
}
</script>
</head>
<body>
<div id="top">
<input type="button" value="开始"/>
<div id="time">时间：0</div>
<div id="item"><div><font color="red">0</font></div></div><div id="desc"><b>游戏说明：</b>点击消除星星，当星星数量达到20个时游戏结束。看你能坚持多久？</div>
</div>
<div id="body"></div>
</body>
</html>
