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

JS版本的小游戏，Dom技术的全方位应用

2013-11-18 14:59 525 查看
这里主要是采用最基本的javaScript技术，进行的一次逻辑思维的大练习。最终结果只是做到了这个地步。我一向希望有人将我的代码修改修改，所以在这里特别开源一份最新设计的游戏。上面应该有很多初学javaScript初学者一直在寻找的技术。我也是初学者，但是所以我明白你们在找什么。。。。。下面是游戏的代码展示区域：图片可以随意更换，我这里只是简单演示：




 这是一款可以左右移动设计的游戏，打击成功，那么游戏会给予成功提示，失败，游戏也会给予提示。 



 
 向上键位开火，向下为手动装弹，左右为移动当前的位置。手动装弹没有时间提示，第四张图片为自动装弹的情况。装弹期间允许射击。下面是我的代码区：

<html>
<head>
<title> 闪一下(版本一)</title>
<script type="text/javascript">
//var i=0;//子弹计数器
var step=20;
function movediv(event){
var gun=document.getElementById("gun");
var x=gun.offsetLeft;
var y=gun.offsetTop;
//获取父节点宽度
var main=document.getElementById("main");
var start=document.getElementById("start");
var width=start.offsetWidth;//获取当前小div的宽度
var px=start.offsetLeft;//获取div距离左边的位置
var ev=event?event:window.event;//主要在ff,ie中兼容的问题处理方式
if(ev.keyCode==37){//左
if(px >= x){//如果两个左边坐标一样，
x=px;
}else{//不一样意味着div可以左移，所以继续减40
x=x-step;
}
}
var i=0;//子弹计数器
if(ev.keyCode==38){//上
//攻击数据,首先书坐标数据

var x1=x+20;
var y1=y;
firethewhole(x1,y1,i);//创建原始数据
firethezidan(i);//执行数据
//对球进行计数，同时有利于每球进行区别

}
if(ev.keyCode==39){//右
if(x>=(width+px-step)){//如果移动到最右边
x=width+px-step;
}else{//没有移动到最右边，说明还可以继续右移
x=x+step;
}
}
if(ev.keyCode==40){//下
//用于加载武装数据
addzidan();
}
if(ev.keyCode==13){//enter键
createball();
}
start.removeChild(gun);//将原来的图片清理出去
var ngun=document.createElement("img");//创建新的元素
ngun.id="gun";
ngun.style.position="absolute";//采用绝对位置
ngun.style.left=x;
ngun.style.top=y;
ngun.width=40;
ngun.height=40;
ngun.src="images/xing.gif";
start.appendChild(ngun);//将包装完成的图片放入父类div中
}
var step_y=30;
var mintop=68;
var x_ball,y_ball;
var tball;
//生成一些障碍物
function createball(){
clearTimeout(tball);
var main=document.getElementById("main");
var oldball=document.getElementById("img_");
if(oldball!=null){
main.removeChild(oldball);
y_ball+=step_y;
}else{
y_ball=mintop;
}

var ball=document.createElement("img");
ball.src="images/cai.gif";
ball.width=30;
ball.height=30;
//获取位移坐标
x_ball=createimg_x();
// x_ball=28;//调试期间设定
// alert(y);
ball.id="img_";

//创建初始化位移坐标
ball.style.position="absolute";
ball.style.left=x_ball;
ball.style.top=y_ball;
main.appendChild(ball);
createdivform(x_ball,y_ball,"我闪","blue");//没有捉住的效果
if(y_ball<max){
tball=setTimeout("createball()",500);//让球在原地停留1秒钟
}else{
createdivform(x_ball,y_ball,"嘿嘿","blue");//没有捉住的效果
alert("game over");
main.removeChild(ball);
}

}
//在x轴上范围为8---〉608
var max=608;
function createimg_x(){
var x=parseInt(Math.random()*572+8);
return x;
}
//在y轴上的范围为68--->608
function createimg_y(){
var y=parseInt(Math.random()*540+68);
return y;
}
var dantou=0;
var maxdantou=60;
var tzidan;
var count=0;//计数器，为以后的进一步应用做准备
//用于响应加载武器装备的事件，自动加载武器
function autozidan(){
if(dantou<maxdantou){
var time=maxdantou-dantou;
document.getElementById("zidan").innerHTML="离完成还有<span style='color:red'>"+((time%2==0)?parseInt(time/2):parseInt(time/2+1))+"</span>秒,弹头数为："+dantou;
dantou++;
tzidan=setTimeout("autozidan()",500);
}else{
document.getElementById("zidan").innerHTML="<span style='color:red'>加载完成</span>";
document.getElementById("zidan").innerHTML="当前子弹数：<span id='ownzidan' style='color:red'>"+dantou+"</span>";
count++;
}
}
//手动加载武器
function addzidan(){
if(dantou<maxdantou){
dantou++;
document.getElementById("zidan").innerHTML="当前子弹数：<span id='ownzidan' style='color:red'>"+dantou+"</span>";
}
if(dantou>=maxdantou){
dantou=maxdantou;
document.getElementById("zidan").innerHTML="<span style='color:red'>加载完成</span>";
document.getElementById("zidan").innerHTML="当前子弹数：<span id='ownzidan' style='color:red'>"+dantou+"</span>";
}
}
var tzdyd;
//发射子弹的函数模式,此处存在严重问题
function firethewhole(x,y,i){
var main=document.getElementById("main");
if(dantou>0){//有弹头就可以发射子弹
var zidan=document.createElement("img");
zidan.src="images/bluedot.png";
zidan.height=15;
zidan.id="zd_"+i;
zidan.width=15;
zidan.style.position="absolute";
zidan.style.left=x;
zidan.style.top=y;
main.appendChild(zidan);
dantou--;
i++;
document.getElementById("zidan").innerHTML="当前子弹数：<span id='ownzidan' style='color:red'>"+dantou+"</span>";//用于监控

}else if(dantou==0){
var ok=window.confirm("没子弹了，是否自动充弹");
if(ok==true){
autozidan();
}else{
alert("手动充弹,按向下键");

}
}
}
var stopb;
//关于运动轨迹的计算,采用全封闭式的函数，尽量减少对其他数据的影响
function firethezidan(i){

var main=document.getElementById("main");
var ball=document.getElementById("zd_"+i);
var y=ball.offsetTop;var x=ball.offsetLeft;;//子弹初始坐标
if(ball!=null){
main.removeChild(ball);//初始化移除子弹，使得整个过程看起来更加连贯

if(y<=68){//当子弹出界，那么要做的就是移除子弹

clearTimeout(stopb);

main.removeChild(ball);
}else{
y=y-15;
}
}
coreheatball(x,y,ball);
ball=document.createElement("img");
ball.style.position="absolute";
ball.src="images/bluedot.png";
ball.id="zd_"+i;
ball.style.left=x;//在横坐标方向基本保持不变
ball.style.top=y;//在纵坐标上逐次减少15这样可以让图片显示起来在视觉上更加连贯
main.appendChild(ball);
stopb=setTimeout("firethezidan('"+i+"')",100)+i;//一个变量在多个子弹数目下会产生冲突，这种情况下应该进行一些处理
}
//最重要的业务逻辑处理方式,传入参数为当前子弹的坐标
function coreheatball(x,y,ball_1){
var ball=document.getElementById("img_");
var xball=ball.offsetLeft;
var yball=ball.offsetTop;
if(x>=(xball+30)||x <= (xball-15)||y>=(yball+30)||y<=yball-15){
createdivform(xball,yball,"我闪","blue");//没有捉住的效果
}else{
createdivform(xball,yball,"倒霉","red");
var ok=window.confirm("you are a clever people,continue...");
if(ok){//这里需要对持程序进行初始化处理，就目前遇到的问题来看，还需要多程序如何启动进行解析。
var main=document.getElementById("main");
while(main.hasChildNodes()){
main.removeChild(main.firstChild);
}
clearTimeout(stopb);
main.removeChild(ball_1);
createball();//重新创建进行新的游戏
}
}

}
//设计一个文本特效
function createdivform(xball,yball,str,color){
var main=document.getElementById("main");
var div=document.getElementById("worn");
if(div!=null){
main.removeChild(div);
}
div=document.createElement("div");//重新创建
div.style.position="absolute";
div.width=60;
div.height=20;
div.id="worn";
div.style.left=xball+30;
div.style.top=yball-20;
div.style.color=color;

var text=document.createTextNode(str);
div.appendChild(text);
main.appendChild(div);
}
</script>
<style type="text/css">

.main{
width:608px;
height:540px;
background-color:#626262;

}
.start{
width:608px;
height:40px;
background-color:#123456;
}
.gun{
width:40px;
height:40px;
}
span{
background-color:white;
}
.head{
margin:0px;
}
</style>
</head>

<body onkeydown="movediv(event)" >
<div id="head" style="width:600px;height:32px;background-color:gray">

<p id="score" style="width:200px;margin-left:8px"></p><p id="zidan" style="width:400px;margin-left:209px;"></p>

</div>
<br/>
<div id="main" class="main">

</div>
<div id="start" class="start" >
<img id="gun" class="gun"  src="images/xing.gif"/>
</div>
<div>
<pre>这里通过上下左右键控制这个div的移动，以enter键开始</pre>
</div>
</body>
</html>

我的代码重用度不是很高，按道理是可以封装的。这里主要是向新秀们提供思路。有什么意见多多提示，谢谢。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航