SHARE
TWEET

snakeGame Mod ( All 3 files ) - LARGE

ambosdavid Mar 26th, 2019 (edited) 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. -- snake.html --
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.  
  6.     <title>snakeGame Mod</title>
  7.     <link rel="stylesheet" type="text/css" href="./css/snake.css" />
  8. </head>
  9. <body>
  10.     <div id="game-area" tabindex="0">
  11.     </div>
  12.     <script type="text/javascript" src="./js/snake.js"></script>
  13.     <script type="text/javascript">
  14.     var mySnakeBoard = new SNAKE.Board(  {
  15.                                             boardContainer: "game-area",
  16.                                             fullScreen: true
  17.                                         });    
  18.     </script>
  19. </body>
  20. </html>
  21.  
  22.  
  23.  
  24.  
  25. -- snake.js --
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32. var SNAKE = SNAKE || {};
  33.  
  34. SNAKE.addEventListener = (function() {
  35.     if (window.addEventListener) {
  36.         return function(obj, event, funct, evtCapturing) {
  37.             obj.addEventListener(event, funct, evtCapturing);
  38.         };
  39.     } else if (window.attachEvent) {
  40.         return function(obj, event, funct) {
  41.             obj.attachEvent("on" + event, funct);
  42.         };
  43.     }
  44. })();
  45.  
  46. SNAKE.removeEventListener = (function() {
  47.     if (window.removeEventListener) {
  48.         return function(obj, event, funct, evtCapturing) {
  49.             obj.removeEventListener(event, funct, evtCapturing);
  50.         };
  51.     } else if (window.detachEvent) {
  52.         return function(obj, event, funct) {
  53.             obj.detachEvent("on" + event, funct);
  54.         };
  55.     }
  56. })();
  57.  
  58.  
  59. SNAKE.Snake = SNAKE.Snake || (function() {
  60.    
  61.  
  62.     var instanceNumber = 0;
  63.     var blockPool = [];
  64.    
  65.     var SnakeBlock = function() {
  66.         this.elm = null;
  67.         this.elmStyle = null;
  68.         this.row = -1;
  69.         this.col = -1;
  70.         this.xPos = -1000;
  71.         this.yPos = -1000;
  72.         this.next = null;
  73.         this.prev = null;
  74.     };
  75.    
  76.    function getNextHighestZIndex(myObj) {
  77.         var highestIndex = 0,
  78.             currentIndex = 0,
  79.             ii;
  80.         for (ii in myObj) {
  81.             if (myObj[ii].elm.currentStyle){  
  82.                 currentIndex = parseFloat(myObj[ii].elm.style["z-index"],10);
  83.             }else if(window.getComputedStyle) {
  84.                 currentIndex = parseFloat(document.defaultView.getComputedStyle(myObj[ii].elm,null).getPropertyValue("z-index"),10);  
  85.             }
  86.             if(!isNaN(currentIndex) && currentIndex > highestIndex){
  87.                 highestIndex = currentIndex;
  88.             }
  89.         }
  90.         return(highestIndex+1);  
  91.     }
  92.    
  93.  return function(config) {
  94.    
  95.         if (!config||!config.playingBoard) {return;}
  96.    
  97.    
  98.         var me = this,
  99.             playingBoard = config.playingBoard,
  100.             myId = instanceNumber++,
  101.             growthIncr = 5,
  102.             moveQueue = [], // a queue that holds the next moves of the snake
  103.             currentDirection = 1, // 0: up, 1: left, 2: down, 3: right
  104.             columnShift = [0, 1, 0, -1],
  105.             rowShift = [-1, 0, 1, 0],
  106.             xPosShift = [],
  107.             yPosShift = [],
  108.             snakeSpeed = 75,
  109.             isDead = false;
  110.      
  111.         me.snakeBody = {};
  112.         me.snakeBody["b0"] = new SnakeBlock(); // create snake head
  113.         me.snakeBody["b0"].row = config.startRow || 1;
  114.         me.snakeBody["b0"].col = config.startCol || 1;
  115.         me.snakeBody["b0"].xPos = me.snakeBody["b0"].row * playingBoard.getBlockWidth();
  116.         me.snakeBody["b0"].yPos = me.snakeBody["b0"].col * playingBoard.getBlockHeight();
  117.         me.snakeBody["b0"].elm = createSnakeElement();
  118.         me.snakeBody["b0"].elmStyle = me.snakeBody["b0"].elm.style;
  119.         playingBoard.getBoardContainer().appendChild( me.snakeBody["b0"].elm );
  120.         me.snakeBody["b0"].elm.style.left = me.snakeBody["b0"].xPos + "px";
  121.         me.snakeBody["b0"].elm.style.top = me.snakeBody["b0"].yPos + "px";
  122.         me.snakeBody["b0"].next = me.snakeBody["b0"];
  123.         me.snakeBody["b0"].prev = me.snakeBody["b0"];
  124.        
  125.         me.snakeLength = 1;
  126.         me.snakeHead = me.snakeBody["b0"];
  127.         me.snakeTail = me.snakeBody["b0"];
  128.         me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'');
  129.         me.snakeHead.elm.className += " snake-snakebody-alive";
  130.        
  131.        
  132.         function createSnakeElement() {
  133.             var tempNode = document.createElement("div");
  134.             tempNode.className = "snake-snakebody-block";
  135.             tempNode.style.left = "-1000px";
  136.             tempNode.style.top = "-1000px";
  137.             tempNode.style.width = playingBoard.getBlockWidth() + "px";
  138.             tempNode.style.height = playingBoard.getBlockHeight() + "px";
  139.             return tempNode;
  140.         }
  141.        
  142.         function createBlocks(num) {
  143.             var tempBlock;
  144.             var tempNode = createSnakeElement();
  145.  
  146.             for (var ii = 1; ii < num; ii++){
  147.                 tempBlock = new SnakeBlock();
  148.                 tempBlock.elm = tempNode.cloneNode(true);
  149.                 tempBlock.elmStyle = tempBlock.elm.style;
  150.                 playingBoard.getBoardContainer().appendChild( tempBlock.elm );
  151.                 blockPool[blockPool.length] = tempBlock;
  152.             }
  153.            
  154.             tempBlock = new SnakeBlock();
  155.             tempBlock.elm = tempNode;
  156.             playingBoard.getBoardContainer().appendChild( tempBlock.elm );
  157.             blockPool[blockPool.length] = tempBlock;
  158.         }
  159.        
  160.        me.handleArrowKeys = function(keyNum) {
  161.             if (isDead) {return;}
  162.            
  163.             var snakeLength = me.snakeLength;
  164.             var lastMove = moveQueue[0] || currentDirection;
  165.  
  166.             switch (keyNum) {
  167.                 case 37:
  168.                     if ( lastMove !== 1 || snakeLength === 1 ) {
  169.                         moveQueue.unshift(3); //SnakeDirection = 3;
  170.                     }
  171.                     break;    
  172.                 case 38:
  173.                     if ( lastMove !== 2 || snakeLength === 1 ) {
  174.                         moveQueue.unshift(0);//SnakeDirection = 0;
  175.                     }
  176.                     break;    
  177.                 case 39:
  178.                     if ( lastMove !== 3 || snakeLength === 1 ) {
  179.                         moveQueue.unshift(1); //SnakeDirection = 1;
  180.                     }
  181.                     break;    
  182.                 case 40:
  183.                     if ( lastMove !== 0 || snakeLength === 1 ) {
  184.                         moveQueue.unshift(2);//SnakeDirection = 2;
  185.                     }
  186.                     break;  
  187.             }
  188.         };
  189.        
  190.        me.go = function() {
  191.        
  192.             var oldHead = me.snakeHead,
  193.                 newHead = me.snakeTail,
  194.                 myDirection = currentDirection,
  195.                 grid = playingBoard.grid; // cache grid for quicker lookup
  196.        
  197.             me.snakeTail = newHead.prev;
  198.             me.snakeHead = newHead;
  199.        
  200.             if ( grid[newHead.row] && grid[newHead.row][newHead.col] ) {
  201.                 grid[newHead.row][newHead.col] = 0;
  202.             }
  203.        
  204.             if (moveQueue.length){
  205.                 myDirection = currentDirection = moveQueue.pop();
  206.             }
  207.        
  208.             newHead.col = oldHead.col + columnShift[myDirection];
  209.             newHead.row = oldHead.row + rowShift[myDirection];
  210.             newHead.xPos = oldHead.xPos + xPosShift[myDirection];
  211.             newHead.yPos = oldHead.yPos + yPosShift[myDirection];
  212.            
  213.             if ( !newHead.elmStyle ) {
  214.                 newHead.elmStyle = newHead.elm.style;
  215.             }
  216.            
  217.             newHead.elmStyle.left = newHead.xPos + "px";
  218.             newHead.elmStyle.top = newHead.yPos + "px";
  219.  
  220.             // check the new spot the snake moved into
  221.  
  222.             if (grid[newHead.row][newHead.col] === 0) {
  223.                 grid[newHead.row][newHead.col] = 1;
  224.                 setTimeout(function(){me.go();}, snakeSpeed);
  225.             } else if (grid[newHead.row][newHead.col] > 0) {
  226.                 me.handleDeath();
  227.             } else if (grid[newHead.row][newHead.col] === playingBoard.getGridFoodValue()) {
  228.                 grid[newHead.row][newHead.col] = 1;
  229.                 me.eatFood();
  230.                 setTimeout(function(){me.go();}, snakeSpeed);
  231.             }
  232.         };
  233.        
  234.  
  235.         me.eatFood = function() {
  236.             if (blockPool.length <= growthIncr) {
  237.                 createBlocks(growthIncr*2);
  238.             }
  239.             var blocks = blockPool.splice(0, growthIncr);
  240.            
  241.             var ii = blocks.length,
  242.                 index,
  243.                 prevNode = me.snakeTail;
  244.             while (ii--) {
  245.                 index = "b" + me.snakeLength++;
  246.                 me.snakeBody[index] = blocks[ii];
  247.                 me.snakeBody[index].prev = prevNode;
  248.                 me.snakeBody[index].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'')
  249.                 me.snakeBody[index].elm.className += " snake-snakebody-alive";
  250.                 prevNode.next = me.snakeBody[index];
  251.                 prevNode = me.snakeBody[index];
  252.             }
  253.             me.snakeTail = me.snakeBody[index];
  254.             me.snakeTail.next = me.snakeHead;
  255.             me.snakeHead.prev = me.snakeTail;
  256.  
  257.             playingBoard.foodEaten();
  258.         };
  259.        
  260.         me.handleDeath = function() {
  261.             me.snakeHead.elm.style.zIndex = getNextHighestZIndex(me.snakeBody);
  262.             me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-alive\b/,'')
  263.             me.snakeHead.elm.className += " snake-snakebody-dead";
  264.  
  265.             isDead = true;
  266.             playingBoard.handleDeath();
  267.             moveQueue.length = 0;
  268.         };
  269.  
  270.         me.rebirth = function() {
  271.             isDead = false;
  272.         };
  273.        
  274.         me.reset = function() {
  275.             if (isDead === false) {return;}
  276.            
  277.             var blocks = [],
  278.                 curNode = me.snakeHead.next,
  279.                 nextNode;
  280.             while (curNode !== me.snakeHead) {
  281.                 nextNode = curNode.next;
  282.                 curNode.prev = null;
  283.                 curNode.next = null;
  284.                 blocks.push(curNode);
  285.                 curNode = nextNode;
  286.             }
  287.             me.snakeHead.next = me.snakeHead;
  288.             me.snakeHead.prev = me.snakeHead;
  289.             me.snakeTail = me.snakeHead;
  290.             me.snakeLength = 1;
  291.            
  292.             for (var ii = 0; ii < blocks.length; ii++) {
  293.                 blocks[ii].elm.style.left = "-1000px";
  294.                 blocks[ii].elm.style.top = "-1000px";
  295.                 blocks[ii].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'')
  296.                 blocks[ii].elm.className += " snake-snakebody-alive";
  297.             }
  298.            
  299.             blockPool.concat(blocks);
  300.             me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'')
  301.             me.snakeHead.elm.className += " snake-snakebody-alive";
  302.             me.snakeHead.row = config.startRow || 1;
  303.             me.snakeHead.col = config.startCol || 1;
  304.             me.snakeHead.xPos = me.snakeHead.row * playingBoard.getBlockWidth();
  305.             me.snakeHead.yPos = me.snakeHead.col * playingBoard.getBlockHeight();
  306.             me.snakeHead.elm.style.left = me.snakeHead.xPos + "px";
  307.             me.snakeHead.elm.style.top = me.snakeHead.yPos + "px";
  308.         };
  309.        
  310.        
  311.         createBlocks(growthIncr*2);
  312.         xPosShift[0] = 0;
  313.         xPosShift[1] = playingBoard.getBlockWidth();
  314.         xPosShift[2] = 0;
  315.         xPosShift[3] = -1 * playingBoard.getBlockWidth();
  316.        
  317.         yPosShift[0] = -1 * playingBoard.getBlockHeight();
  318.         yPosShift[1] = 0;
  319.         yPosShift[2] = playingBoard.getBlockHeight();
  320.         yPosShift[3] = 0;
  321.     };
  322. })();
  323.  
  324. SNAKE.Food = SNAKE.Food || (function() {
  325.    
  326.    
  327.     var instanceNumber = 0;
  328.    
  329.     function getRandomPosition(x, y){
  330.         return Math.floor(Math.random()*(y+1-x)) + x;
  331.     }
  332.    
  333.     return function(config) {
  334.        
  335.         if (!config||!config.playingBoard) {return;}
  336.  
  337.         // ----- private variables -----
  338.  
  339.         var me = this;
  340.         var playingBoard = config.playingBoard;
  341.         var fRow, fColumn;
  342.         var myId = instanceNumber++;
  343.  
  344.         var elmFood = document.createElement("div");
  345.         elmFood.setAttribute("id", "snake-food-"+myId);
  346.         elmFood.className = "snake-food-block";
  347.         elmFood.style.width = playingBoard.getBlockWidth() + "px";
  348.         elmFood.style.height = playingBoard.getBlockHeight() + "px";
  349.         elmFood.style.left = "-1000px";
  350.         elmFood.style.top = "-1000px";
  351.         playingBoard.getBoardContainer().appendChild(elmFood);
  352.          
  353.         me.getFoodElement = function() {
  354.             return elmFood;  
  355.         };
  356.          
  357.         me.randomlyPlaceFood = function() {
  358.      
  359.             if (playingBoard.grid[fRow] && playingBoard.grid[fRow][fColumn] === playingBoard.getGridFoodValue()){
  360.                 playingBoard.grid[fRow][fColumn] = 0;
  361.             }
  362.  
  363.             var row = 0, col = 0, numTries = 0;
  364.  
  365.             var maxRows = playingBoard.grid.length-1;
  366.             var maxCols = playingBoard.grid[0].length-1;
  367.            
  368.             while (playingBoard.grid[row][col] !== 0){
  369.                 row = getRandomPosition(1, maxRows);
  370.                 col = getRandomPosition(1, maxCols);
  371.  
  372.                 // in some cases there may not be any room to put food anywhere
  373.                 // instead of freezing, exit out
  374.                 numTries++;
  375.                 if (numTries > 20000){
  376.                     row = -1;
  377.                     col = -1;
  378.                     break;
  379.                 }
  380.             }
  381.  
  382.             playingBoard.grid[row][col] = playingBoard.getGridFoodValue();
  383.             fRow = row;
  384.             fColumn = col;
  385.             elmFood.style.top = row * playingBoard.getBlockHeight() + "px";
  386.             elmFood.style.left = col * playingBoard.getBlockWidth() + "px";
  387.         };
  388.     };
  389. })();
  390.  
  391.  
  392. SNAKE.Board = SNAKE.Board || (function() {
  393.  
  394.     var instanceNumber = 0;
  395.  
  396.     function getNextHighestZIndex(myObj) {
  397.         var highestIndex = 0,
  398.             currentIndex = 0,
  399.             ii;
  400.         for (ii in myObj) {
  401.             if (myObj[ii].elm.currentStyle){  
  402.                 currentIndex = parseFloat(myObj[ii].elm.style["z-index"],10);
  403.             }else if(window.getComputedStyle) {
  404.                 currentIndex = parseFloat(document.defaultView.getComputedStyle(myObj[ii].elm,null).getPropertyValue("z-index"),10);  
  405.             }
  406.             if(!isNaN(currentIndex) && currentIndex > highestIndex){
  407.                 highestIndex = currentIndex;
  408.             }
  409.         }
  410.         return(highestIndex+1);  
  411.     }
  412.  
  413.     /*
  414.         This function returns the width of the available screen real estate that we have
  415.     */
  416.     function getClientWidth(){
  417.         var myWidth = 0;
  418.         if( typeof window.innerWidth === "number" ) {
  419.             myWidth = window.innerWidth;//Non-IE
  420.         } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  421.             myWidth = document.documentElement.clientWidth;//IE 6+ in 'standards compliant mode'
  422.         } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  423.             myWidth = document.body.clientWidth;//IE 4 compatible
  424.         }
  425.         return myWidth;
  426.     }
  427.     /*
  428.         This function returns the height of the available screen real estate that we have
  429.     */
  430.     function getClientHeight(){
  431.         var myHeight = 0;
  432.         if( typeof window.innerHeight === "number" ) {
  433.             myHeight = window.innerHeight;//Non-IE
  434.         } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  435.             myHeight = document.documentElement.clientHeight;//IE 6+ in 'standards compliant mode'
  436.         } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  437.             myHeight = document.body.clientHeight;//IE 4 compatible
  438.         }
  439.         return myHeight;
  440.     }
  441.  
  442.  
  443.     return function(inputConfig) {
  444.    
  445.         // --- private variables ---
  446.         var me = this,
  447.             myId = instanceNumber++,
  448.             config = inputConfig || {},
  449.             MAX_BOARD_COLS = 250,
  450.             MAX_BOARD_ROWS = 250,
  451.             blockWidth = 20,
  452.             blockHeight = 20,
  453.             GRID_FOOD_VALUE = -1,
  454.             myFood,
  455.             mySnake,
  456.             boardState = 1,
  457.             myKeyListener,
  458.             // Board components
  459.             elmContainer, elmPlayingField, elmAboutPanel, elmLengthPanel, elmWelcome, elmTryAgain;
  460.        
  461.         // --- public variables ---
  462.         me.grid = [];
  463.        
  464.         function createBoardElements() {
  465.             elmPlayingField = document.createElement("div");
  466.             elmPlayingField.setAttribute("id", "playingField");
  467.             elmPlayingField.className = "snake-playing-field";
  468.            
  469.             SNAKE.addEventListener(elmPlayingField, "click", function() {
  470.                 elmContainer.focus();
  471.             }, false);
  472.            
  473.             elmAboutPanel = document.createElement("div");
  474.             elmAboutPanel.className = "snake-panel-component";
  475.            
  476.             elmLengthPanel = document.createElement("div");
  477.             elmLengthPanel.className = "snake-panel-component";
  478.             elmLengthPanel.innerHTML = "Length: 1";
  479.            
  480.             elmWelcome = createWelcomeElement();
  481.             elmTryAgain = createTryAgainElement();
  482.            
  483.             SNAKE.addEventListener( elmContainer, "keyup", function(evt) {
  484.                 if (!evt) var evt = window.event;
  485.                 evt.cancelBubble = true;
  486.                 if (evt.stopPropagation) {evt.stopPropagation();}
  487.                 if (evt.preventDefault) {evt.preventDefault();}
  488.                 return false;
  489.             }, false);
  490.            
  491.             elmContainer.className = "snake-game-container";
  492.            
  493.             elmContainer.appendChild(elmPlayingField);
  494.             elmContainer.appendChild(elmAboutPanel);
  495.             elmContainer.appendChild(elmLengthPanel);
  496.             elmContainer.appendChild(elmWelcome);
  497.             elmContainer.appendChild(elmTryAgain);
  498.            
  499.             mySnake = new SNAKE.Snake({playingBoard:me,startRow:2,startCol:2});
  500.             myFood = new SNAKE.Food({playingBoard: me});
  501.            
  502.             elmWelcome.style.zIndex = 1000;
  503.         }
  504.         function maxBoardWidth() {
  505.             return MAX_BOARD_COLS * me.getBlockWidth();  
  506.         }
  507.         function maxBoardHeight() {
  508.             return MAX_BOARD_ROWS * me.getBlockHeight();
  509.         }
  510.        
  511.         function createWelcomeElement() {
  512.             var tmpElm = document.createElement("div");
  513.             tmpElm.id = "sbWelcome" + myId;
  514.             tmpElm.className = "snake-welcome-dialog";
  515.            
  516.             var welcomeTxt = document.createElement("div");
  517.             var fullScreenText = "";
  518.             if (config.fullScreen) {
  519.                 fullScreenText = "Press F11 to go Fullscreen ( Windows OS ). Created by ___ . Modifications by David Ambos, 2019";  
  520.             }
  521.             welcomeTxt.innerHTML = "snakeGame Mod<p></p>Start by using the <strong>arrow keys</strong> in any direction to start the game! " + fullScreenText + "<p></p>";
  522.             var welcomeStart = document.createElement("button");
  523.             welcomeStart.appendChild( document.createTextNode("Begin"));
  524.            
  525.             var loadGame = function() {
  526.                 SNAKE.removeEventListener(window, "keyup", kbShortcut, false);
  527.                 tmpElm.style.display = "none";
  528.                 me.setBoardState(1);
  529.                 me.getBoardContainer().focus();
  530.             };
  531.            
  532.             var kbShortcut = function(evt) {
  533.                 if (!evt) var evt = window.event;
  534.                 var keyNum = (evt.which) ? evt.which : evt.keyCode;
  535.                 if (keyNum === 32 || keyNum === 13) {
  536.                     loadGame();
  537.                 }
  538.             };
  539.             SNAKE.addEventListener(window, "keyup", kbShortcut, false);
  540.             SNAKE.addEventListener(welcomeStart, "click", loadGame, false);
  541.            
  542.             tmpElm.appendChild(welcomeTxt);
  543.             tmpElm.appendChild(welcomeStart);
  544.             return tmpElm;
  545.         }
  546.        
  547.         function createTryAgainElement() {
  548.             var tmpElm = document.createElement("div");
  549.             tmpElm.id = "sbTryAgain" + myId;
  550.             tmpElm.className = "snake-try-again-dialog";
  551.            
  552.             var tryAgainTxt = document.createElement("div");
  553.             tryAgainTxt.innerHTML = "snakeGame Mod<p></p>Perished :(.<p></p>";
  554.             var tryAgainStart = document.createElement("button");
  555.             tryAgainStart.appendChild( document.createTextNode("Give it Another Try?"));
  556.            
  557.             var reloadGame = function() {
  558.                 tmpElm.style.display = "none";
  559.                 me.resetBoard();
  560.                 me.setBoardState(1);
  561.                 me.getBoardContainer().focus();
  562.             };
  563.            
  564.             var kbTryAgainShortcut = function(evt) {
  565.                 if (boardState !== 0 || tmpElm.style.display !== "block") {return;}
  566.                 if (!evt) var evt = window.event;
  567.                 var keyNum = (evt.which) ? evt.which : evt.keyCode;
  568.                 if (keyNum === 32 || keyNum === 13) {
  569.                     reloadGame();
  570.                 }
  571.             };
  572.             SNAKE.addEventListener(window, "keyup", kbTryAgainShortcut, true);
  573.            
  574.             SNAKE.addEventListener(tryAgainStart, "click", reloadGame, false);
  575.             tmpElm.appendChild(tryAgainTxt);
  576.             tmpElm.appendChild(tryAgainStart);
  577.             return tmpElm;
  578.         }
  579.  
  580.         me.resetBoard = function() {
  581.             SNAKE.removeEventListener(elmContainer, "keydown", myKeyListener, false);
  582.             mySnake.reset();
  583.             elmLengthPanel.innerHTML = "Length: 1";
  584.             me.setupPlayingField();
  585.         };
  586.    
  587.         me.getBoardState = function() {
  588.             return boardState;
  589.         };
  590.  
  591.         me.setBoardState = function(state) {
  592.             boardState = state;
  593.         };
  594.         /**
  595.         * @method getGridFoodValue
  596.         * @return {Number} A number that represents food on a number representation of the playing board.
  597.         */  
  598.         me.getGridFoodValue = function() {
  599.             return GRID_FOOD_VALUE;
  600.         };
  601.         /**
  602.         * @method getPlayingFieldElement
  603.         * @return {DOM Element} The div representing the playing field (this is where the snake can move).
  604.         */
  605.         me.getPlayingFieldElement = function() {
  606.             return elmPlayingField;
  607.         };
  608.         me.setBoardContainer = function(myContainer) {
  609.             if (typeof myContainer === "string") {
  610.                 myContainer = document.getElementById(myContainer);  
  611.             }
  612.             if (myContainer === elmContainer) {return;}
  613.             elmContainer = myContainer;
  614.             elmPlayingField = null;
  615.            
  616.             me.setupPlayingField();
  617.         };
  618.    
  619.         me.getBoardContainer = function() {
  620.             return elmContainer;
  621.         };
  622.  
  623.         me.getBlockWidth = function() {
  624.             return blockWidth;  
  625.         };
  626.  
  627.         me.getBlockHeight = function() {
  628.             return blockHeight;  
  629.         };
  630.  
  631.         me.setupPlayingField = function () {
  632.            
  633.             if (!elmPlayingField) {createBoardElements();} // create playing field
  634.            
  635.             // calculate width of our game container
  636.             var cWidth, cHeight;
  637.             if (config.fullScreen === true) {
  638.                 cTop = 0;
  639.                 cLeft = 0;
  640.                 cWidth = getClientWidth()-5;
  641.                 cHeight = getClientHeight()-5;
  642.                 document.body.style.backgroundColor = "#FC5454";
  643.             } else {
  644.                 cTop = config.top;
  645.                 cLeft = config.left;
  646.                 cWidth = config.width;
  647.                 cHeight = config.height;
  648.             }
  649.            
  650.             // define the dimensions of the board and playing field
  651.             var wEdgeSpace = me.getBlockWidth()*2 + (cWidth % me.getBlockWidth());
  652.             var fWidth = Math.min(maxBoardWidth()-wEdgeSpace,cWidth-wEdgeSpace);
  653.             var hEdgeSpace = me.getBlockHeight()*3 + (cHeight % me.getBlockHeight());
  654.             var fHeight = Math.min(maxBoardHeight()-hEdgeSpace,cHeight-hEdgeSpace);
  655.            
  656.             elmContainer.style.left = cLeft + "px";
  657.             elmContainer.style.top = cTop + "px";
  658.             elmContainer.style.width = cWidth + "px";
  659.             elmContainer.style.height = cHeight + "px";
  660.             elmPlayingField.style.left = me.getBlockWidth() + "px";
  661.             elmPlayingField.style.top  = me.getBlockHeight() + "px";
  662.             elmPlayingField.style.width = fWidth + "px";
  663.             elmPlayingField.style.height = fHeight + "px";
  664.             var bottomPanelHeight = hEdgeSpace - me.getBlockHeight();
  665.             var pLabelTop = me.getBlockHeight() + fHeight + Math.round((bottomPanelHeight - 30)/2) + "px";
  666.            
  667.             elmAboutPanel.style.top = pLabelTop;
  668.             elmAboutPanel.style.width = "450px";
  669.             elmAboutPanel.style.left = Math.round(cWidth/2) - Math.round(450/2) + "px";
  670.            
  671.             elmLengthPanel.style.top = pLabelTop;
  672.             elmLengthPanel.style.left = cWidth - 120 + "px";
  673.            
  674.             // if width is too narrow, hide the about panel
  675.             if (cWidth < 700) {
  676.                 elmAboutPanel.style.display = "none";
  677.             } else {
  678.                 elmAboutPanel.style.display = "block";
  679.             }
  680.            
  681.             me.grid = [];
  682.             var numBoardCols = fWidth / me.getBlockWidth() + 2;
  683.             var numBoardRows = fHeight / me.getBlockHeight() + 2;
  684.            
  685.             for (var row = 0; row < numBoardRows; row++) {
  686.                 me.grid[row] = [];
  687.                 for (var col = 0; col < numBoardCols; col++) {
  688.                     if (col === 0 || row === 0 || col === (numBoardCols-1) || row === (numBoardRows-1)) {
  689.                         me.grid[row][col] = 1; // an edge
  690.                     } else {
  691.                         me.grid[row][col] = 0; // empty space
  692.                     }
  693.                 }
  694.             }
  695.            
  696.             myFood.randomlyPlaceFood();
  697.            
  698.          
  699.             myKeyListener = function(evt) {
  700.                 if (!evt) var evt = window.event;
  701.                 var keyNum = (evt.which) ? evt.which : evt.keyCode;
  702.  
  703.                 if (me.getBoardState() === 1) {
  704.                     if ( !(keyNum >= 37 && keyNum <= 40) ) {return;} // if not an arrow key, leave
  705.          
  706.                     SNAKE.removeEventListener(elmContainer, "keydown", myKeyListener, false);
  707.                    
  708.                     myKeyListener = function(evt) {
  709.                         if (!evt) var evt = window.event;
  710.                         var keyNum = (evt.which) ? evt.which : evt.keyCode;
  711.                        
  712.                         mySnake.handleArrowKeys(keyNum);
  713.                        
  714.                         evt.cancelBubble = true;
  715.                         if (evt.stopPropagation) {evt.stopPropagation();}
  716.                         if (evt.preventDefault) {evt.preventDefault();}
  717.                         return false;
  718.                     };
  719.                     SNAKE.addEventListener( elmContainer, "keydown", myKeyListener, false);
  720.                    
  721.                     mySnake.rebirth();
  722.                     mySnake.handleArrowKeys(keyNum);
  723.                     me.setBoardState(2); // start the game!
  724.                     mySnake.go();
  725.                 }
  726.                
  727.                 evt.cancelBubble = true;
  728.                 if (evt.stopPropagation) {evt.stopPropagation();}
  729.                 if (evt.preventDefault) {evt.preventDefault();}
  730.                 return false;
  731.             };
  732.            
  733.             SNAKE.addEventListener( elmContainer, "keydown", myKeyListener, false);
  734.         };
  735.  
  736.         me.foodEaten = function() {
  737.             elmLengthPanel.innerHTML = "Length: " + mySnake.snakeLength;
  738.             myFood.randomlyPlaceFood();
  739.         };
  740.        
  741.         me.handleDeath = function() {
  742.             var index = Math.max(getNextHighestZIndex( mySnake.snakeBody), getNextHighestZIndex( {tmp:{elm:myFood.getFoodElement()}} ));
  743.             elmContainer.removeChild(elmTryAgain);
  744.             elmContainer.appendChild(elmTryAgain);
  745.             elmTryAgain.style.zIndex = index;
  746.             elmTryAgain.style.display = "block";
  747.             me.setBoardState(0);
  748.         };
  749.        
  750.         config.fullScreen = (typeof config.fullScreen === "undefined") ? false : config.fullScreen;        
  751.         config.top = (typeof config.top === "undefined") ? 0 : config.top;
  752.         config.left = (typeof config.left === "undefined") ? 0 : config.left;
  753.         config.width = (typeof config.width === "undefined") ? 400 : config.width;        
  754.         config.height = (typeof config.height === "undefined") ? 400 : config.height;
  755.        
  756.         if (config.fullScreen) {
  757.             SNAKE.addEventListener(window,"resize", function() {
  758.                 me.setupPlayingField();
  759.             }, false);
  760.         }
  761.        
  762.         me.setBoardState(0);
  763.        
  764.         if (config.boardContainer) {
  765.             me.setBoardContainer(config.boardContainer);
  766.         }
  767.        
  768.     };
  769. })();
  770.  
  771. -- snake.css --
  772.  
  773.  
  774. body {
  775.     margin:0px;
  776.     padding:0px;
  777. }
  778.  
  779. #game-area {
  780.     margin:0px;
  781.     padding:0px;
  782. }
  783.  
  784. #game-area:focus { outline: none; }
  785.  
  786. a.snake-link, a.snake-link:link, a.snake-link:visited {
  787.   color: #FCFC54;
  788. }
  789.  
  790. a.snake-link:hover {
  791.   color: #FfFf54;
  792. }
  793.  
  794.  
  795. .snake-panel-component {
  796.     position: absolute;
  797.     font-family: Verdana, arial, helvetica, sans-serif;
  798.     font-size: 14px;
  799.     color: #ffffff;
  800.     text-align: center;
  801.     background-color: mediumpurple;
  802.     padding: 8px;
  803.     margin: 0px;
  804. }
  805.  
  806. .snake-snakebody-block {
  807.     margin: 0px;
  808.     padding: 0px;
  809.     background-color: #FF0000;
  810.     position: absolute;
  811.     border: 0px solid #000080;
  812.     background-repeat: no-repeat;
  813. }
  814.  
  815. .snake-snakebody-alive {
  816.    background-image: url('./images/snakeblock.png');
  817. }
  818. .snake-snakebody-dead {
  819.    background-image: url('./images/deadblock.png');
  820. }
  821.  
  822. .snake-food-block {
  823.     margin: 0px;
  824.     padding: 0px;
  825.     background-color: aquamarine;
  826.     border: 0px solid black;
  827.     position: absolute;
  828. }
  829.  
  830. .snake-playing-field {
  831.     margin: 0px;
  832.     padding: 0px;
  833.     position: absolute;
  834.     background-color: black;
  835.     border: 0px solid black;
  836. }
  837.  
  838. .snake-game-container {
  839.     margin: 0px;
  840.     padding: 0px;
  841.     border-width: 0px;
  842.     border-style: none;
  843.     zoom: 1;
  844.     background-color: mediumpurple;
  845.     position: relative;
  846. }
  847.            
  848. .snake-welcome-dialog {
  849.     padding: 8px;
  850.     margin: 0px;
  851.     background-color: lightcoral;
  852.     color: black;
  853.     font-family: Verdana, arial, helvetica, sans-serif;
  854.     font-size: 14px;
  855.     position: absolute;
  856.     top: 50%;
  857.     left: 50%;
  858.     width: 300px;
  859.     height: 150px;
  860.     margin-top: -100px;
  861.     margin-left: -158px;
  862.     text-align: center;
  863.     display: block;
  864. }
  865.  
  866. .snake-try-again-dialog {
  867.     padding: 8px;
  868.     margin: 0px;
  869.     background-color: lightcoral;
  870.     color: black;
  871.     font-family: Verdana, arial, helvetica, sans-serif;
  872.     font-size: 14px;
  873.     position: absolute;
  874.     top: 50%;
  875.     left: 50%;
  876.     width: 300px;
  877.     height: 100px;
  878.     margin-top: -75px;
  879.     margin-left: -158px;
  880.     text-align: center;
  881.     display: none;
  882. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top