133 lines
3.2 KiB
PHP
133 lines
3.2 KiB
PHP
<style>
|
|
/*
|
|
JavaScript Snake
|
|
By Patrick Gillespie
|
|
http://patorjk.com/games/snake
|
|
*/
|
|
|
|
#game-area {
|
|
margin: 10px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#mode-wrapper {
|
|
color: #ffffff;
|
|
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: var(--accent1);
|
|
}
|
|
a.snake-link:hover {
|
|
color: #FfFf54;
|
|
}
|
|
.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: black;
|
|
color: white;
|
|
}
|
|
.snake-panel-component {
|
|
position: absolute;
|
|
font-family: Verdana, arial, helvetica, sans-serif;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
padding: 8px;
|
|
margin: 0px;
|
|
}
|
|
.snake-snakebody-block {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background-color: var(--accent1);
|
|
position: absolute;
|
|
border: 0px solid #000080;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.snake-snakebody-alive {
|
|
background-color: var(--accent1);
|
|
}
|
|
.snake-snakebody-dead {
|
|
background-color: var(--accent2);
|
|
}
|
|
.snake-food-block {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background-color: var(--accent2);
|
|
border: 0px solid #000080;
|
|
position: absolute;
|
|
}
|
|
.snake-playing-field {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
position: absolute;
|
|
background-color: var(--secondary-background);
|
|
border: 0px solid var(--secondary-background);
|
|
}
|
|
.snake-game-container {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border-width: 0px;
|
|
border-style: none;
|
|
zoom: 1;
|
|
position: relative;
|
|
}
|
|
.snake-welcome-dialog {
|
|
padding: 8px;
|
|
margin: 0px;
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
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-try-again-dialog, .snake-win-dialog {
|
|
padding: 8px;
|
|
margin: 0px;
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
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;
|
|
}
|
|
</style>
|
|
|
|
<div id="game-area" tabindex="0" ></div>
|
|
|
|
|
|
<script>
|
|
var mySnakeBoard = new SNAKE.Board({
|
|
boardContainer: "game-area",
|
|
fullScreen: false,
|
|
premoveOnPause: false
|
|
});
|
|
</script>
|