If I were to write this simple Javascript game out from memory, while understanding the code, twice or more each morning, how beneficial would it be to me? via /r/learnprogramming


If I were to write this simple Javascript game out from memory, while understanding the code, twice or more each morning, how beneficial would it be to me?

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Snake Game</title> <!-- Basic styling, centering of the canvas. --> <style> canvas { display: block; position: absolute; border: 1px solid #000; margin: auto; top: 0; bottom: 0; right: 0; left: 0; } </style> </head> <body>  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, 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 , 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  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  </body> </html> 

Submitted July 10, 2017 at 04:02AM by TheBigBlabberMouth
via reddit http://ift.tt/2u8NEx8

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s