/* JavaScript Snake By Patrick Gillespie http://patorjk.com/games/snake */ /** * @module Snake * @class SNAKE */ var SNAKE = SNAKE || {}; /** * @method addEventListener * @param {Object} obj The object to add an event listener to. * @param {String} event The event to listen for. * @param {Function} funct The function to execute when the event is triggered. * @param {Boolean} evtCapturing True to do event capturing, false to do event bubbling. */ SNAKE.addEventListener = (function() { if (window.addEventListener) { return function(obj, event, funct, evtCapturing) { obj.addEventListener(event, funct, evtCapturing); }; } else if (window.attachEvent) { return function(obj, event, funct) { obj.attachEvent("on" + event, funct); }; } })(); /** * @method removeEventListener * @param {Object} obj The object to remove an event listener from. * @param {String} event The event that was listened for. * @param {Function} funct The function that was executed when the event is triggered. * @param {Boolean} evtCapturing True if event capturing was done, false otherwise. */ SNAKE.removeEventListener = (function() { if (window.removeEventListener) { return function(obj, event, funct, evtCapturing) { obj.removeEventListener(event, funct, evtCapturing); }; } else if (window.detachEvent) { return function(obj, event, funct) { obj.detachEvent("on" + event, funct); }; } })(); /** * This class manages the snake which will reside inside of a SNAKE.Board object. * @class Snake * @constructor * @namespace SNAKE * @param {Object} config The configuration object for the class. Contains playingBoard (the SNAKE.Board that this snake resides in), startRow and startCol. */ SNAKE.Snake = SNAKE.Snake || (function() { // ------------------------------------------------------------------------- // Private static variables and methods // ------------------------------------------------------------------------- var instanceNumber = 0; var blockPool = []; var SnakeBlock = function() { this.elm = null; this.elmStyle = null; this.row = -1; this.col = -1; this.xPos = -1000; this.yPos = -1000; this.next = null; this.prev = null; }; // this function is adapted from the example at http://greengeckodesign.com/blog/2007/07/get-highest-z-index-in-javascript.html function getNextHighestZIndex(myObj) { var highestIndex = 0, currentIndex = 0, ii; for (ii in myObj) { if (myObj[ii].elm.currentStyle){ currentIndex = parseFloat(myObj[ii].elm.style["z-index"],10); }else if(window.getComputedStyle) { currentIndex = parseFloat(document.defaultView.getComputedStyle(myObj[ii].elm,null).getPropertyValue("z-index"),10); } if(!isNaN(currentIndex) && currentIndex > highestIndex){ highestIndex = currentIndex; } } return(highestIndex+1); } // ------------------------------------------------------------------------- // Contructor + public and private definitions // ------------------------------------------------------------------------- /* config options: playingBoard - the SnakeBoard that this snake belongs too. startRow - The row the snake should start on. startCol - The column the snake should start on. */ return function(config) { if (!config||!config.playingBoard) {return;} // ----- private variables ----- var me = this, playingBoard = config.playingBoard, myId = instanceNumber++, growthIncr = 5, moveQueue = [], // a queue that holds the next moves of the snake currentDirection = 1, // 0: up, 1: left, 2: down, 3: right columnShift = [0, 1, 0, -1], rowShift = [-1, 0, 1, 0], xPosShift = [], yPosShift = [], snakeSpeed = 75, isDead = false, isPaused = false; // ----- public variables ----- me.snakeBody = {}; me.snakeBody["b0"] = new SnakeBlock(); // create snake head me.snakeBody["b0"].row = config.startRow || 1; me.snakeBody["b0"].col = config.startCol || 1; me.snakeBody["b0"].xPos = me.snakeBody["b0"].row * playingBoard.getBlockWidth(); me.snakeBody["b0"].yPos = me.snakeBody["b0"].col * playingBoard.getBlockHeight(); me.snakeBody["b0"].elm = createSnakeElement(); me.snakeBody["b0"].elmStyle = me.snakeBody["b0"].elm.style; playingBoard.getBoardContainer().appendChild( me.snakeBody["b0"].elm ); me.snakeBody["b0"].elm.style.left = me.snakeBody["b0"].xPos + "px"; me.snakeBody["b0"].elm.style.top = me.snakeBody["b0"].yPos + "px"; me.snakeBody["b0"].next = me.snakeBody["b0"]; me.snakeBody["b0"].prev = me.snakeBody["b0"]; me.snakeLength = 1; me.snakeHead = me.snakeBody["b0"]; me.snakeTail = me.snakeBody["b0"]; me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,''); me.snakeHead.elm.className += " snake-snakebody-alive"; // ----- private methods ----- function createSnakeElement() { var tempNode = document.createElement("div"); tempNode.className = "snake-snakebody-block"; tempNode.style.left = "-1000px"; tempNode.style.top = "-1000px"; tempNode.style.width = playingBoard.getBlockWidth() + "px"; tempNode.style.height = playingBoard.getBlockHeight() + "px"; return tempNode; } function createBlocks(num) { var tempBlock; var tempNode = createSnakeElement(); for (var ii = 1; ii < num; ii++){ tempBlock = new SnakeBlock(); tempBlock.elm = tempNode.cloneNode(true); tempBlock.elmStyle = tempBlock.elm.style; playingBoard.getBoardContainer().appendChild( tempBlock.elm ); blockPool[blockPool.length] = tempBlock; } tempBlock = new SnakeBlock(); tempBlock.elm = tempNode; playingBoard.getBoardContainer().appendChild( tempBlock.elm ); blockPool[blockPool.length] = tempBlock; } // ----- public methods ----- me.setPaused = function(val) { isPaused = val; }; me.getPaused = function() { return isPaused; }; /** * This method is called when a user presses a key. It logs arrow key presses in "moveQueue", which is used when the snake needs to make its next move. * @method handleArrowKeys * @param {Number} keyNum A number representing the key that was pressed. */ /* Handles what happens when an arrow key is pressed. Direction explained (0 = up, etc etc) 0 3 1 2 */ me.handleArrowKeys = function(keyNum) { if (isDead || isPaused) {return;} var snakeLength = me.snakeLength; var lastMove = moveQueue[0] || currentDirection; //console.log("lastmove="+lastMove); //console.log("dir="+keyNum); switch (keyNum) { case 37: case 65: if ( lastMove !== 1 || snakeLength === 1 ) { moveQueue.unshift(3); //SnakeDirection = 3; } break; case 38: case 87: if ( lastMove !== 2 || snakeLength === 1 ) { moveQueue.unshift(0);//SnakeDirection = 0; } break; case 39: case 68: if ( lastMove !== 3 || snakeLength === 1 ) { moveQueue.unshift(1); //SnakeDirection = 1; } break; case 40: case 83: if ( lastMove !== 0 || snakeLength === 1 ) { moveQueue.unshift(2);//SnakeDirection = 2; } break; } }; /** * This method is executed for each move of the snake. It determines where the snake will go and what will happen to it. This method needs to run quickly. * @method go */ me.go = function() { var oldHead = me.snakeHead, newHead = me.snakeTail, myDirection = currentDirection, grid = playingBoard.grid; // cache grid for quicker lookup if (isPaused === true) { setTimeout(function(){me.go();}, snakeSpeed); return; } me.snakeTail = newHead.prev; me.snakeHead = newHead; // clear the old board position if ( grid[newHead.row] && grid[newHead.row][newHead.col] ) { grid[newHead.row][newHead.col] = 0; } if (moveQueue.length){ myDirection = currentDirection = moveQueue.pop(); } newHead.col = oldHead.col + columnShift[myDirection]; newHead.row = oldHead.row + rowShift[myDirection]; newHead.xPos = oldHead.xPos + xPosShift[myDirection]; newHead.yPos = oldHead.yPos + yPosShift[myDirection]; if ( !newHead.elmStyle ) { newHead.elmStyle = newHead.elm.style; } newHead.elmStyle.left = newHead.xPos + "px"; newHead.elmStyle.top = newHead.yPos + "px"; // check the new spot the snake moved into if (grid[newHead.row][newHead.col] === 0) { grid[newHead.row][newHead.col] = 1; setTimeout(function(){me.go();}, snakeSpeed); } else if (grid[newHead.row][newHead.col] > 0) { me.handleDeath(); } else if (grid[newHead.row][newHead.col] === playingBoard.getGridFoodValue()) { grid[newHead.row][newHead.col] = 1; me.eatFood(); setTimeout(function(){me.go();}, snakeSpeed); } }; /** * This method is called when it is determined that the snake has eaten some food. * @method eatFood */ me.eatFood = function() { if (blockPool.length <= growthIncr) { createBlocks(growthIncr*2); } var blocks = blockPool.splice(0, growthIncr); var ii = blocks.length, index, prevNode = me.snakeTail; while (ii--) { index = "b" + me.snakeLength++; me.snakeBody[index] = blocks[ii]; me.snakeBody[index].prev = prevNode; me.snakeBody[index].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'') me.snakeBody[index].elm.className += " snake-snakebody-alive"; prevNode.next = me.snakeBody[index]; prevNode = me.snakeBody[index]; } me.snakeTail = me.snakeBody[index]; me.snakeTail.next = me.snakeHead; me.snakeHead.prev = me.snakeTail; playingBoard.foodEaten(); }; /** * This method handles what happens when the snake dies. * @method handleDeath */ me.handleDeath = function() { me.snakeHead.elm.style.zIndex = getNextHighestZIndex(me.snakeBody); me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-alive\b/,'') me.snakeHead.elm.className += " snake-snakebody-dead"; isDead = true; playingBoard.handleDeath(); moveQueue.length = 0; }; /** * This method sets a flag that lets the snake be alive again. * @method rebirth */ me.rebirth = function() { isDead = false; }; /** * This method reset the snake so it is ready for a new game. * @method reset */ me.reset = function() { if (isDead === false) {return;} var blocks = [], curNode = me.snakeHead.next, nextNode; while (curNode !== me.snakeHead) { nextNode = curNode.next; curNode.prev = null; curNode.next = null; blocks.push(curNode); curNode = nextNode; } me.snakeHead.next = me.snakeHead; me.snakeHead.prev = me.snakeHead; me.snakeTail = me.snakeHead; me.snakeLength = 1; for (var ii = 0; ii < blocks.length; ii++) { blocks[ii].elm.style.left = "-1000px"; blocks[ii].elm.style.top = "-1000px"; blocks[ii].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'') blocks[ii].elm.className += " snake-snakebody-alive"; } blockPool.concat(blocks); me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'') me.snakeHead.elm.className += " snake-snakebody-alive"; me.snakeHead.row = config.startRow || 1; me.snakeHead.col = config.startCol || 1; me.snakeHead.xPos = me.snakeHead.row * playingBoard.getBlockWidth(); me.snakeHead.yPos = me.snakeHead.col * playingBoard.getBlockHeight(); me.snakeHead.elm.style.left = me.snakeHead.xPos + "px"; me.snakeHead.elm.style.top = me.snakeHead.yPos + "px"; }; // --------------------------------------------------------------------- // Initialize // --------------------------------------------------------------------- createBlocks(growthIncr*2); xPosShift[0] = 0; xPosShift[1] = playingBoard.getBlockWidth(); xPosShift[2] = 0; xPosShift[3] = -1 * playingBoard.getBlockWidth(); yPosShift[0] = -1 * playingBoard.getBlockHeight(); yPosShift[1] = 0; yPosShift[2] = playingBoard.getBlockHeight(); yPosShift[3] = 0; }; })(); /** * This class manages the food which the snake will eat. * @class Food * @constructor * @namespace SNAKE * @param {Object} config The configuration object for the class. Contains playingBoard (the SNAKE.Board that this food resides in). */ SNAKE.Food = SNAKE.Food || (function() { // ------------------------------------------------------------------------- // Private static variables and methods // ------------------------------------------------------------------------- var instanceNumber = 0; function getRandomPosition(x, y){ return Math.floor(Math.random()*(y+1-x)) + x; } // ------------------------------------------------------------------------- // Contructor + public and private definitions // ------------------------------------------------------------------------- /* config options: playingBoard - the SnakeBoard that this object belongs too. */ return function(config) { if (!config||!config.playingBoard) {return;} // ----- private variables ----- var me = this; var playingBoard = config.playingBoard; var fRow, fColumn; var myId = instanceNumber++; var elmFood = document.createElement("div"); elmFood.setAttribute("id", "snake-food-"+myId); elmFood.className = "snake-food-block"; elmFood.style.width = playingBoard.getBlockWidth() + "px"; elmFood.style.height = playingBoard.getBlockHeight() + "px"; elmFood.style.left = "-1000px"; elmFood.style.top = "-1000px"; playingBoard.getBoardContainer().appendChild(elmFood); // ----- public methods ----- /** * @method getFoodElement * @return {DOM Element} The div the represents the food. */ me.getFoodElement = function() { return elmFood; }; /** * Randomly places the food onto an available location on the playing board. * @method randomlyPlaceFood */ me.randomlyPlaceFood = function() { // if there exist some food, clear its presence from the board if (playingBoard.grid[fRow] && playingBoard.grid[fRow][fColumn] === playingBoard.getGridFoodValue()){ playingBoard.grid[fRow][fColumn] = 0; } var row = 0, col = 0, numTries = 0; var maxRows = playingBoard.grid.length-1; var maxCols = playingBoard.grid[0].length-1; while (playingBoard.grid[row][col] !== 0){ row = getRandomPosition(1, maxRows); col = getRandomPosition(1, maxCols); // in some cases there may not be any room to put food anywhere // instead of freezing, exit out numTries++; if (numTries > 20000){ row = -1; col = -1; break; } } playingBoard.grid[row][col] = playingBoard.getGridFoodValue(); fRow = row; fColumn = col; elmFood.style.top = row * playingBoard.getBlockHeight() + "px"; elmFood.style.left = col * playingBoard.getBlockWidth() + "px"; }; }; })(); /** * This class manages playing board for the game. * @class Board * @constructor * @namespace SNAKE * @param {Object} config The configuration object for the class. Set fullScreen equal to true if you want the game to take up the full screen, otherwise, set the top, left, width and height parameters. */ SNAKE.Board = SNAKE.Board || (function() { // ------------------------------------------------------------------------- // Private static variables and methods // ------------------------------------------------------------------------- var instanceNumber = 0; // this function is adapted from the example at http://greengeckodesign.com/blog/2007/07/get-highest-z-index-in-javascript.html function getNextHighestZIndex(myObj) { var highestIndex = 0, currentIndex = 0, ii; for (ii in myObj) { if (myObj[ii].elm.currentStyle){ currentIndex = parseFloat(myObj[ii].elm.style["z-index"],10); }else if(window.getComputedStyle) { currentIndex = parseFloat(document.defaultView.getComputedStyle(myObj[ii].elm,null).getPropertyValue("z-index"),10); } if(!isNaN(currentIndex) && currentIndex > highestIndex){ highestIndex = currentIndex; } } return(highestIndex+1); } /* This function returns the width of the available screen real estate that we have */ function getClientWidth(){ var myWidth = 0; if( typeof window.innerWidth === "number" ) { myWidth = window.innerWidth;//Non-IE } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { myWidth = document.documentElement.clientWidth;//IE 6+ in 'standards compliant mode' } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { myWidth = document.body.clientWidth;//IE 4 compatible } return myWidth; } /* This function returns the height of the available screen real estate that we have */ function getClientHeight(){ var myHeight = 0; if( typeof window.innerHeight === "number" ) { myHeight = window.innerHeight;//Non-IE } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { myHeight = document.documentElement.clientHeight;//IE 6+ in 'standards compliant mode' } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { myHeight = document.body.clientHeight;//IE 4 compatible } return myHeight; } // ------------------------------------------------------------------------- // Contructor + public and private definitions // ------------------------------------------------------------------------- return function(inputConfig) { // --- private variables --- var me = this, myId = instanceNumber++, config = inputConfig || {}, MAX_BOARD_COLS = 250, MAX_BOARD_ROWS = 250, blockWidth = 20, blockHeight = 20, GRID_FOOD_VALUE = -1, // the value of a spot on the board that represents snake food, MUST BE NEGATIVE myFood, mySnake, boardState = 1, // 0: in active; 1: awaiting game start; 2: playing game myKeyListener, isPaused = false,//note: both the board and the snake can be paused // Board components elmContainer, elmPlayingField, elmAboutPanel, elmLengthPanel, elmWelcome, elmTryAgain, elmPauseScreen; // --- public variables --- me.grid = []; // --------------------------------------------------------------------- // private functions // --------------------------------------------------------------------- function createBoardElements() { elmPlayingField = document.createElement("div"); elmPlayingField.setAttribute("id", "playingField"); elmPlayingField.className = "snake-playing-field"; SNAKE.addEventListener(elmPlayingField, "click", function() { elmContainer.focus(); }, false); elmPauseScreen = document.createElement("div"); elmPauseScreen.className = "snake-pause-screen"; elmPauseScreen.innerHTML = "