abstract： 学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码:<!DOCTYPE html> <html> <head> <meta charset=
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打地鼠的小游戏</title> <link rel="stylesheet" href="CSS/comment.css"> <script src="Javascript/JavaScript.js"></script> </head> <body> <p style="height: 30px;font-size: 20px;color: #EEEEEE;background: #445566;">欢迎来到打地鼠小游戏,让我们一起打啊打!</spap> <div id="bgDiv"> </div> <p>分数为:<span id="number"></span></p> <div style="width: 200px;height: 50px;background:black;text-align: center;margin: 0 auto ;"> <input style="height: 50px;color: #ffffff;font-size: 16px;background: red;" type="button" value="开始游戏"onclick="start()"> <input style="height: 50px;color: #ffffff;font-size: 16px;background: green;" type="button" value="结束游戏" onclick="stop()"> </div> </body> </html>
接下来是CSS部分代码:
body,div{
padding:0;
margin:0;
}
.div1{
width: 400px;
height: 400px;
background: gray;
margin: 0 auto;
}
.btn{
height: 35px;
width: 35px;
background-image: url("1.jpg");
}
p{
text-align: center;
}再往下就是控制这一切的javascript代码:
var hitNumber=0;
var timer=null;
var flag=null;
function start(){
if(timer==null){
timer=setInterval(function create(){//开始创建每一个地鼠,
flag=true;//这里设置flag的原因是用来防止onclick的多次点击累加
var newButton = document.createElement("input");
newButton.type="button";
newButton.value="地鼠";
newButton.style.height="40px";
newButton.style.width="40px";
newButton.style.backgroundImage="url(CSS/1.jpg)";//给每一个button添加背景图片
var box = document.getElementById("bgDiv");
box.appendChild(newButton);
newButton.onclick=hit;
newButton.style.marginLeft=randomX();
newButton.style.marginTop=randomX();
setTimeout(function(){
box.removeChild(newButton);
},1000);
},2000);
}
}
function stop(){//停止打地鼠,但是这里我在下边进行了一个结束时弹出一个结语框
clearInterval(timer);
var tip=document.createElement("div");
tip.style.height="100px";
tip.style.width="200px";
tip.style.background="red";
var box = document.getElementById("bgDiv");
box.appendChild(tip);
tip.style.margin="0 auto";
tip.style.color="white";
tip.style.fontSize="20px";
tip.style.textAlign="center";
tip.style.lineHeight="100px";
tip.innerHTML="恭喜你获得"+hitNumber+"分"
}
function randomX(){
var leftLength=Math.floor(Math.random()*360)+"px";
return leftLength;
}
function randomY(){
var topLength=Math.floor(Math.random()*360)+"px";
return topLength;
}
function hit(){//当点击地鼠时,进行打击次数的累加
if(flag){
flag=false;
hitNumber++;
//var hit1=document.getElementById("event.target.id");
var text1=document.getElementById("number");
text1.innerHTML=hitNumber;
}
}
