我也不知道我自己是闲到什么地步了,想搞Java开发但是却分到了测试。学了几天js,写了这么个玩意儿。直接copy,再加一张名为tank.PNG的图片就可以看到效果了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
游戏规则:左右键控制方向,z键发射子弹
<input type="hidden" id="h" class="10">
<script type="text/javascript">
var h=document.getElementById("h");
var selfIn=0;
function come(id){
var pxN=parseInt(h.className);
if(pxN>=500){
alert("游戏结束");
self.clearInterval(selfIn);
return false;
}
pxN=pxN+1;
h.className=pxN.toString();
var ele=document.getElementById(id);
ele.className="start";
ele.style.height=pxN.toString()+"px";
}
function start(speed){
document.getElementById("tank").attributes["onkeydown"].nodeValue="go(event,"+speed+")";
if(document.getElementsByClassName("start").length!=0){
self.clearInterval(selfIn);
var sel=(document.getElementsByClassName("start"))[0];
sel.style.height="10px";
document.getElementById("h").className="10";
sel.className=" ";
}
var n=Math.random().toString();
var id= n.substring(2,3)+"_";
selfIn=self.setInterval("come('"+id+"')",speed);
// self.setInterval("come('"+id+"',"+pxN+")",speed);
}
</script>
<!--键盘打击事件-->
<script type="text/javascript">
function go(ele,sp){
var e=ele.keyCode;
if(e==37){
var cl=document.getElementsByClassName("tf");
var t=cl[0];
var id=parseInt(t.id);
if(id==0){
return false;
}//对上一个元素进行清空
t.className=" ";
t.style.backgroundImage="";
//对前一个元素进行属性增加
var preId=id-1;
var nod=document.getElementById(preId.toString());
nod.className="tf";
nod.style.backgroundImage="url(tank.PNG)";
nod.style.backgroundRepeat="no-repeat";
}else if(e==39){
var cl=document.getElementsByClassName("tf");
var t=cl[0];
var id=parseInt(t.id);
if(id==9){
return false;
}//对上一个元素进行清空
t.className=" ";
t.style.backgroundImage="";
//对前一个元素进行属性增加
var preId=id+1;
var nod=document.getElementById(preId.toString());
nod.className="tf";
nod.style.backgroundImage="url(tank.PNG)";
nod.style.backgroundRepeat="no-repeat";
}else if(e==90){
var shoot=document.getElementsByClassName("tf")[0];
var shootTarget=document.getElementById(shoot.id+"_");
if("start"==shootTarget.className){
start(sp);
}else{
return false;
}
}else{
return false;
}
}
</script>
<div id="foe" style="width: 1000px;height: 500px;background-color: #D2E0E6"></div>
<div id="tank" style="width:1000px;height: 125px;background-color: rgba(16, 16, 33, 0.47)" οnkeydοwn="go(event,100)">
<button οnclick="start(100)">儿童级别</button>
<button οnclick="start(10)">成人</button>
<button οnclick="start(1)">牛逼</button>
<button οnclick="start(0.1)">不是人级别</button><br>
</div>
<!--创造排版-->
<script type="text/javascript">
var fo=document.getElementById("foe");
var tank=document.getElementById("tank");
for(var v=0;v<10;v++){
var node=document.createElement("div");
node.style.width="100px";
node.style.height="100px";
node.style.float="left";
node.id= v.toString();
if(v=="5"){
node.className="tf";
node.style.backgroundImage="url(tank.PNG)";
node.style.backgroundRepeat="no-repeat";
}
tank.appendChild(node);
<!--上排-->
var tid=v+"_";
var nod=document.createElement("div");
nod.style.width="100px";
nod.style.height="10px";
nod.style.float="left";
nod.style.backgroundColor="red";
nod.id=tid;
fo.appendChild(nod);
}
</script>
</body>
</html>
实在懒得找就把我这张拿去吧,,,