Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Make them all disappear

Status
Not open for further replies.
kaht

kaht

Programmer
Aug 18, 2003
4,156
US
Things really slowed down this afternoon.....

Enjoy:

Hint: Place cells on the board and then click start game. Next, try to make them all disappear. And excuse the simplicity, I didn't spend much time with the CSS

Code: 
<html>
<head>

<script language=javascript>
var startGame = false;
var gameData = new Array();
gameData[0] = new Array(7);
gameData[1] = new Array(7);
gameData[2] = new Array(7);
gameData[3] = new Array(7);
gameData[4] = new Array(7);
gameData[5] = new Array(7);
gameData[6] = new Array(7);

//fill gameData array
function startFresh() {
   for (i = 0; i < 7; i++) {
      for (j = 0; j < 7; j++) {
         gameData[i][j] = false;
         document.getElementById("cell" + i + j).className = 'cellOff';
      }
   }
   startGame = false;
   document.getElementById("startButton").disabled = false;
}

function resetBoard(obj) {
   var row = parseInt(obj.id.substr(4, 1), 10);
   var col = parseInt(obj.id.substr(5, 1), 10);
   if (!startGame) {  //initial board setup
      obj.className = (obj.className == 'cellOff') ? 'cellOn' : 'cellOff';
      gameData[row][col] = !gameData[row][col];
   }
   else { //calculation
      gameData[row][col] = !gameData[row][col];
      obj.className = (gameData[row][col]) ? 'cellOn' : 'cellOff';
      try {
         gameData[row-1][col] = !gameData[row-1][col];
         document.getElementById("cell" + (row-1) + col).className = (gameData[row-1][col]) ? 'cellOn' : 'cellOff';
      }
      catch (e) {}
      try {
         gameData[row+1][col] = !gameData[row+1][col];
         document.getElementById("cell" + (row+1) + col).className = (gameData[row+1][col]) ? 'cellOn' : 'cellOff';      }
      catch (e) {}
      try {
         gameData[row][col-1] = !gameData[row][col-1];
         document.getElementById("cell" + row + (col-1)).className = (gameData[row][col-1]) ? 'cellOn' : 'cellOff';      }
      catch (e) {}
      try {
         gameData[row][col+1] = !gameData[row][col+1];
         document.getElementById("cell" + row + (col+1)).className = (gameData[row][col+1]) ? 'cellOn' : 'cellOff';      }
      catch (e) {}
      for (i = 0; i < 7; i++) {
         for (j = 0; j < 7; j++) {
            if (gameData[i][j]) { //cell still active, game not won
               return false;
            }
         }
      }
      alert("congratulations, you've won");
      startFresh();
   }
}
</script>


<style>
table {
   background-color:#000000;
}

.cellOff {
   background-color:#ffffff;
   width=20px;
   height=20px;
}

.cellOn {
   background-color:#ff0000;
   width=20px;
   height=20px;
}
</style>

</head>
<body onload='startFresh()'>
<form name=blahForm>
<table border=0 cellpadding=0 cellspacing=1>
   <tr>
      <td class=cellOff id=cell00 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell01 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell02 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell03 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell04 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell05 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell06 onclick='resetBoard(this)'>&nbsp;</td>
   </tr>
   <tr>
      <td class=cellOff id=cell10 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell11 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell12 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell13 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell14 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell15 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell16 onclick='resetBoard(this)'>&nbsp;</td>
   </tr>
   <tr>
      <td class=cellOff id=cell20 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell21 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell22 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell23 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell24 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell25 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell26 onclick='resetBoard(this)'>&nbsp;</td>
   </tr>
   <tr>
      <td class=cellOff id=cell30 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell31 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell32 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell33 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell34 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell35 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell36 onclick='resetBoard(this)'>&nbsp;</td>
   </tr>
   <tr>
      <td class=cellOff id=cell40 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell41 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell42 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell43 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell44 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell45 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell46 onclick='resetBoard(this)'>&nbsp;</td>
   </tr>
   <tr>
      <td class=cellOff id=cell50 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell51 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell52 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell53 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell54 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell55 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell56 onclick='resetBoard(this)'>&nbsp;</td>
   </tr>
   <tr>
      <td class=cellOff id=cell60 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell61 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell62 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell63 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell64 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell65 onclick='resetBoard(this)'>&nbsp;</td>
      <td class=cellOff id=cell66 onclick='resetBoard(this)'>&nbsp;</td>
   </tr>
</table>
<br><br>
<input type=button value='Start Game' id=startButton onclick='startGame=true; this.disabled=true;'>
<input type=button value='New Game' onclick='startFresh()'>
</form>
</body>
</html>

-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)
 
the last time I put up a homer simpson quote, someone referred to me as homer. damn fools.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
An easy way to win......

New Game
Start Game
Click on a square
Click again on the same square

Congrats you won !


Just kidding, good job.

thanks for the entertainment.

 
ok, fixed it so you can't win w/o placing anything on the board. also used javascript to generate the table:
Code: 
<html>
<head>

<script language=javascript>
var startGame = false;
var gameData = new Array();
gameData[0] = new Array(7);
gameData[1] = new Array(7);
gameData[2] = new Array(7);
gameData[3] = new Array(7);
gameData[4] = new Array(7);
gameData[5] = new Array(7);
gameData[6] = new Array(7);

//fill gameData array
function startFresh() {
   for (i = 0; i < 7; i++) {
      for (j = 0; j < 7; j++) {
         gameData[i][j] = false;
         document.getElementById("cell" + i + j).className = 'cellOff';
      }
   }
   startGame = false;
   document.getElementById("startButton").disabled = false;
}

function beginGame(obj) {
   var boardReady = false;
   for (i = 0; i < 7; i++) {
      for (j = 0; j < 7; j++) {
         boardReady = (boardReady || gameData[i][j]);
      }
   }
   if (boardReady) {
      startGame = true;
      obj.disabled = true;
   }
   else {
      alert("You must set at least one cell initially to red, please reselect");
   }
}

function resetBoard(obj) {
   var row = parseInt(obj.id.substr(4, 1), 10);
   var col = parseInt(obj.id.substr(5, 1), 10);
   if (!startGame) {  //initial board setup
      obj.className = (obj.className == 'cellOff') ? 'cellOn' : 'cellOff';
      gameData[row][col] = !gameData[row][col];
   }
   else { //calculation
      gameData[row][col] = !gameData[row][col];
      obj.className = (gameData[row][col]) ? 'cellOn' : 'cellOff';
      try {
         gameData[row-1][col] = !gameData[row-1][col];
         document.getElementById("cell" + (row-1) + col).className = (gameData[row-1][col]) ? 'cellOn' : 'cellOff';
      }
      catch (e) {}
      try {
         gameData[row+1][col] = !gameData[row+1][col];
         document.getElementById("cell" + (row+1) + col).className = (gameData[row+1][col]) ? 'cellOn' : 'cellOff';      }
      catch (e) {}
      try {
         gameData[row][col-1] = !gameData[row][col-1];
         document.getElementById("cell" + row + (col-1)).className = (gameData[row][col-1]) ? 'cellOn' : 'cellOff';      }
      catch (e) {}
      try {
         gameData[row][col+1] = !gameData[row][col+1];
         document.getElementById("cell" + row + (col+1)).className = (gameData[row][col+1]) ? 'cellOn' : 'cellOff';      }
      catch (e) {}
      for (i = 0; i < 7; i++) {
         for (j = 0; j < 7; j++) {
            if (gameData[i][j]) { //cell still active, game not won
               return false;
            }
         }
      }
      alert("congratulations, you've won");
      startFresh();
   }
}

</script>


<style>
table {
   background-color:#000000;
}

.cellOff {
   background-color:#ffffff;
   width:20px;
   height:20px;
   cursor:pointer;
}

.cellOn {
   background-color:#ff0000;
   width:20px;
   height:20px;
   cursor:pointer;
}
</style>

</head>
<body onload='startFresh()'>
<form name=blahForm>
<table border=0 cellpadding=0 cellspacing=1>
<script>
for (i = 0; i < 7; i++) {
   document.write("<tr>\n");
   for (j = 0; j < 7; j++) {
      document.write("<td class=cellOff id=cell" + i + j + " onclick='resetBoard(this)'>&nbsp;</td>\n");
   }
   document.write("</tr>\n");
}
</script>
</table>
<br><br>
<input type=button value='Start Game' id=startButton onclick='beginGame(this)'>
<input type=button value='New Game' onclick='startFresh()'>
</form>
</body>
</html>

-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)
 
Status
Not open for further replies.

Similar threads

markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
130
feherke
feherke
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
83
CrxC01
CrxC01
CrxC01
  • Locked
  • Question
Sum of all primes numbers
Replies
6
Views
148
CrxC01
CrxC01
bs6600
  • Locked
  • Question
How can I make a window wider?
Replies
1
Views
78
xwb
xwb
emmals
  • Locked
  • Question
Auto Click Button and pass through all data
Replies
0
Views
73
emmals
emmals

Part and Inventory Search

Sponsor

Back
Top