JS寫的一個方塊移動遊戲

Java代碼 
<script> 
            //用於判定是否是開始初始化方塊 
            var mark = false; 
            var starttime, endtime, finaltime = 0;  //記錄遊戲時間 
            var array = new Array();  //用一個數組裝所有綠色方塊對象 
            var timerarr = new Array();  //記錄每個綠色方塊 和 對應的計時器id 
             
            function move(e){ 
                var xy = document.getElementById("xy"); 
                var self = document.getElementById("self"); 
                x = e.clientX; 
                y = e.clientY; 
                xy.value = "當前坐標:"+x +","+y; 
                if(x>=454 && x<=530 &&y>=285 && y<=355 && mark==false){ 
                        mark = true; 
                        initothers(20); 
                } 
                target(e,x,y); 
            } 
             
            //線寬4px  格邊長36px   target函數定位白色方塊的位置 
            function target(e,x,y){ 
                 
                var self = document.getElementById("self"); 
                if(x>=12 && x<=855 && y>=40 &&y<=525 && mark ==true){ 
                    self.style.left = x +'px'; 
                    self.style.top =  y +'px'; 
                } 
            } 
            //初始化白方塊位置 
            function init(){ 
                var today = new Date(); 
                starttime = today.getTime(); 
                document.getElementById("self").style.left = 454+'px'; 
                document.getElementById("self").style.top = 282+'px'; 
            } 
            //用一個對象存儲綠色方塊信息 
            function piece(){ 
                piece.prototype.id = -1;   //方塊編號   從0開始 
                piece.prototype.dire = 0;  //移動方向   1上 2下 3左 4右 
                piece.prototype.top = 0; 
                piece.prototype.left = 0; 
            } 
 
            //初始化num個綠色移動方塊 
            function initothers(num){ 
                for(var i=0;i<num;i++){ 
                    document.getElementById("pan").innerHTML += "<p id='"+i+"'; style='height:36px;width:36px;background-color:#00FF00;z-index:100; position:absolute;left:-50px'></p>"; 
                    //num1表示從橫坐標出現還是縱坐標<1表示橫 >1表示縱   num2 >1表示沿著坐標軸運動  <1表示逆著坐標走 
                    var num1 = Math.random()*2; 
                    var num2 = Math.random()*2; 
                    var top1 = 43;   //top1表示從上向下移動   
                    var top2 = 563;  //top2表示從下向上移動 
                    var left1 = 14;  //left1表示左–>右 
                    var left2 = 894;  //右–>左 
                    var p = new piece(); 
                    p.id = i; 
                     
                    if(num1<1){ 
                        if(num2>1){  //從上往下移動 
                            p.dire = 2; 
                            p.top = top1; 
                            p.left = (Math.ceil(Math.random()*23)*40-26); 
                            document.getElementById(i).style.left = p.left+'px'; 
                            document.getElementById(i).style.top = top1+'px'; 
                             
                        }else{   //從下往上移動 
                            p.dire = 1; 
                            p.top = top2; 
                            p.left = (Math.ceil(Math.random()*23)*40-26); 
                            document.getElementById(i).style.left = p.left+'px'; 
                            document.getElementById(i).style.top = top2+'px'; 
                             
                        } 
                    }else{ 
                        //從左向右移動 
                        if(num2>1){ 
                            p.dire = 4; 
                            p.top = (Math.ceil(Math.random()*14)*40+3); 
                            p.left = left1; 
                            document.getElementById(i).style.left = left1+'px'; 
                            document.getElementById(i).style.top = p.top+'px'; 
                        }else{  //右向左 
                            p.dire = 3; 
                            p.top = (Math.ceil(Math.random()*14)*40+3); 
                            p.left = left2; 
                            document.getElementById(i).style.left = left2+'px'; 
                            document.getElementById(i).style.top = p.top+'px'; 
                        } 
                    } 
                    array.push(p); 
                } 
                 
                //初始化完成  觸發移動 
                var n; 
                for(n in array){ 
                    go(n,array[n].id,array[n].dire); 
                } 
            } 
             
            //重新定位一個綠色方塊location 
                function location(timerid,i,n,p){ 
                     
                    clearInterval(timerarr[timerid]); 
                    //alert(timerarr[timerid]); 
                    var num1 = Math.random()*2; 
                    var num2 = Math.random()*2; 
                    var top1 = 43;    
                    var top2 = 563;   
                    var left1 = 14;  
                    var left2 = 894;  
                     
                    if(num1<1){ 
                        if(num2>1){  
                            p.dire = 2; 
                            p.top = top1; 
                            p.left = (Math.ceil(Math.random()*23)*40-26); 
                            document.getElementById(i).style.left = p.left+'px'; 
                            document.getElementById(i).style.top = top1+'px'; 
                        }else{   
                            p.dire = 1; 
                            p.top = top2; 
                            p.left = (Math.ceil(Math.random()*23)*40-26); 
                            document.getElementById(i).style.left = p.left+'px'; 
                            document.getElementById(i).style.top = top2+'px'; 
                        } 
                    }else{ 
                        if(num2>1){ 
                            p.dire = 4; 
                            p.top = (Math.ceil(Math.random()*14)*40+3); 
                            p.left = left1; 
                            document.getElementById(i).style.left = left1+'px'; 
                            document.getElementById(i).style.top = p.top+'px'; 
                        }else{   
                            p.dire = 3; 
                            p.top = (Math.ceil(Math.random()*14)*40+3); 
                            p.left = left2; 
                            document.getElementById(i).style.left = left2+'px'; 
                            document.getElementById(i).style.top = p.top+'px'; 
                        } 
                    } 
                    go(n,p.id,p.dire); 
            } 
             
            //綠色方塊按規律直線移動 
               function go(n,i,dire){ 
                //當一個綠色方塊出界  重新初始化一個進入界面 
                var speed = Math.ceil(Math.random()*3)*10+10;  //速度隨機 
                 
                if(dire==2){ 
                        timerarr[i] = setInterval("array["+n+"].top>=565 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].top+=8;document.getElementById("+i+").style.top = array["+n+"].top+'px'; check(array["+i+"])",speed); 
                    } 
                if(dire==1){ 
                        timerarr[i] = setInterval("array["+n+"].top<=41 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].top-=8;document.getElementById("+i+").style.top = array["+n+"].top+'px';check(array["+i+"])",speed); 
                    } 
                if(dire==4){ 
                        timerarr[i] = setInterval("array["+n+"].left>=896 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].left+=8;document.getElementById("+i+").style.left = array["+n+"].left+'px';check(array["+i+"])",speed); 
                    } 
                if(dire==3){ 
                        timerarr[i] = setInterval("array["+n+"].left<12 ? location("+i+","+i+","+n+",array["+n+"]): array["+n+"].left-=8;document.getElementById("+i+").style.left = array["+n+"].left+'px';check(array["+i+"])",speed); 
                    } 
            }  
             
            //檢查是否與白色方塊相撞  傳入綠色方塊的對象進行判斷 
            function check(t){ 
                if(t.left<=x+75 && t.left>=x-36 && t.top<=y+75 && t.top>=y-36){ 
                    var today = new Date(); 
                    endtime = today.getTime(); 
                    finaltime = (endtime – starttime – 0) / 1000; 
                    window.alert('遊戲結束!你堅持瞭 ' + finaltime + ' 秒…'); 
                    //alert('鼠標坐標'+x+','+y+'  方塊坐標'+t.left+','+t.top); 
                    //重新載入頁面 
                    document.location.reload();    
                } 
            } 
        </script> 


Java代碼 
<body onload="init();"> 
        <input id ="xy" disabled=true/> 
        <!–<button id="self" style="position:relative;">ssss</button> –> 
        <p id="pan" style=" height: 565; width: 925; background-image:url(/wp-content/images1/20180918/26d1caeb-c0ca-38e2-87ce-56e862235a7955.jpg);background-repeat:no-repeat;" onmousemove="move(event)"> 
            <p id="self" style="height:76px;width:76px; background-color: white; position:absolute;border-width:1px; border-style:solid;border-color: red;"></p> 
        </p> 
         
    </body>

 

 

本文出自“奮鬥的小鳥”
 

You May Also Like