html+css+javaScript 写一个简单游戏看了就会

小游戏：九宫格也可以叫三子棋，边学习js边练习，界面长这样：

步骤：

1、画好九宫格

2、实现点击后把图片放上去（绑定监听事件）

3、交替画图

4、把每个div关联到一个二维数组，方便以后计算

5、计算如何才算赢

上传两颗蠢蠢的棋子

html+css+javaScript 写一个简单游戏看了就会

具体代码：

  1 <!DOCTYPE HTML>
  2 <html>
  3   <head>
  4     <meta name="generator"
  5     content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  6     <meta charset="UTF-8" />
  7     <title>九宫格</title>
  8     
  9     <style type="text/css">
 10          #square{
 11            position:relative;
 12            margin: 40px 450px;
 13            height: 316px;
 14            width: 316px;
 15            background-color: #87A2B5;
 16         }
 17         #square div{
 18             float: left;
 19             position:relative;
 20             background-color: white;
 21             border: 2px;
 22             border-radius: 2px;
 23             height: 100px;
 24             width: 100px;
 25             margin-top: 4px;
 26             margin-left:4px;
 27         
 28         
 29             
 30          }
 31         .img{
 32             position:relative;
 33             float:left;
 34                  
 35         }
 36                 
 37       
 38 </style>
 39   </head>
 40 
 41   <body bgcolor="#D7D1D1"  onload="init()"> 
 42 <script  type="text/javascript">
 43 
 44 var chessdata = new Array();
 45 var i,j,k=0, img_num=1;
 46 var myname=new Array("circle.gif","false.gif");//存储图片的数组
 47 function init() {
 48     var x=document.getElementById("square");
 49     //二层循环用来生成九个div
 50    for (i=0;i<3;i++){
 51      for (j=0;j<3;j++){
 52       x.innerHTML += "<div onclick=drawfigure(this,"+i+","+j+")></div>";      
 53      }      
 54 }
 55      //建立一个与九宫格对应的数组
 56      for (var i = 0; i < 3; i++) {
 57           chessdata[i] = new Array();
 58           for (var j = 0; j < 3; j++) {
 59             chessdata[i][j] = 0;
 60           }
 61     }
 62 }    
 63  function drawfigure(obj, x, y){
 64     if(chessdata[x][y] != 0){
 65         alert("此处有棋子了！");  //有棋子就直接返回，什么也不做
 66         return;
 67     }
 68     chessdata[x][y]=img_num%2+3;//画圆就给该数组元素赋值为4，画叉就给该数组元素赋值为3
 69     obj.innerHTML = '<img src="'+myname[img_num]+'"/>'; 
 70     img_num=(img_num+1)%2;//控制交替画图
 71     calculate(x,y);
 72  }
 73  
 74  //计算当前画图的位置是否有成一条线的
 75  function calculate(x,y){    
 76     var n=x,m=y,sum=0,sum1=0,sum2=0,sum3=0;
 77     
 78       //横向
 79       for(var i=0;i<3;i++){
 80         sum+=chessdata[n][i];
 81         judge(sum);
 82       } 
 83       
 84        //竖向
 85         for(var i=0;i<3;i++){
 86         sum1+=chessdata[i][m];
 87         judge(sum1);
 88       }
 89       
 90       //左斜
 91       if(n+m==2){
 92       for(var i=0;i<3;i++){
 93         sum2+=chessdata[i][2-i];
 94         judge(sum2);
 95       }
 96   }
 97   
 98      //右斜
 99       if(n==m){
100       for(var i=0;i<3;i++){
101         sum3+=chessdata[i][i];
102        judge(sum3);
103       }
104    }
105  }
106  
107  //根据图形所带的值计算是否满足成线
108  function judge(sum){
109      if(sum==12){
110         //判断胜利后弹出对话框，点击确定刷新
111          alert("X win"); 
112          window.location.reload(); 
113         }
114         else if(sum==9){
115          alert("O win");
116          window.location.reload(); 
117         }
118  }
119     
120 
121 </script>
122     <div> 九宫格游戏--------------</br>
123     又名：自己跟自己玩-(￢∀￢)σ</br></br>
124     简单的规则：</br>
125     点一下画圆，点第二下画叉</br>
126     去吧，皮卡丘！</br></div>
127     <div id="square">
128     
129     </div>
130   </body>
131 </html>

View Code