364,084 Members | 5367 Browsing Online
Community for Developers & IT Professionals
Bytes IT Community

Help with online crossword puzzle

bzzbarfly
P: 1
Hi! I'm new to JavaScript and I'm having trouble getting my program to work. Could someone take at a look at my code and help me try to figure out what the problem is?

EDIT: I guess I shouldn't post my entire code so I'll revise it. I'll post where I think I'm having issues.


This program is supposed to generate an online crossword puzzle for a newspaper. I cannot get any of my functions to work and would greatly appreciate some help figuring out what is going on. Users should be able to directly type their answers into the puzzle and navigate the puzzle by pressing the arrow keys on their keyboard. Typing a letter should move the cursor to the next cell. A user should also be able to toggle whether typing is entered vertically or horizontally by pressing the spacebar. The current cell in the puzzle should be yellow. If a user enters a correct letter into a cell, the background should be changed to light green. If an incorrect letter is entered, a light red background should be displayed. Blank puzzle cells should be displayed with a white background.

Here is the main part of the code. If anyone needs the other files, let me know;

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <!-- 
  4.  
  5.    Filename:             cross.htm
  6.    Supporting files: across.gif, down.gif, functions.js, makepuzzle.js,
  7.                                          pcglogo.jpg, styles.css
  8. -->
  9. <title>Crossword Puzzle</title>
  10. <link href="styles.css" rel="stylesheet" type="text/css" />
  11.  
  12. <script type="text/javascript" src="makepuzzle.js"></script>
  13. <script type="text/javascript" src="functions.js"></script>
  14.  
  15. <script type="text/javascript">
  16.  
  17.  
  18.  
  19.  
  20. //capture the key code of the pressed key and then call the appropriate function for that key
  21. function getKey(e){
  22.         if (IE) keyNum=event.keyCode; 
  23.                 else if (DOM) keyNum=e.keyCode;
  24.         if (keyNum = 32) 
  25.         toggleDirection(); //if the user presses the spacebar run the toggleDirection function
  26.         //if the user presses one of the four arrow keys run the moveCursor function
  27.         if (keyNum = 37) {
  28.         moveCursor(); }
  29.         if (keyNum = 38){
  30.         moveCursor(); }
  31.         if (keyNum = 39) {
  32.         moveCursor(); }
  33.         if (keyNum = 40) {
  34.         moveCursor();
  35.         } else { 
  36.         writeGuess();
  37.         }                                //otherwise run the writeGuess function
  38.         //return the value false from the function so that the safari browssers treats the arrows keys as single keystrokes
  39. }
  40.  
  41. //allow a user to press the spacebar to toggle the typing direction from across to down and vice versa, swap the point hand image on the page
  42. //to match the typing direction
  43. function toggleDirection() {
  44. //if across = true change the value to false, change the second image in the document to the source of the first image in the handImage array
  45. //if across = false change the value to true, change the second image in the document to the source of the first image in the handImage array
  46. if (across == true) { 
  47.         across = false;
  48.         document.images[1]=handImage[1].src;
  49.         } else {
  50.         if (across == false) {
  51.                 across=true;
  52.                 document.images[1]=hamdImage[0].src;
  53.         }
  54. }
  55.  
  56. //next four function will be used to update the values of the currentX and currentY variables as the cursor moves around the puzzle grid
  57.  
  58. //decrease the value of currentX by one, if currentX is less than zero change the value to four
  59. function moveLeft() {
  60.         curentX--;
  61.         if (currentX < 0) {
  62.                 currentX = 4
  63.         }
  64. }
  65.  
  66. //increase the value of currentX by one, if currentX is greater than four change the value to zero
  67. function moveRight() {
  68.         currentX++;
  69.         if (currentX > 4) {
  70.                 currentX = 0;
  71.         }
  72. }
  73.  
  74. //decrease the value of currentY  by one, if currentY is less than zero change value to four 
  75. function moveUp() {
  76.         currentY--;
  77.         if (currentY< 0) {
  78.                 currentY = 4;
  79.         }
  80. }
  81.  
  82. //increase the value of currentY by one, if currentY is greater than four change the value to zero
  83. function moveDown() {
  84.         currentY++;
  85.         if (currentY > 4) {
  86.                 currentY = 0;
  87.         }
  88. }
  89.  
  90. //move the active cell in response to a user presing the arrow keys on the keyboard
  91. function moveCursor() {
  92.         currentCell.style.backgroundColor = currentColor; //set the background color of the currentCell to the value of the currentColor variable
  93.         if (keyNum = 37) 
  94.                 moveLeft();                                                                     //if the value of the keyNum indicates a left arrow run the moveLeft function
  95.         if (keyNum = 38) 
  96.                 moveUp();                                                                               //if the value of the keyNum indicates an up arrow run the moveUp function
  97.         if (keyNum = 39) 
  98.                 moveRight();                                                                    //if the value of the keyNum indicates a right arrow run the moveRight function
  99.         if (keyNum =40) 
  100.                 moveDown();                                                                             //if the value of the keyNum indicates a down arrow run the moveDown function
  101.  
  102.         currentCell = document.getElementById("grid" + currentX + currentY);    
  103.         currentColor = currentCell.style.backgroundColor;                               //store the background color of the currentCell in the currentColor variable
  104.         currentCell.style.backgroundColor = "yellow";                                   //change the background color of the currentCell to yellow
  105. }
  106.  
  107. //write the lettr typed by the user into the current cell and change the background color to indicate whether the user typed a correct letter
  108. //after the letter has been written teh current cell should move either to the right or down 
  109. function writeGuess() {
  110.         var outChar = String.fromCharCode(keyNum); //use the fromCharCode method to extract the letter corresponding to the value of the keyNum variable
  111.         outChar = string.toUpperCase(); //use the toUpperCase function to change the outChar variable to an uppercase letter
  112.         document.write(writeText(outChar)); //use the writeText function to write outChart to the current cell
  113.         if (words[(currentY * 5) + currentX] == outChar) {
  114.                 currentCell.style.backgroundColor="lightgreen";
  115.                 } else {
  116.                 currentCell.style.backgroundColor="pink";
  117.                 }
  118.         //if across equals true run the moveRight function else run the moveDown function
  119.         if (across == true) {
  120.         moveRight();
  121.         } else {
  122.         moveDown();
  123.         }
  124.         //point the currentCell object to the element with the id gridxy, where x is the value of currentX and y is the value of currenY
  125.         currentCell = document.getElementById("grid" + currentX + currentY);
  126.         currentColor = currentCell.style.backgroundColor; //store the value of the current cell background color in currentColor
  127.         currentCell.style.backgroundColor = "yellow"; //change the background color of the current cell to yellow
  128. }
  129.  
  130.  
  131. </script>
Mar 16 '10 #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 2.5K+
P: 4,631
that is a quite complex question without having a sample page ... is there a link where we might have a look at the working/non-working page? ... or at least a sample that could be used to see all that in action/non-action?

kind regards
Mar 20 '10 #2

Post your reply

Help answer this question



Didn't find the answer to your JavaScript / Ajax / DHTML question?

You can also browse similar questions: JavaScript / Ajax / DHTML