javascript基础-黑白反斗棋

来源：互联网发布：男士护肤品品牌知乎编辑：程序博客网时间：2024/04/29 16:34
<!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>
2 0