JavaScript五子棋_游戏娱乐特效

模板酷站
  •       3/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      纯JavaScript网页版五子棋游戏,代码精简,界面美观,适合学习也适合娱乐,五子棋游戏是一款很益智的游戏,很多朋友都喜欢!

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>网页游戏五子棋</title> <style> *{ margin:0; padding:0; } #main{ width:502px; height:502px; border-top:#555 solid 1px; border-right:#555 solid 1px; background-color:#CCC; margin:0px auto; position:absolute; z-index:1; } #main .div{ width:19px; height:19px; border-bottom:#555 solid 1px; border-left:#555 solid 1px; float:left; display:inline; line-height:19px; } #main2{ position:absolute; z-index:2; padding:10px; width:480px; height:480px; } #main2 span{ width:20px; height:20px; display:block; float:left; cursor:pointer; line-height:20px; font-size:1px; } #main2 span.wb{ background:url(http://p1.mb5u.com/texiao/jMpx.gif) no-repeat; } #main2 span.bb{ background:url(http://p1.mb5u.com/texiao/lq.gif) no-repeat; } #aa{ text-align:center; height:36px; line-height:36px; font-size:17px; } </style> <script type="text/javascript" language="javascript"> function $(o){ return document.getElementById(o); } var flag=0; var black="黑方" var witer="白方" function played(){ var piece=$("main2").getElementsByTagName("span"); for(var i=0;i<piece.length;i++){ piece[i].onclick = function(){ showPieces(this); return false } } } function showPieces(t){ if(t.className!="wb" && t.className!="bb"){ if(flag==0){ t.className="wb" flag=1; panduan(witer) }else{ t.className="bb" flag=0; panduan(black) } } } function panduan(te){ $("aa").innerHTML="当前执棋:"+te } </script> </head> <body> <div id="aa"></div> <div id="main"></div> <div id="main2"></div> <script type="text/javascript" language="javascript"> var _div=[] var _span=[] for(i=0;i<625;i++){ _div[i]=document.createElement("div"); _div[i].className="div" $("main").appendChild(_div[i]) } for(j=0;j<576;j++){ _span[j]=document.createElement("span") $("main2").appendChild(_span[j]) } panduan(black) played() </script> </body> </html>