Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need help - please analyse my code!! Thanks!!

    Hi,

    I am creating a snake game, posted about a week back, and have been developing it a bit. so far I have got this....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html >

    <head>

    <title>Snake Game Arena</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">

    table {
    margin: 0 auto;
    border: 2px solid blue;
    background-color: red;


    }

    td {
    height: 1px;
    width: 1px;
    background-color: white;

    }
    h1{color: blue; text-align: center; text-decoration: underline;}

    </style>

    </head>

    <body onkeydown="keyDownHandler(event);"
    onload="drawImage(X,Y);">

    <h1>Snake Game Arena</h1>

    <script type="text/javascript">

    var X = 20;
    var Y = 20;

    var maxX = 49;
    var maxY = 49;

    function keyDownHandler(e) {
    if (e.keycode == 37 /* LEFT ARROW */) {
    if (X>0) X--;
    } else if (e.keycode == 39 /* RIGHT ARROW */) {
    if (X<maxX) X++;
    } else if (e.keycode == 38 /* UP ARROW */) {
    if (Y>0) Y--;
    } else if (e.keycode == 40 /* DOWN ARROW */) {
    if (Y<maxY) Y++;
    } else return true;

    }




    </script>


    <table id="snakearena">
    <script type="text/javascript">
    for (var row = 0; row<=maxY; row++) {
    document.write("<tr>")
    for (var col = 0; col<=maxX; col++) {
    document.write("<td>")
    document.write("</td>")
    }
    document.write("</tr>")
    }
    document.write("</table>")

    arena = getElementById("snakearena");
    tdArray = arena.getElementsByTagName("td");
    alert(tdArray.length);


    </script>



    </body>
    </html>

    I am looking to put an image named snake.gif into one of the cells and move it around whenever an arrow key is pressed. So far I have the arena up but I cannot get the image to load up, I have used the XY coordinates (20, 20) and was hoping that the image would show up onload, but it does not. To draw the image, I was thinking about using this code, or something similar.
    Would this work? Have I gone completely wrong or am I on some sort of right line?!

    function drawImage(X,Y) {
    var 1 = Y*(maxX+1) + X;
    tdArray[1].style.backgroundImage='url(snake.gif)'"
    }



    Any help is great, thanks!

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Do you use Mozilla Firefox for development? If not, I suggest you do. You got some critical errors popping up that are easy to find with the Javascript console. The most obvious being that you're calling the getElementById method without using the document object.

    Oh, and you can't assign a value to 1 (in your drawImage function). And you can't use document.write with XHTML documents, so ditch it and use HTML Strict.
    Last edited by hemebond; 11-04-2004 at 10:13 PM.

  • #3
    New Coder
    Join Date
    Apr 2004
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the response, I have changed the mistakes and modified the code, I now want my pixel to move automatically in one direction when the page loads. How would I do this? Would I have to use the timeout method? What code would I use for it?

    Here is my modified code....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html >

    <head>

    <title>Snake Game</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">

    table#snakearena {
    margin: 0 auto;
    border: 2px solid blue;
    background-color: red;
    }
    table#snakearena td {
    height: 5px;
    width: 5px;

    }

    h1{color: blue; text-align: center; text-decoration: underline;}

    </style>

    <script type="text/javascript">

    var X = 20;
    var Y = 20;

    var maxX = 49;
    var maxY = 49;

    function keyDownHandler(e) {

    var oldX = X;
    var oldY = Y;

    if (e.keyCode == 37 /* LEFT ARROW */) {
    if (X>0) X--;
    } else if (e.keyCode == 39 /* RIGHT ARROW */) {
    if (X<maxX) X++;
    } else if (e.keyCode == 38 /* UP ARROW */) {
    if (Y>0) Y--;
    } else if (e.keyCode == 40 /* DOWN ARROW */) {
    if (Y<maxY) Y++;
    } else return true;
    eraseImage(oldX, oldY);
    drawImage(X, Y);
    }

    function eraseImage(X, Y) {
    var l = Y * (maxX+1) + X;
    tdArray[l].style.backgroundColor='';
    }
    function drawImage(X, Y) {
    var l = Y * (maxX+1) + X;
    tdArray[l].style.backgroundColor='Blue';
    }
    </script>

    <body onkeydown=keyDownHandler(event);
    onload=drawImage(X,Y);>

    </head>

    <h1>Snake Game Arena</h1>

    <table id="snakearena">
    <script type="text/javascript">
    for (var row = 0; row<=maxY; row++) {
    document.write("<tr>")
    for (var col = 0; col<=maxX; col++) {
    document.write("<td>")
    document.write("</td>")
    }
    document.write("</tr>")
    }
    document.write("</table>")

    arena = document.getElementById("snakearena");
    tdArray = arena.getElementsByTagName("td");

    </script>




    </body>
    </html>


  •  

    Posting Permissions

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