API tools faq
paste
Advertisement
ambosdavid

snakeGame Mod ( All 3 files ) - LARGE

ambosdavid
Mar 26th, 2019
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.48 KB | None | 0 0
raw download clone embed print report
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!