www.webdeveloper.com
Results 1 to 2 of 2

Thread: cross puzzle help

  1. #1
    Join Date
    Mar 2010
    Posts
    14

    cross puzzle help

    Filename: cross.htm
    Supporting files: across.gif, down.gif, functions.js, makepuzzle.js,
    pcglogo.jpg, styles.css
    -->

    <title>Crossword Puzzle</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="makepuzzle.js"></script>
    <script type="text/javascript" src="functions.js"></script>

    <script type="text/javascript">
    var handImage=new Array("across.gif","down.gif")
    var IE = document.attachEvent ? true:false;
    var DOM = document.addEventListener ? true: false;
    var currentX=0,currentY=0;
    var currentCell,currentColor="white",across=true,keyNum;

    function init() {
    writeClues(); //run writeClues function
    currentCell = document.getElementById("grid00"); //set the currentCell equal the element with the id "grid00"
    currentCell.style.backgroundColor = "yellow"; //change the value of the background color of the currentCell object to yellow
    document.onkeypress=getKey; //creat an event handler to the document object that runs the getKey function when a user presses a key
    }

    //capture the key code of the pressed key and then call the appropriate function for that key
    function getKey(e)
    {
    if (IE) keyNum = event.keyCode;
    else if (DOM) keyNum = e.keyCode;
    if(keyNum==32) { toggleDirection(); }
    else if (keyNum ==37||keyNum==38||keyNum==39||keyNum==40) { moveCursor(); }
    else { writeGuess(); }
    }


    var across = true;
    function toggleDirection(){
    if(across){
    across = false;
    document.images[1].src = "down.gif";
    }
    else{
    across = true;
    document.images[1].src = "across.gif";
    }
    }
    //next four function will be used to update the values of the currentX and currentY variables as the cursor moves around the puzzle grid

    //decrease the value of currentX by one, if currentX is less than zero change the value to four
    function moveLeft() {
    curentX--;
    if (currentX < 0) {
    currentX = 4
    }
    }

    //increase the value of currentX by one, if currentX is greater than four change the value to zero
    function moveRight() {
    currentX++;
    if (currentX > 4) {
    currentX = 0;
    }
    }

    //decrease the value of currentY by one, if currentY is less than zero change value to four
    function moveUp() {
    currentY--;
    if (currentY< 0) {
    currentY = 4;
    }
    }

    //increase the value of currentY by one, if currentY is greater than four change the value to zero
    function moveDown() {
    currentY++;
    if (currentY > 4) {
    currentY = 0;
    }
    }

    //move the active cell in response to a user presing the arrow keys on the keyboard
    function moveCursor() {
    currentCell.style.background = '#ffff00'; //set the background color of the currentCell to the value of the currentColor variable
    if (keyNum = 37)
    moveLeft(); //if the value of the keyNum indicates a left arrow run the moveLeft function
    if (keyNum = 38)
    moveUp(); //if the value of the keyNum indicates an up arrow run the moveUp function
    if (keyNum = 39)
    moveRight(); //if the value of the keyNum indicates a right arrow run the moveRight function
    if (keyNum =40)
    moveDown(); //if the value of the keyNum indicates a down arrow run the moveDown function

    currentCell = document.getElementById("grid" + currentX + currentY);
    currentCell.style.background = '#ffff00'; //change the background color of the currentCell to yellow
    }

    //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
    //after the letter has been written teh current cell should move either to the right or down

    function writeGuess() {
    var outChar = String.fromCharCode(keyNum); //use the fromCharCode method to extract the letter corresponding to the value of the keyNum variable
    outChar = string.toUpperCase(); //use the toUpperCase function to change the outChar variable to an uppercase letter
    document.write(writeText(outChar)); //use the writeText function to write outChart to the current cell
    if (words[(currentY * 5) + currentX] == outChar) {
    currentCell.style.backgroundColor="lightgreen";
    } else {
    currentCell.style.backgroundColor="pink";
    }
    //if across equals true run the moveRight function else run the moveDown function
    if (across == true) {
    moveRight();
    } else {
    moveDown();
    }
    //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
    currentCell = document.getElementById("grid" + currentX + currentY);
    currentCell.style.background = '#ffff00'; //change the background color of the current cell to yellow
    }


    </script>

    </head>

    <body onload = "init()">

    <div id="head"><img src="pcglogo.jpg" alt="The Park City Gazette" /></div>

    <div id="intro">
    <h2>Today's Puzzle</h2>
    <p>Type the correct answer for each clue. A green square indicates
    a correct answer; a red square means that the letter is not
    correct.</p>
    <p>The pointing hand indicates the current typing direction of the
    puzzle. To switch between typing across and down, press the space bar.
    Move to different cells by pressing the arrow keys on your
    keyboard.</p>
    <p>Click the <b>Reveal Answer</b> button to see the correct answers.</p>
    </div>

    <div id="direction"><img src="across.gif" alt="" /></div>

    <div class="grid" id="grid00"> </div>
    <div class="grid" id="grid10"> </div>
    <div class="grid" id="grid20"> </div>
    <div class="grid" id="grid30"> </div>
    <div class="grid" id="grid40"> </div>

    <div class="grid" id="grid01"> </div>
    <div class="grid" id="grid11"> </div>
    <div class="grid" id="grid21"> </div>
    <div class="grid" id="grid31"> </div>
    <div class="grid" id="grid41"> </div>

    <div class="grid" id="grid02"> </div>
    <div class="grid" id="grid12"> </div>
    <div class="grid" id="grid22"> </div>
    <div class="grid" id="grid32"> </div>
    <div class="grid" id="grid42"> </div>

    <div class="grid" id="grid03"> </div>
    <div class="grid" id="grid13"> </div>
    <div class="grid" id="grid23"> </div>
    <div class="grid" id="grid33"> </div>
    <div class="grid" id="grid43"> </div>

    <div class="grid" id="grid04"> </div>
    <div class="grid" id="grid14"> </div>
    <div class="grid" id="grid24"> </div>
    <div class="grid" id="grid34"> </div>
    <div class="grid" id="grid44"> </div>

    <div id="reveal" onclick ="showAns()" style = "cursorointer">Reveal Answer</div>

    <div id="rowhead">Rows</div>
    <div id="across1" class="clue"> </div>
    <div id="across2" class="clue"> </div>
    <div id="across3" class="clue"> </div>
    <div id="across4" class="clue"> </div>
    <div id="across5" class="clue"> </div>

    <div id="colhead">Columns</div>
    <div id="down1" class="clue"> </div>
    <div id="down2" class="clue"> </div>
    <div id="down3" class="clue"> </div>
    <div id="down4" class="clue"> </div>
    <div id="down5" class="clue"> </div>
    </body>
    </html>

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Have you a question? Also, read the stickies at the top of this forum.
    Great wit and madness are near allied, and fine a line their bounds divide.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles