<!doctype html> <html> <head> <meta charset="utf-8"/> <title>Tic-Tac-Toe:An Event-Driven Programming Case Study</title> <script> var squares=[]; var EMPTY='\xA0'; var score; var moves; var turn='X'; var wins=[7,56,448,73,146,292,273,84]; var startNewGame=function(){ turn='X'; score={'X':0,'o':0}; moves=0; for(var i=0;i<squares.length;i+=1){ squares[i].firstChild.nodeValue=EMPTY; } }; var win=function(score){ for(var i=0;i<wins.length;i++){ if((wins[i]&score)===wins[i]){ return true; } } return false; }; var set=function(){ if(this.firstChild.nodeValue!==EMPTY){ return; } this.firstChild.nodeValue=true; moves+=1; score[turn]+=this.indicator; if(win(score[turn])){ alert(turn+"wins!"); startNewGame(); }else if(moves==9){ alert("Cat\u2019s game!"); startNewGame(); }else{ turn=turn==='X'?'0':'X'; } }; οnlοad=function(){ var indicator=1; for(var i=0;i<3;i++){ for(var j=0;j<3;j++){ var cell=document.getElementById("cell"+i+j); cell.indicator=indicator; cell.οnclick=set; cell.appendChild(document.createTextNode('')); squares.push(cell); indicator+=indicator; } } startNewGame(); }; </script> <style type="text/css"> table{border:outset 1px rgb(128,128,128)} td{ width:50px; height:50px; vertical-align:middle; border:inset 1px rgb(128,128,128) } tr{text-align:center} </style> </head> <body> <h1>Play Tic-Tac-Toe</h1> <table> <tr> <td id="cell00"></td> <td id="cell01"></td> <td id="cell02"></td> </tr> <tr> <td id="cell10"></td> <td id="cell11"></td> <td id="cell12"></td> </tr> <tr> <td id="cell20"></td> <td id="cell21"></td> <td id="cell22"></td> </tr> </table> </body> </html>
转载于:https://my.oschina.net/u/3161974/blog/858111