您的位置：首页 > Web前端 > JavaScript

js+html写的弱智游戏，坦克发射

2016-02-29 20:00 615 查看

我也不知道我自己是闲到什么地步了，想搞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)" onkeydown="go(event,100)">
<button onclick="start(100)">儿童级别</button>
<button onclick="start(10)">成人</button>
<button onclick="start(1)">牛逼</button>
<button onclick="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>

实在懒得找就把我这张拿去吧，，，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航