一、放假闲来无事，复习复习原生js写的一个小游戏，多多指点！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点灯游戏</title>
<style type="text/css">
#tab{
width: 400px;
height: 400px;
margin: 0px auto;
}
td{
border: 1px solid red;
background-color: black;
border-radius: 100px;
}
</style>
</head>
<body>
<!--<table border="1" cellspacing="0" cellpadding="0" id="tab" >
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>-->
<script type="text/javascript">
var num=1;//默认过关等级
window.οnlοad=function(){
creattable();//页面加载完成后就开始执行该函数
}
function yanzheng(){//判断是否过关函数
var gg=true;//默认过关
var tds=document.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
//没有过关
if(tds[i].style.backgroundColor=="black"||tds[i].style.backgroundColor==""){
gg=false;
break;
}
//过关啦
else{
gg=true;
}
}
if(gg){
alert("恭喜过"+num+"关！");
num++;
creattable();
}
}
function creattable(){
var tab=document.createElement("table");
tab.id="tab";
document.body.innerHTML="";
document.body.appendChild(tab);
for (var i = 0; i < num; i++) {
var tr=document.createElement("tr");
tab.appendChild(tr);
for (var j = 0; j < num; j++) {
var td=document.createElement("td");
td.οnclick=td_onclick;
tr.appendChild(td);
}
}
}
function td_onclick(){
var danhang=this.parentNode.rowIndex;//点击某个单元格所在行的索引
var danlie=this.cellIndex;//点击某个单元格所在列的索引
var tables=document.getElementById("tab");
// var thang=tables.rows.length;
for (var j = 0; j<tables.rows.length; j++) {//表格的某一行
for (var k = 0; k < tables.rows[j].cells.length;k++) {//所在行的那 一列
if(j==danhang||k==danlie){
var cell=tables.rows[j].cells[k];
if(cell.style.backgroundColor==""||cell.style.backgroundColor=="black"){
cell.style.backgroundColor="white";
}
else{
cell.style.backgroundColor="black";
}
}
}
}
yanzheng();
}
</script>
</body>
</html>
二、效果图
