eggache_for_my_valentine
看到了http://www.matrix67.com/blog/archives/4911的情人节的日志。心血来潮就照着弄了个。我真贱啊。哎。
代码直接查看源代码就看得到。
-----------------------------------
-----------------------------------
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body {
/*font-family: "微软雅黑";*/
}
table {
padding: 0px;
margin: 0px;
border-spacing: 0px;
/*border: 2px black solid;*/
}
td {
width: 20px;
height: 20px;
border-left: 1px solid black;
border-top: 1px solid black;
text-align: center;
vertical-align: center;
color: grey;
background-color: white;
/*avoid to be select text*/
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.veryBottom {
border-bottom: 1px solid black;
}
.veryRight {
border-right: 1px solid black;
}
#td_7_11 {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
#td_7_3, #td_7_7 {
font-weight: 900;
color: black;
}
</style>
<script type="text/javascript">
/*every <td>'s stucture*/
function Cube() {
this.number = 0;
this.isBoom = 0;
this.isSelected = 0;
this.bdr = 0;
}
function myMap() {
this.x = 0;
this.y = 0;
}
var col = 13; //11
var row = 9; //7
var luvArr = new Array(); //cube 2nd array
var boomArr = new Array(32); //boom list
/*every two elements are combining a pos of the boom.*/
boomListDB = [1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 2, 2, 3, 2, 1, 3, 2, 3, 3, 3, 4, 3, 2, 4, 3, 4, 4, 4, 5, 4,
1, 5, 2, 5, 3, 5, 4, 5, 2, 6, 3, 6, 1, 8, 2, 8, 3, 8, 4, 8, 5, 8, 5, 9, 1, 10, 2, 10, 3, 10, 4, 10, 5, 10];
/*initial luvArray 2nd array.*/
for (var i = 0; i < row; i++)
{
luvArr[i] = new Array();
}
for (var i = 0; i < row; i++)
{
for (var j = 0; j < col; j++)
{
luvArr[i][j] = new Cube();
//alert(luvArr[i][j].number);
}
}
/*set boomArray's value.*/
for (var i = 0;i < 32; i++)
{
luvArr[boomListDB[2*i] + 1][boomListDB[2*i+1] + 1].isBoom = 1;
//luvArr[boomArr[i].x][boomArr[i].y].isBoom = true;
}
function fuck(x) {
$(x).css("font-weight", "border");
alert("qwe");
}
/*calculate if the <td>'s text need border.*/
function calculate() {
for (var i = 1; i < row - 1; i++)
{
for (var j = 1; j < col - 1; j++)
{
var cnt = 0;
var cntex = 0;
for (var ii = i - 1; ii <= i + 1; ii++)
{
for (var jj = j - 1; jj <= j + 1; jj++)
{
if (luvArr[ii][jj].isSelected == 1)
{
if (luvArr[ii][jj].isBoom == 1)
{
cnt++;
}
cntex++;
}
}
}
if (luvArr[i][j].number == cnt && cntex == cnt)
{
//alert(cnt1);
luvArr[i][j].bdr = 1;
//alert(i + "," + j + ":yes");
//$("#td_" + "i" + "_" + "j").css("display", "none");
//$("#td_" + "i" + "_" + "j").css("font-style", "italic");
}
else
{
luvArr[i][j].bdr = 0;
//alert("no");
//$("#td_" + "i" + "_" + "j").css("color", "grey");
//$("#td_" + "i" + "_" + "j").css("font-style", "italic");
}
}
}
}
/*the <td> which been clicked will change color.*/
$(document).ready (
function() {
$("td").click(
function() {
var str = $(this).attr("id").split("_");
if (luvArr[parseInt(str[1])][parseInt(str[2])].isSelected == 1)
{
$(this).css("background-color", "white");
luvArr[parseInt(str[1])][parseInt(str[2])].isSelected = 0;
//alert("slt:" + luvArr[parseInt(str[1])][parseInt(str[2])].isSelected);
}
else if (luvArr[parseInt(str[1])][parseInt(str[2])].isSelected == 0)
{
$(this).css("background-color", "hotpink");
luvArr[parseInt(str[1])][parseInt(str[2])].isSelected = 1;
//alert("slt:" + luvArr[parseInt(str[1])][parseInt(str[2])].isSelected);
}
calculate();
for (var i = 1; i < row - 1; i++)
{
for (var j = 1; j < col - 1; j++)
{
if (luvArr[i][j].bdr == 1)
{
$("#td_" + i + "_" + j).css("color", "black");
$("#td_" + i + "_" + j).css("font-weight", "900");
}
else
{
$("#td_" + i + "_" + j).css("color", "grey");
$("#td_" + i + "_" + j).css("font-weight", "normal");
}
}
}
}
)
}
)
/*mouse over,then cursor changes to 'pointer'*/
$(document).ready (
function() {
$("table").mouseover(
function() {
$(this).css("cursor", "pointer");
}
)
}
)
function initial() {
for (var i = 1; i < row - 1; i++)
{
for (var j = 1; j < col - 1; j++)
{
luvArr[i][j].number = luvArr[i - 1][j - 1].isBoom + luvArr[i - 1][j].isBoom + luvArr[i - 1][j + 1].isBoom
+ luvArr[i][j - 1].isBoom + luvArr[i][j].isBoom + luvArr[i][j + 1].isBoom
+ luvArr[i + 1][j - 1].isBoom + luvArr[i + 1][j].isBoom + luvArr[i + 1][j + 1].isBoom;
}
}
}
/*use function to draw a m*n table and give every <td> a unique name.*/
function drawTable()
{
var x;
var i = 0;
var j = 0;
document.write("<table id = 'tbl'><tbody>");
for (i = 1; i < row - 1; i++)
{
document.write("<tr>");
for (j = 1; j < col - 1; j++)
{
if (j == col - 2)
{
if (i == row - 2)
{
document.write("<td id='td_" + i + "_" + j + "'>" + luvArr[i][j].number + "</td>");
}
else
{
document.write("<td class='veryRight' id='td_" + i + "_" + j + "'>" + luvArr[i][j].number + "</td>");
}
}
else
{
if (i == row - 2)
{
document.write("<td class='veryBottom' id='td_" + i + "_" + j + "'>" + luvArr[i][j].number + "</td>");
}
else
{
document.write("<td id='td_" + i + "_" + j + "'>" + luvArr[i][j].number + "</td>");
}
}
}
document.write("</tr>");
}
document.write("</tbody></table>");
}
</script>
</head>
<!--body is here!-->
<body onload="calculate()">
<script type="text/javascript">
initial();
drawTable();
</script>
</body>
</html>
