方块游戏

要完成此效果需要三个步骤

第一步：把如下代码加入到<head>区域中

<script language="JavaScript">
<!--
/***************** Magic Squares Functions *********************/
function initArray() {      
        this.length = initArray.arguments.length      
        for (var i = 0; i < this.length; i++)      
                this[i+1] = initArray.arguments[i]   
}

var pos = new initArray(9,9,9,9,9,9,9,9,9);
var nummoves= 0;                                                

function random() {      
        today = new Date();      
        num = today.getTime();      
        num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9;      
        return num;   
}

function display(pos) {       
        for (var i=0; i<9; i++)  {
                document.forms[0].elements[i].value = pos[i];
        }
        document.forms[0].moves.value= nummoves;
        win();   
}

function move(num) {     
// num is the number of the field the user clicked - not the image!     
        if (num < 8 && pos[num+1]==0) {            // switch with num to right
                pos[num+1]= pos[num];                
                pos[num]= 0;                  
                nummoves++;              
        }         
        else if (num > 0 && pos[num-1]==0) {       // switch with num to left       
                pos[num-1]= pos[num];              
                pos[num]= 0;               
                nummoves++;           
        }       
        else if (num > 2 && pos[num-3]==0) {       
                pos[num-3]= pos[num];       
                pos[num]= 0;        
                nummoves++;     
        }      
        else if (num < 6 && pos[num+3]==0 ) {                  
                pos[num+3]= pos[num];                  
                pos[num]= 0;                   
                nummoves++;                 
        }           
        //else illegal move => no move!         
        display(pos);   
}   

function win() {     
        if (pos[0]== 1 & pos[1]== 2 & pos[2]== 3 & pos[3]== 4 & 
                pos[4]== 5 & pos[5]== 6 & pos[6]== 7 & pos[7]== 8 & pos[8]== 0) {         
                        if (confirm('You did it! Do you want to restart?')) newgame();     
                }   
}   

function newgame() {      
        var x=1;
        for (var i=0; i<9; i++) {
                pos[i]=9;
        }
        for (var i=0; i<9;i++) {        
                randomnum=random();
                if (randomnum==9) randomnum=8;
                x=1;
                for (var j=0; j<9; j++)  {
                        if (j==i)  continue;
                        if (randomnum==pos[j]) {
                                x=0;
                                break;
                        }
                }
                if (x==0) {
                        i--;
                        continue;
                }
                //alert("i="+i+", randomnum="+randomnum);
                pos[i]=randomnum;
        }      
        nummoves=0;      
        display(pos);   
}   
// -->
</script>


第二步：把如下代码加入到<body>区域中

<center>
<table border=0 celpadding=0 cellspacing=0>
<tr><td>
<form>
          <div align="center">
            <input type="button" value=" 1 " onClick="window.move(0)">
            <input type="button" value=" 2 " onClick="window.move(1)">
            <input type="button" value=" 3 " onClick="window.move(2)">
            <br>
            <input type="button" value=" 4 " onClick="window.move(3)">
            <input type="button" value=" 5 " onClick="window.move(4)">
            <input type="button" value=" 6 " onClick="window.move(5)">
            <br>
            <input type="button" value=" 7 " onClick="window.move(6)">
            <input type="button" value=" 8 " onClick="window.move(7)">
            <input type="button" value=" 0 " onClick="window.move(8)">
          </div>
          <p align="center"> 移动步数<br>
            <input name="moves" size=7 value=" 0 ">
          <p align="center"> 
            <input type="submit" value="New Game" onClick="window.newgame()">
        </form>
</td></table>
  <p><font color="#33FF33">移动方块使数字依次排列</font> 


第三步：把“onLoad="window.newgame()"”加在<body>标记里
例如：<body onLoad="window.newgame()">


posted @ 2006-12-14 20:42  My name is chenyu  阅读(170)  评论(0)    收藏  举报