<!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" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> function demo(Obj){ var tdId=Obj.id; var table=document.getElementById("t"); var tdIdArray=tdId.split("-"); var x=parseInt(tdIdArray[0]); var y=parseInt(tdIdArray[1]); changeBgColor(tdId); if(x-1>=0){ changeBgColor((x-1)+"-"+y); } if(x+1<=4){ changeBgColor((x+1)+"-"+y); } if(y-1>=0){ changeBgColor(x+"-"+(y-1)); } if(y+1<=4){ changeBgColor(x+"-"+(y+1)); } success(); } function changeBgColor(id){ if(document.getElementById(id).bgColor=="#000000"){ document.getElementById(id).bgColor="#ffffff"; }else if(document.getElementById(id).bgColor=="#ffffff"){ document.getElementById(id).bgColor="#000000"; } } function success(){ var flag=true; for(i=0;i<5;i++){ for(j=0;j<5;j++){ if(document.getElementById(i+"-"+j).bgColor!="#ffffff"){ flag=false; } } } if(flag){ alert("你赢了!"); } } </script> </head> <body> <table id="t" border="1" width="500" height="500"> <tr> <td bgcolor="#000000" id="0-0" onclick="demo(this)"></td> <td bgcolor="#000000" id="0-1" onclick="demo(this)"></td> <td bgcolor="#000000" id="0-2" onclick="demo(this)"></td> <td bgcolor="#000000" id="0-3" onclick="demo(this)"></td> <td bgcolor="#000000" id="0-4" onclick="demo(this)"></td> </tr> <tr> <td bgcolor="#000000" id="1-0" onclick="demo(this)"></td> <td bgcolor="#000000" id="1-1" onclick="demo(this)"></td> <td bgcolor="#000000" id="1-2" onclick="demo(this)"></td> <td bgcolor="#000000" id="1-3" onclick="demo(this)"></td> <td bgcolor="#000000" id="1-4" onclick="demo(this)"></td> </tr> <tr> <td bgcolor="#000000" id="2-0" onclick="demo(this)"></td> <td bgcolor="#000000" id="2-1" onclick="demo(this)"></td> <td bgcolor="#000000" id="2-2" onclick="demo(this)"></td> <td bgcolor="#000000" id="2-3" onclick="demo(this)"></td> <td bgcolor="#000000" id="2-4" onclick="demo(this)"></td> </tr> <tr> <td bgcolor="#000000" id="3-0" onclick="demo(this)"></td> <td bgcolor="#000000" id="3-1" onclick="demo(this)"></td> <td bgcolor="#000000" id="3-2" onclick="demo(this)"></td> <td bgcolor="#000000" id="3-3" onclick="demo(this)"></td> <td bgcolor="#000000" id="3-4" onclick="demo(this)"></td> </tr> <tr> <td bgcolor="#000000" id="4-0" onclick="demo(this)"></td> <td bgcolor="#000000" id="4-1" onclick="demo(this)"></td> <td bgcolor="#000000" id="4-2" onclick="demo(this)"></td> <td bgcolor="#000000" id="4-3" onclick="demo(this)"></td> <td bgcolor="#000000" id="4-4" onclick="demo(this)"></td> </tr> </table> </body> </html>
javascript基础-黑白反斗棋
原创
©著作权归作者所有:来自51CTO博客作者小爱爱0419的原创作品,请联系作者获取转载授权,否则将追究法律责任
下一篇:jQuery-制作黑白反斗棋页面
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
JavaScript基础
前端基础
Math 数组 字符串 -
谷歌地球引擎中JavaScript语言的基础用法
本文主要对GEE中的JavaScript代码基础规则与语句、函数等加以介绍。本文是谷歌地球引擎(Google Earth Engine,GEE)系列教学文章的第九篇~
GEE 地球引擎 JavaScript 脚本语言 代码规则 -
【木棉花】:手机游戏——黑白翻棋
这次给大家带来的小分享是黑白翻棋的手机版本,也是JS写的,功能代码基本一致(采用第二篇的算法),只是布局会作相应修改。
HarmonyOS 木棉花 APP开发 -
Java实例---黑白五子棋[单机版]
Java实例---黑白五子棋
Java小程序 java 自动生成 mpx -
JavaScript游戏——五子棋
最近半个月一直在看深入的学习JavaScri...
html 事件委托 javascript i++ 面向对象 -
javascript米字棋 米字棋下载javascript米字棋 算法 应用商店 分类讨论 ci
-
javascript 五子棋 jquery五子棋
jQuery-----五子棋 1、效果 2、html代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link
javascript 五子棋 jQuery-----五子棋 html css javascript