简单图表填充小游戏，看下你能否把所有的格子都填满，使用js来实现这个填充功能，你是否需要用到呢？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<TITLE>js制作填充图表小游戏_武鸣人</TITLE>
</HEAD>
<BODY>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<h2>你能选中所有格子吗？</h2>
<table width="400" height="270" border="0" cellpadding="0" cellspacing="1">
<tr align="center">
<td bgcolor="#0099FF" width="25%" id="0-0" onclick="ct(this)">A</td>
<td bgcolor="#0099FF" width="25%" id="0-1" onclick="ct(this)">B</td>
<td bgcolor="#0099FF" width="25%" id="0-2" onclick="ct(this)">C</td>
<td bgcolor="#0099FF" width="25%" id="0-3" onclick="ct(this)">D</td>
</tr>
<tr align="center" width="90">
<td bgcolor="#0099FF" width="25%" id="1-0" onclick="ct(this)">E</td>
<td bgcolor="#0099FF" width="25%" id="1-1" onclick="ct(this)">F</td>
<td bgcolor="#0099FF" width="25%" id="1-2" onclick="ct(this)">G</td>
<td bgcolor="#0099FF" width="25%" id="1-3" onclick="ct(this)">H</td>
</tr>
<tr align="center" width="90">
<td bgcolor="#0099FF" width="25%" id="2-0" onclick="ct(this)">I</td>
<td bgcolor="#0099FF" width="25%" id="2-1" onclick="ct(this)">J</td>
<td bgcolor="#0099FF" width="25%" id="2-2" onclick="ct(this)">Q</td>
<td bgcolor="#FF9999" id="2-3" onclick="resetBox()"> </td>
</tr>
</table>
<h2 id="wuming_ren"></h2>
<h2 id="www_wuming_ren"></h2>
<script type="text/javascript">
function $(element){return document.getElementById(element);}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var count = 0;//总次数
var list = [];
var box = [
[1, 1, 1, 1],
[1, 1, 1, 1],
[1, 1, 1, 0],
];
var maxX = 2; //最大行
var maxY = 3; //最大列
var offsets = [
[-1, 0],[1, 0],[0, -1],[0, 1]
];
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function on_board(p){
return ( (p[0] >= 0) && (p[0] <= maxX) && (p[1] >= 0) && (p[1] <= maxY) )?true:false;
}
function check(){
var m = 0;
for(var i=0; i<3; i++){
for(var j=0; j<4; j++){
m += box[i][j];
}
}
if(-11 == m)return true;
return false;
}
function ct(o){
var p = o.id.split('-');
//#33CC99
if(1 == box[p[0]][p[1]]){ //可操作
box[p[0]][p[1]] = 0;
$(p[0] + '-' + p[1]).bgColor = '#33CC99';
//处理临点
for(var i=0; i<4; i++){
var np = [parseInt(p[0]) + offsets[i][0], parseInt(p[1]) + offsets[i][1]];
if(on_board(np) && (np[0] + np[1] < 5)){
if(1 == box[np[0]][np[1]]){
box[np[0]][np[1]] = -1;
$(np[0] + '-' + np[1]).bgColor = '#33CC99';
}else{
box[np[0]][np[1]] = 1;
$(np[0] + '-' + np[1]).bgColor = '#0099FF';
}
}
}
list.push(o.innerHTML);
count++;
if(check()){
$('wuming_ren').innerHTML = '恭喜过关，总次数：' + count;
$('www_wuming_ren').innerHTML = list;
return;
}
$('wuming_ren').innerHTML = '尝试次数：' + count;
$('www_wuming_ren').innerHTML = list;
}
}
function resetBox(){
for(var i=0; i<3; i++){
for(var j=0; j<4; j++){
box[i][j] = 1;
$(i + '-' + j).bgColor = '#0099FF';
}
}
box[2][3] = 0;
$(2 + '-' + 3).bgColor = '#FF9999';
list = [];
$('wuming_ren').innerHTML = '';
$('www_wuming_ren').innerHTML = '';
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</BODY>
</HTML>本文来自武鸣人网站，转载请注明出处