javascript 制作坦克大战游戏初步图片与代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 制作坦克大战游戏初步图片与代码

技术文章搜索

关键字

Javascript 中的 javascript 制作坦克大战游戏初步图片与代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 496 ::

收藏到网摘: n/a

用javascript实现旋转图片效果的代码比较简单的jquery教程 Easy Ajax with jQuery 中文版全集

学了一阵子的javascript，该做点东西，虽然东西还是东拼西凑，见笑。方向键控制坦克移动，回车键发射炸弹。其他的功能敌方坦克那些还没写。

点击运行可以看到效果:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>javascript坦克游戏初步|阿会楠练习作品</title> <style type="text/css"> body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } </style> </head> <body> <div id="tanke"><img src="/upload/tech/20091012/20091012085750_11b921ef080f7736089c757404650e40.gif" /></div> </body>
</html>
<script language="JavaScript" type="text/javascript"> var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = new Array(100);//存放炸弹信息y var bombDirctionArray = new Array(100);//存放炸弹方向 var t = new Array(100);//炸弹加速度 for(var t_ = 0;t_ < 100;t_++) { t[t_] = 0; } var bombsetup = 3;//炸弹速度 var client_width = document.body.clientWidth + document.body.scrollLeft;//页面的宽度 var client_height = document.body.clientHeight + document.body.scrollTop;//页面的高度 function $(obj){ return document.getElementById(obj); } //页面所有炸弹的移动 function runAllBomb(){ var allBomb = document.getElementsByTagName("div"); for(var j_ = 1;j_ < allBomb.length;j_ ++) { //判断子弹的方向 if(bombDirctionArray[j_] == null) { var reg = /[a-z]{1,}\.gif/;//匹配只要找到图片的名字就可以了 bombDirctionArray[j_] = allBomb[j_].innerHTML.match(reg) + ""; } switch(bombDirctionArray[j_]) { case "ztop.gif": bombLeftArray[j_] = allBomb[j_].offsetLeft; bombTopArray[j_] = allBomb[j_].offsetTop; if(bombTopArray[j_] > 0){ allBomb[j_].style.top = bombTopArray[j_] - bombsetup*t[j_]; t[j_] ++; } else { allBomb[j_].style.display = "none"; } break; case "zbottom.gif": bombLeftArray[j_] = allBomb[j_].offsetLeft; bombTopArray[j_] = allBomb[j_].offsetTop; if(bombTopArray[j_] < client_height) { allBomb[j_].style.top = bombTopArray[j_] + bombsetup*t[j_]; t[j_] ++; } else { allBomb[j_].style.display = "none"; } break; case "zleft.gif": bombLeftArray[j_] = allBomb[j_].offsetLeft; bombTopArray[j_] = allBomb[j_].offsetTop; if(bombLeftArray[j_] > 0) { allBomb[j_].style.left = bombLeftArray[j_] - bombsetup*t[j_]; t[j_] ++; } else { allBomb[j_].style.display = "none"; } break; case "zright.gif": bombLeftArray[j_] = allBomb[j_].offsetLeft; bombTopArray[j_] = allBomb[j_].offsetTop; if(bombLeftArray[j_] < client_width) { allBomb[j_].style.left = bombLeftArray[j_] + bombsetup*t[j_]; t[j_] ++; } else { allBomb[j_].style.display = "none"; } break; } } } var runBomb = window.setInterval(runAllBomb,100); //取得页面上所有的炸弹，并让其以一定速度运行 document.onkeydown = function(evt){ var evt = window.event?window.event:evt;//获取event对象的兼容写法，兼容FF和IE var tanke_w = $("tanke").offsetWidth;//取得坦克的宽度 var tanke_h = $("tanke").offsetHeight;//取得坦克的高度 var current_x = $("tanke").offsetLeft;//坦克当前x坐标 var current_y = $("tanke").offsetTop;//坦克当前y坐标 var step = 2;//移动的速度 var z_step = 1;//子弹速度 switch(evt.keyCode) { //向左 case 37: $("tanke").style.left = current_x + document.body.scrollLeft - step + "px"; $("tanke").innerHTML = "<img src='/upload/tech/20091012/20091012085752_0d3180d672e08b4c5312dcdafdf6ef36.gif' />"; break; //向右 case 39: $("tanke").style.left = current_x + document.body.scrollLeft + step + "px"; $("tanke").innerHTML = "<img src='/upload/tech/20091012/20091012085752_fc49306d97602c8ed1be1dfbf0835ead.gif' />"; break; //向上 case 38: $("tanke").innerHTML = "<img src='/upload/tech/20091012/20091012085750_11b921ef080f7736089c757404650e40.gif' />"; $("tanke").style.top = current_y + document.body.scrollTop - step + "px"; break; //向下 case 40: $("tanke").innerHTML = "<img src='/upload/tech/20091012/20091012085755_a4300b002bcfb71f291dac175d52df94.gif' />"; $("tanke").style.top = current_y + document.body.scrollTop + step + "px"; break; //发出攻击 case 13: //新子弹 var createDiv = document.createElement("div"); createDiv.setAttribute("id","bomb" + i); i ++; //createDiv.style.overflow = "hidden"; createDiv.style.position = "absolute"; var reg = /[a-z]{1,}\.gif/;//匹配只要找到图片的名字就可以了 var current_decoration = $("tanke").innerHTML.match(reg); switch(current_decoration[0])//按下回车发弹 { //炮筒对着左边 case "left.gif": createDiv.style.left = current_x - 5 + "px"; createDiv.style.top = current_y + (tanke_h/2) - 3 + "px"; createDiv.innerHTML = "<img src='/upload/tech/20091012/20091012085757_e00da03b685a0dd18fb6a08af0923de0.gif' />" break; //炮筒对着右边 case "right.gif": createDiv.style.left = current_x + tanke_w - 7 + "px"; createDiv.style.top = current_y + (tanke_h/2) - 1 + "px"; createDiv.innerHTML = "<img src='/upload/tech/20091012/20091012085757_cf67355a3333e6e143439161adc2d82e.gif' />"; break; //炮筒对着上边 case "top.gif": createDiv.style.left = current_x + (tanke_w/2) - 5 + "px"; createDiv.style.top = current_y - 5 + "px"; createDiv.innerHTML = "<img src='/upload/tech/20091012/20091012085758_f5f8590cd58a54e94377e6ae2eded4d9.gif' />"; break; //炮筒对着下边 case "bottom.gif": createDiv.style.left = current_x + (tanke_w/2) - 7 + "px"; createDiv.style.top = current_y + tanke_h - 7 + "px"; createDiv.innerHTML = "<img src='/upload/tech/20091012/20091012085802_58e4d44e550d0f7ee0a23d6b02d9b0db.gif' />"; break; } document.body.appendChild(createDiv); break; } }
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

用javascript实现旋转图片效果的代码比较简单的jquery教程 Easy Ajax with jQuery 中文版全集

Javascript 中的 javascript 制作坦克大战游戏初步 图片与代码

评论 (0) All

Javascript 中的 javascript 制作坦克大战游戏初步图片与代码