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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Snakes Game in JavaScript Code

    I have created Snakes Game using JavaScript code. Please give me feedback on any issues or dislikes on the game so i can update the code and change it to the your needs.


    <!doctype html>

    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Simple Snake Game</title>

    <!-- Basic styling, centering of the canvas. -->
    <style>
    #footer {
    position: absolute;
    width: 100;
    bottom: 4px;
    left: 847px;
    }

    canvas {
    display: block;
    position: absolute;
    border: 1px solid #000;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    }


    body,td,th {
    color: #063;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }
    body {
    background-color: #FFF;
    }
    </style>
    </head>
    <body bgcolor="#FFFFFF" background="http://www.vectoc.com/wp-content/uploads/2012/11/Cute-cartoon-snake-4.jpg">
    <center>
    <h1> Snake Game</h1>
    </center>
    <h2>&nbsp; </h2>
    <h2>&nbsp;</h2>
    <h2 align="right"> <strong><u>Controls</u></strong></h2>
    <p align="right">
    <h3 align="right"><em><strong>Simply press the arrow keys
    </strong></em></h3>
    <h3 align="right"><strong><em>to go to that direction.</em></strong><em> </em>
    </h3>
    <div id ="footer">
    <div align="right">
    <h3><a href ="http://snakesgameinjavascript.blogspot.com.au">Need help?</a></h3>
    </div>
    </div>

    <div align="right"> </div>
    <img src="http://2.bp.blogspot.com/-vkLSzfE_H4s/URC_WUycCrI/AAAAAAAAAUk/nNKDIAYRNr8/s200/01-Navigation+keys.png" width="253" height="178" align="right">
    <script>
    var

    /**
    * Constats
    */
    COLS = 26,
    ROWS = 26,

    EMPTY = 0,
    SNAKE = 1,
    FRUIT = 2,

    LEFT = 0,
    UP = 1,
    RIGHT = 2,
    DOWN = 3,

    KEY_LEFT = 37,
    KEY_UP = 38,
    KEY_RIGHT = 39,
    KEY_DOWN = 40,


    /**
    * Game objects
    */
    canvas, /* HTMLCanvas */
    ctx, /* CanvasRenderingContext2d */
    keystate, /* Object, used for keyboard inputs */
    frames, /* number, used for animation */
    score; /* number, keep track of the player score */


    /**
    * Grid datastructor, usefull in games where the game world is
    * confined in absolute sized chunks of data or information.
    *
    * @type {Object}
    */
    grid = {

    width: null, /* number, the number of columns */
    height: null, /* number, the number of rows */
    _grid: null, /* Array<any>, data representation */

    /**
    * Initiate and fill a c x r grid with the value of d
    * @param {any} d default value to fill with
    * @param {number} c number of columns
    * @param {number} r number of rows
    */
    init: function(d, c, r) {
    this.width = c;
    this.height = r;

    this._grid = [];
    for (var x=0; x < c; x++) {
    this._grid.push([]);
    for (var y=0; y < r; y++) {
    this._grid[x].push(d);
    }
    }
    },

    /**
    * Set the value of the grid cell at (x, y)
    *
    * @param {any} val what to set
    * @param {number} x the x-coordinate
    * @param {number} y the y-coordinate
    */
    set: function(val, x, y) {
    this._grid[x][y] = val;
    },

    /**
    * Get the value of the cell at (x, y)
    *
    * @param {number} x the x-coordinate
    * @param {number} y the y-coordinate
    * @return {any} the value at the cell
    */
    get: function(x, y) {
    return this._grid[x][y];
    }
    }

    /**
    * The snake, works as a queue (FIFO, first in first out) of data
    * with all the current positions in the grid with the snake id
    *
    * @type {Object}
    */
    snake = {

    direction: null, /* number, the direction */
    last: null, /* Object, pointer to the last element in
    the queue */
    _queue: null, /* Array<number>, data representation*/

    /**
    * Clears the queue and sets the start position and direction
    *
    * @param {number} d start direction
    * @param {number} x start x-coordinate
    * @param {number} y start y-coordinate
    */
    init: function(d, x, y) {
    this.direction = d;

    this._queue = [];
    this.insert(x, y);
    },

    /**
    * Adds an element to the queue
    *
    * @param {number} x x-coordinate
    * @param {number} y y-coordinate
    */
    insert: function(x, y) {
    // unshift prepends an element to an array
    this._queue.unshift({x:x, y:y});
    this.last = this._queue[0];
    },

    /**
    * Removes and returns the first element in the queue.
    *
    * @return {Object} the first element
    */
    remove: function() {
    // pop returns the last element of an array
    return this._queue.pop();
    }
    };

    /**
    * Set a food id at a random free cell in the grid
    */
    function setFood() {
    var empty = [];
    // iterate through the grid and find all empty cells
    for (var x=0; x < grid.width; x++) {
    for (var y=0; y < grid.height; y++) {
    if (grid.get(x, y) === EMPTY) {
    empty.push({x:x, y:y});
    }
    }
    }
    // chooses a random cell
    var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
    grid.set(FRUIT, randpos.x, randpos.y);
    }

    /**
    * Starts the game
    */
    function main() {
    // create and initiate the canvas element
    canvas = document.createElement("canvas");
    canvas.width = COLS*20;
    canvas.height = ROWS*20;
    ctx = canvas.getContext("2d");
    // add the canvas element to the body of the document
    document.body.appendChild(canvas);

    // sets an base font for bigger score display
    ctx.font = "12px Helvetica";

    frames = 0;
    keystate = {};
    // keeps track of the keybourd input
    document.addEventListener("keydown", function(evt) {
    keystate[evt.keyCode] = true;
    });
    document.addEventListener("keyup", function(evt) {
    delete keystate[evt.keyCode];
    });

    // intatiate game objects and starts the game loop
    init();
    loop();
    }

    /**
    * Resets and inits game objects
    */
    function init() {
    score = 0;

    grid.init(EMPTY, COLS, ROWS);

    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);

    setFood();
    }

    /**
    * The game loop function, used for game updates and rendering
    */
    function loop() {
    update();
    draw();
    // When ready to redraw the canvas call the loop function
    // first. Runs about 60 frames a second
    window.requestAnimationFrame(loop, canvas);
    }

    /**
    * Updates the game logic
    */
    function update() {
    frames++;

    // changing direction of the snake depending on which keys
    // that are pressed
    if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
    snake.direction = LEFT;
    }
    if (keystate[KEY_UP] && snake.direction !== DOWN) {
    snake.direction = UP;
    }
    if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
    snake.direction = RIGHT;
    }
    if (keystate[KEY_DOWN] && snake.direction !== UP) {
    snake.direction = DOWN;
    }

    // each five frames update the game state.
    if (frames%5 === 0) {
    // pop the last element from the snake queue i.e. the
    // head
    var nx = snake.last.x;
    var ny = snake.last.y;

    // updates the position depending on the snake direction
    switch (snake.direction) {
    case LEFT:
    nx--;
    break;
    case UP:
    ny--;
    break;
    case RIGHT:
    nx++;
    break;
    case DOWN:
    ny++;
    break;
    }

    // checks all gameover conditions
    if (0 > nx || nx > grid.width-1 ||
    0 > ny || ny > grid.height-1 ||
    grid.get(nx, ny) === SNAKE
    ) {
    return init();
    }

    // check wheter the new position are on the fruit item
    if (grid.get(nx, ny) === FRUIT) {
    // increment the score and sets a new fruit position
    score++;
    setFood();
    } else {
    // take out the first item from the snake queue i.e
    // the tail and remove id from grid
    var tail = snake.remove();
    grid.set(EMPTY, tail.x, tail.y);
    }

    // add a snake id at the new position and append it to
    // the snake queue
    grid.set(SNAKE, nx, ny);
    snake.insert(nx, ny);
    }
    }

    /**
    * Render the grid to the canvas.
    */
    function draw() {
    // calculate tile-width and -height
    var tw = canvas.width/grid.width;
    var th = canvas.height/grid.height;
    // iterate through the grid and draw all cells
    for (var x=0; x < grid.width; x++) {
    for (var y=0; y < grid.height; y++) {
    // sets the fillstyle depending on the id of
    // each cell
    switch (grid.get(x, y)) {
    case EMPTY:
    ctx.fillStyle = "#fff";
    break;
    case SNAKE:
    ctx.fillStyle = "#0ff";
    break;
    case FRUIT:
    ctx.fillStyle = "#f00";
    break;
    }
    ctx.fillRect(x*tw, y*th, tw, th);
    }
    }
    // changes the fillstyle once more and draws the score
    // message to the canvas
    ctx.fillStyle = "#000";
    ctx.fillText("SCORE: " + score, 10, canvas.height-10);
    }

    // start and run the game
    main();
    </script>
    </body>
    </html>

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    there are no code tags used so the code is hard to read.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

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