116 lines
4.0 KiB
HTML
116 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta name=charset value=utf-8>
|
|
<title>Snake</title>
|
|
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,900' rel='stylesheet' type='text/css'>
|
|
<script src="snake.js" type="application/javascript"></script>
|
|
<style type="text/css">
|
|
|
|
/* Pallete: http://www.colourlovers.com/palette/1832769/100_Following_Me
|
|
* A70407 - Red
|
|
* F4A612 - Orange
|
|
* FFFB51 - Soft Yellow
|
|
* 1E4119 - Green
|
|
* 0B0C38 - Blue */
|
|
* { margin: 0;
|
|
padding: 0; }
|
|
|
|
html {
|
|
background-color: white;
|
|
color: #354650;
|
|
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body {
|
|
padding: 1em;
|
|
}
|
|
|
|
header {
|
|
background-color: #1E4119;
|
|
color: #FFFB51;
|
|
padding: 0.5rem 1rem;
|
|
font-family: "Exo 2";
|
|
font-weight: 900;
|
|
|
|
position: absolute;
|
|
left: 0; right: 0; top: 0;
|
|
}
|
|
|
|
header > h1 { font-size: 300%; }
|
|
|
|
canvas { border: solid thin gray; }
|
|
|
|
section {
|
|
display: inline-block;
|
|
margin: 0.5rem;
|
|
position: relative; }
|
|
|
|
section:first-of-type { margin-top: 6rem; }
|
|
|
|
label {
|
|
display: inline-block;
|
|
width: 12rem; }
|
|
|
|
input[type=button] {
|
|
position: absolute;
|
|
right: 0; }
|
|
|
|
#editorControls { display: none; }
|
|
|
|
@media (max-width: 600px) {
|
|
header { text-align: center; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header><h1>Snake</h1></header>
|
|
<section id=controls>
|
|
<label>Rows</label>
|
|
<input id=rows type=text placeholder="Rows" value=20><br>
|
|
<label>Columns</label>
|
|
<input id=cols type=text placeholder="Columns" value=40><br>
|
|
<label>Speed (higher = faster)</label>
|
|
<input id=fps type=text placeholder="Speed (higher = faster)" value=10><br>
|
|
<input name=editor type=radio value="Game" checked>Game</input>
|
|
<input id=useEditor name=editor type=radio value="Editor">Editor</input>
|
|
<input id=reset type=button value="Apply">
|
|
</section>
|
|
<section id=gameData>
|
|
<label> Custom Level:</label><br>
|
|
<textarea class=boardData></textarea>
|
|
</section>
|
|
<section id=editorControls>
|
|
<textarea class=boardData></textarea>
|
|
<input type=button value=Reload>
|
|
</section>
|
|
<section id=help>
|
|
Arrow keys change direction.<br>
|
|
Pause key pauses the game.<br>
|
|
Enter restarts the game.<br>
|
|
</section>
|
|
|
|
<br>
|
|
<canvas id=gameCanvas width=800 height=400 tabIndex=100></canvas>
|
|
|
|
<script type="application/javascript">
|
|
var canvas = document.getElementById("gameCanvas");
|
|
var resetButton = document.getElementById("reset");
|
|
var customLevelData = document.querySelector("#gameData textarea");
|
|
|
|
Snake.initialize({ rows: parseInt(document.getElementById("rows").value),
|
|
cols: parseInt(document.getElementById("cols").value),
|
|
fps: parseInt(document.getElementById("fps").value)});
|
|
|
|
resetButton.onclick = function() {
|
|
if (customLevelData.value.trim().length > 0) {
|
|
Snake.initialize(JSON.parse(customLevelData.value)); }
|
|
else { Snake.initialize({
|
|
editor: document.getElementById("useEditor").checked,
|
|
rows: parseInt(document.getElementById("rows").value),
|
|
cols: parseInt(document.getElementById("cols").value),
|
|
fps: parseInt(document.getElementById("fps").value)}); } };
|
|
</script>
|
|
</body>
|
|
</html>
|