react-simple-snake
Version:
A simple snake game created with the React JavaScript library
1 lines • 12.8 kB
JavaScript
module.exports=(()=>{"use strict";var t={275:(t,e,o)=>{o.r(e),o.d(e,{default:()=>m});const n=require("react");var a=o.n(n),i=o(379),r=o.n(i),s=o(223);r()(s.Z,{insert:"head",singleton:!1}),s.Z.locals;const h=function(t){return a().createElement("div",{id:"GameBoard",style:{width:t.width,height:t.height,borderWidth:t.width/50}},a().createElement("div",{id:"GameOver",style:{fontSize:t.width/15}},a().createElement("div",{id:"GameOverText"},"GAME OVER"),a().createElement("div",null,"Your score: ",t.score),a().createElement("div",null,t.newHighScore?"New local ":"Local ","high score:"," ",t.highScore),a().createElement("div",{id:"PressSpaceText"},"Press Space to restart")))};function c(t){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function l(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function u(t,e){return(u=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function d(t,e){return!e||"object"!==c(e)&&"function"!=typeof e?p(t):e}function p(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function f(t){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}const m=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)}(s,t);var e,o,n,i,r=(n=s,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}(),function(){var t,e=f(n);if(i){var o=f(this).constructor;t=Reflect.construct(e,arguments,o)}else t=e.apply(this,arguments);return d(this,t)});function s(t){var e;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,s),(e=r.call(this,t)).handleKeyDown=e.handleKeyDown.bind(p(e)),e.state={width:0,height:0,blockWidth:0,blockHeight:0,gameLoopTimeout:50,timeoutId:0,startSnakeSize:0,snake:[],apple:{},direction:"right",directionChanged:!1,isGameOver:!1,snakeColor:e.props.snakeColor||e.getRandomColor(),appleColor:e.props.appleColor||e.getRandomColor(),score:0,highScore:Number(localStorage.getItem("snakeHighScore"))||0,newHighScore:!1},e}return e=s,(o=[{key:"componentDidMount",value:function(){this.initGame(),window.addEventListener("keydown",this.handleKeyDown),this.gameLoop()}},{key:"initGame",value:function(){var t=this.props.percentageWidth||40,e=document.getElementById("GameBoard").parentElement.offsetWidth*(t/100);(e-=e%30)<30&&(e=30);var o=e/3*2,n=e/30,a=o/20,i=this.props.startSnakeSize||6,r=[],s=e/2,h=o/2,c={Xpos:e/2,Ypos:o/2};r.push(c);for(var l=1;l<i;l++){var u={Xpos:s-=n,Ypos:h};r.push(u)}for(var d=Math.floor(Math.random()*((e-n)/n+1))*n,p=Math.floor(Math.random()*((o-a)/a+1))*a;p===r[0].Ypos;)p=Math.floor(Math.random()*((o-a)/a+1))*a;this.setState({width:e,height:o,blockWidth:n,blockHeight:a,startSnakeSize:i,snake:r,apple:{Xpos:d,Ypos:p}})}},{key:"gameLoop",value:function(){var t=this,e=setTimeout((function(){t.state.isGameOver||(t.moveSnake(),t.tryToEatSnake(),t.tryToEatApple(),t.setState({directionChanged:!1})),t.gameLoop()}),this.state.gameLoopTimeout);this.setState({timeoutId:e})}},{key:"componentWillUnmount",value:function(){clearTimeout(this.state.timeoutId),window.removeEventListener("keydown",this.handleKeyDown)}},{key:"resetGame",value:function(){var t=this.state.width,e=this.state.height,o=this.state.blockWidth,n=this.state.blockHeight,a=this.state.apple,i=[],r=t/2,s=e/2,h={Xpos:t/2,Ypos:e/2};i.push(h);for(var c=1;c<this.state.startSnakeSize;c++){var l={Xpos:r-=o,Ypos:s};i.push(l)}for(a.Xpos=Math.floor(Math.random()*((t-o)/o+1))*o,a.Ypos=Math.floor(Math.random()*((e-n)/n+1))*n;this.isAppleOnSnake(a.Xpos,a.Ypos);)a.Xpos=Math.floor(Math.random()*((t-o)/o+1))*o,a.Ypos=Math.floor(Math.random()*((e-n)/n+1))*n;this.setState({snake:i,apple:a,direction:"right",directionChanged:!1,isGameOver:!1,gameLoopTimeout:50,snakeColor:this.getRandomColor(),appleColor:this.getRandomColor(),score:0,newHighScore:!1})}},{key:"getRandomColor",value:function(){for(var t="#",e=0;e<6;e++)t+="0123456789ABCDEF"[Math.floor(16*Math.random())];return t}},{key:"moveSnake",value:function(){var t=this.state.snake,e=this.state.snake[0].Xpos,o=this.state.snake[0].Ypos,n=e,a=o;this.moveHead();for(var i=1;i<t.length;i++)n=t[i].Xpos,a=t[i].Ypos,t[i].Xpos=e,t[i].Ypos=o,e=n,o=a;this.setState({snake:t})}},{key:"tryToEatApple",value:function(){var t=this.state.snake,e=this.state.apple;if(t[0].Xpos===e.Xpos&&t[0].Ypos===e.Ypos){var o=this.state.width,n=this.state.height,a=this.state.blockWidth,i=this.state.blockHeight,r={Xpos:e.Xpos,Ypos:e.Ypos},s=this.state.highScore,h=this.state.newHighScore,c=this.state.gameLoopTimeout;for(t.push(r),e.Xpos=Math.floor(Math.random()*((o-a)/a+1))*a,e.Ypos=Math.floor(Math.random()*((n-i)/i+1))*i;this.isAppleOnSnake(e.Xpos,e.Ypos);)e.Xpos=Math.floor(Math.random()*((o-a)/a+1))*a,e.Ypos=Math.floor(Math.random()*((n-i)/i+1))*i;this.state.score===s&&(s++,localStorage.setItem("snakeHighScore",s),h=!0),c>25&&(c-=.5),this.setState({snake:t,apple:e,score:this.state.score+1,highScore:s,newHighScore:h,gameLoopTimeout:c})}}},{key:"tryToEatSnake",value:function(){for(var t=this.state.snake,e=1;e<t.length;e++)t[0].Xpos===t[e].Xpos&&t[0].Ypos===t[e].Ypos&&this.setState({isGameOver:!0})}},{key:"isAppleOnSnake",value:function(t,e){for(var o=this.state.snake,n=0;n<o.length;n++)if(t===o[n].Xpos&&e===o[n].Ypos)return!0;return!1}},{key:"moveHead",value:function(){switch(this.state.direction){case"left":this.moveHeadLeft();break;case"up":this.moveHeadUp();break;case"right":this.moveHeadRight();break;default:this.moveHeadDown()}}},{key:"moveHeadLeft",value:function(){var t=this.state.width,e=this.state.blockWidth,o=this.state.snake;o[0].Xpos=o[0].Xpos<=0?t-e:o[0].Xpos-e,this.setState({snake:o})}},{key:"moveHeadUp",value:function(){var t=this.state.height,e=this.state.blockHeight,o=this.state.snake;o[0].Ypos=o[0].Ypos<=0?t-e:o[0].Ypos-e,this.setState({snake:o})}},{key:"moveHeadRight",value:function(){var t=this.state.width,e=this.state.blockWidth,o=this.state.snake;o[0].Xpos=o[0].Xpos>=t-e?0:o[0].Xpos+e,this.setState({snake:o})}},{key:"moveHeadDown",value:function(){var t=this.state.height,e=this.state.blockHeight,o=this.state.snake;o[0].Ypos=o[0].Ypos>=t-e?0:o[0].Ypos+e,this.setState({snake:o})}},{key:"handleKeyDown",value:function(t){if(this.state.isGameOver&&32===t.keyCode)this.resetGame();else if(!this.state.directionChanged){switch(t.keyCode){case 37:case 65:this.goLeft();break;case 38:case 87:this.goUp();break;case 39:case 68:this.goRight();break;case 40:case 83:this.goDown()}this.setState({directionChanged:!0})}}},{key:"goLeft",value:function(){var t="right"===this.state.direction?"right":"left";this.setState({direction:t})}},{key:"goUp",value:function(){var t="down"===this.state.direction?"down":"up";this.setState({direction:t})}},{key:"goRight",value:function(){var t="left"===this.state.direction?"left":"right";this.setState({direction:t})}},{key:"goDown",value:function(){var t="up"===this.state.direction?"up":"down";this.setState({direction:t})}},{key:"render",value:function(){var t=this;return this.state.isGameOver?a().createElement(h,{width:this.state.width,height:this.state.height,highScore:this.state.highScore,newHighScore:this.state.newHighScore,score:this.state.score}):a().createElement("div",{id:"GameBoard",style:{width:this.state.width,height:this.state.height,borderWidth:this.state.width/50}},this.state.snake.map((function(e,o){return a().createElement("div",{key:o,className:"Block",style:{width:t.state.blockWidth,height:t.state.blockHeight,left:e.Xpos,top:e.Ypos,background:t.state.snakeColor}})})),a().createElement("div",{className:"Block",style:{width:this.state.blockWidth,height:this.state.blockHeight,left:this.state.apple.Xpos,top:this.state.apple.Ypos,background:this.state.appleColor}}),a().createElement("div",{id:"Score",style:{fontSize:this.state.width/20}},"HIGH-SCORE: ",this.state.highScore," SCORE:"," ",this.state.score))}}])&&l(e.prototype,o),s}(a().Component)},223:(t,e,o)=>{o.d(e,{Z:()=>i});var n=o(645),a=o.n(n)()((function(t){return t[1]}));a.push([t.id,"#GameBoard {\n\tposition: relative;\n\tmargin: auto;\n\tborder-style: solid;\n}\n\n#GameBoard .Block {\n\tposition: absolute;\n}\n\n#GameBoard #GameOver {\n\ttext-align: center;\n\theight: 100%;\n\tflex-direction: column;\n\tdisplay: flex;\n\tjustify-content: space-around;\n}\n\n#GameBoard #Score {\n\tposition: relative;\n\ttop: 105%;\n\ttext-align: center;\n\tfont-weight: bold;\n}\n\n#GameBoard #GameOverText {\n\tcolor: #ca0000;\n\tfont-weight: bold;\n\ttext-decoration-line: underline;\n}\n\n#GameBoard #PressSpaceText {\n\tcolor: #2e7ecb;\n\tfont-weight: bold;\n}\n\n",""]);const i=a},645:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var o=t(e);return e[2]?"@media ".concat(e[2]," {").concat(o,"}"):o})).join("")},e.i=function(t,o,n){"string"==typeof t&&(t=[[null,t,""]]);var a={};if(n)for(var i=0;i<this.length;i++){var r=this[i][0];null!=r&&(a[r]=!0)}for(var s=0;s<t.length;s++){var h=[].concat(t[s]);n&&a[h[0]]||(o&&(h[2]?h[2]="".concat(o," and ").concat(h[2]):h[2]=o),e.push(h))}},e}},379:(t,e,o)=>{var n,a=function(){var t={};return function(e){if(void 0===t[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(t){o=null}t[e]=o}return t[e]}}(),i=[];function r(t){for(var e=-1,o=0;o<i.length;o++)if(i[o].identifier===t){e=o;break}return e}function s(t,e){for(var o={},n=[],a=0;a<t.length;a++){var s=t[a],h=e.base?s[0]+e.base:s[0],c=o[h]||0,l="".concat(h," ").concat(c);o[h]=c+1;var u=r(l),d={css:s[1],media:s[2],sourceMap:s[3]};-1!==u?(i[u].references++,i[u].updater(d)):i.push({identifier:l,updater:m(d,e),references:1}),n.push(l)}return n}function h(t){var e=document.createElement("style"),n=t.attributes||{};if(void 0===n.nonce){var i=o.nc;i&&(n.nonce=i)}if(Object.keys(n).forEach((function(t){e.setAttribute(t,n[t])})),"function"==typeof t.insert)t.insert(e);else{var r=a(t.insert||"head");if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(e)}return e}var c,l=(c=[],function(t,e){return c[t]=e,c.filter(Boolean).join("\n")});function u(t,e,o,n){var a=o?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(t.styleSheet)t.styleSheet.cssText=l(e,a);else{var i=document.createTextNode(a),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(i,r[e]):t.appendChild(i)}}function d(t,e,o){var n=o.css,a=o.media,i=o.sourceMap;if(a?t.setAttribute("media",a):t.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var p=null,f=0;function m(t,e){var o,n,a;if(e.singleton){var i=f++;o=p||(p=h(e)),n=u.bind(null,o,i,!1),a=u.bind(null,o,i,!0)}else o=h(e),n=d.bind(null,o,e),a=function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(o)};return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else a()}}t.exports=function(t,e){(e=e||{}).singleton||"boolean"==typeof e.singleton||(e.singleton=(void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n));var o=s(t=t||[],e);return function(t){if(t=t||[],"[object Array]"===Object.prototype.toString.call(t)){for(var n=0;n<o.length;n++){var a=r(o[n]);i[a].references--}for(var h=s(t,e),c=0;c<o.length;c++){var l=r(o[c]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}o=h}}}}},e={};function o(n){if(e[n])return e[n].exports;var a=e[n]={id:n,exports:{}};return t[n](a,a.exports,o),a.exports}return o.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return o.d(e,{a:e}),e},o.d=(t,e)=>{for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o(275)})();