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

时间:2020-05-12 人气:0

学了一阵子的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><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/26004.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 onerror="javascript:this.src='/skin1/img/error.jpg';" src='//www.qb5200.com/jstest/tanke/left.gif' />"; 
                break; 
                 
                //向右 
                case 39: 
                $("tanke").style.left = current_x + document.body.scrollLeft + step + "px"; 
                $("tanke").innerHTML = "<img onerror="javascript:this.src='/skin1/img/error.jpg';" src='//www.qb5200.com/jstest/tanke/right.gif' />"; 
                break; 
                 
                //向上 
                case 38: 
                $("tanke").innerHTML = "<img onerror="javascript:this.src='/skin1/img/error.jpg';" src='https://img.qb5200.com/download-x/20200511/26004.gif' />"; 
                $("tanke").style.top = current_y + document.body.scrollTop - step + "px"; 
                break; 
                 
                //向下 
                case 40: 
                $("tanke").innerHTML = "<img onerror="javascript:this.src='/skin1/img/error.jpg';" src='//www.qb5200.com/jstest/tanke/bottom.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 onerror="javascript:this.src='/skin1/img/error.jpg';" src='//www.qb5200.com/jstest/tanke/zleft.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 onerror="javascript:this.src='/skin1/img/error.jpg';" src='//www.qb5200.com/jstest/tanke/zright.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 onerror="javascript:this.src='/skin1/img/error.jpg';" src='//www.qb5200.com/jstest/tanke/ztop.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 onerror="javascript:this.src='/skin1/img/error.jpg';" src='//www.qb5200.com/jstest/tanke/zbottom.gif' />"; 
                        break;  
                    } 
                     document.body.appendChild(createDiv); 
                break; 
                 
            } 
             
        } 
             
         
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容

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

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