diff --git a/.gitignore b/.gitignore index f78ec928..439a6b86 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .parcel-cache +dist +node_modules \ No newline at end of file diff --git a/src/css/cotton-candy-snake.css b/src/css/cotton-candy-snake.css new file mode 100644 index 00000000..4510df9a --- /dev/null +++ b/src/css/cotton-candy-snake.css @@ -0,0 +1,159 @@ +/* +JavaScript Snake +By Patrick Gillespie +http://patorjk.com/games/snake +*/ +body { + margin: 0px; + padding: 0px; + background-color: rgb(156, 192, 212); +} + +.snake-toolbar { + background-color: rgb(167, 237, 255); + border-radius: 10px; +} + +#game-area { + margin: 10px; + padding: 0px; + background-color: rgb(255, 197, 197); +} + +#mode-wrapper { + color: #ff9c9c; + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; +} + +#game-area:focus { + outline: none; +} + +a.snake-link, +a.snake-link:link, +a.snake-link:visited { + color: rgb(255, 187, 187); +} + +a.snake-link:hover { + color: #94bfff; +} + +.snake-pause-screen { + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; + position: absolute; + width: 300px; + height: 80px; + text-align: center; + top: 50%; + left: 50%; + margin-top: -40px; + margin-left: -150px; + display: none; + background-color: rgb(255, 192, 192); + color: rgb(175, 219, 255); +} + +.snake-panel-component { + position: absolute; + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; + color: rgb(255, 75, 75); + text-align: center; + background-color: rgb(153, 226, 255); + padding: 8px; + margin: 0px; +} + +.snake-snakebody-block { + margin: 0px; + padding: 0px; + background-color: #ff9595; + position: absolute; + border: 0px solid #000080; + background-repeat: no-repeat; +} + +.snake-snakebody-alive { + background-image: url("src/css/images/snakeblock.png"); +} +.snake-snakebody-dead { + background-image: url("src/css/images/deadblock.png"); +} + +.snake-food-block { + margin: 0px; + padding: 0px; + background-color: rgb(108, 172, 255); + border: 0px solid #000080; + position: absolute; +} + +.snake-playing-field { + margin: 0px; + padding: 0px; + position: absolute; + background-color: rgb(207, 252, 255); + border: 0px solid #0d0d66; +} + +.snake-game-container { + margin: 0px; + padding: 0px; + border-width: 0px; + border-style: none; + zoom: 1; + background-color: #f89c9c; + position: relative; +} + +.snake-welcome-dialog { + padding: 8px; + margin: 0px; + background-color: #ffcaca; + color: #b2fff9; + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; + position: absolute; + top: 50%; + left: 50%; + width: 300px; + /*height: 150px;*/ + margin-top: -100px; + margin-left: -158px; + text-align: center; + display: block; +} + +#snake-snakehead-alive { + background-image: url("src/css/images/green-head-snakeblock.png"); + margin: 0px; + padding: 0px; + background-color: rgb(255, 215, 215); + position: absolute; + border: 0px solid #000080; + background-repeat: no-repeat; + border-radius: 4px; +} + + +.snake-try-again-dialog, +.snake-win-dialog { + padding: 8px; + margin: 0px; + background-color: #ffc1c1; + color: #acfcff; + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; + position: absolute; + top: 50%; + left: 50%; + width: 300px; + height: 100px; + margin-top: -75px; + margin-left: -158px; + text-align: center; + display: none; +} diff --git a/src/index.html b/src/index.html index 03dc6b10..52305721 100755 --- a/src/index.html +++ b/src/index.html @@ -70,6 +70,9 @@ case 8: changeTheme("css/neon-snake.css?" + Math.random()); break; + case 9: + changeTheme("css/cotton-candy-snake.css?" + Math.random()); + break; default: changeTheme("css/main-snake.css?" + Math.random()); break; @@ -103,6 +106,7 @@ +