jdb/code-katas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated snake with a level editor.

Browse Source
This commit is contained in:
Jonathan Bernard
2014-12-09 00:00:25 -06:00
parent 59981daf60
commit 379526b65d
3 changed files with 242 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
snake/snake.html
View File

@ -2,36 +2,72 @@
<html>
<head>
<script src="snake.js" type="application/javascript"></script>
<style type="text/css">
canvas { border: solid thin gray; }
section {
display: inline-block;
margin: 0.5rem;
position: relative; }
label {
display: inline-block;
width: 12rem; }
input[type=button] {
position: absolute;
right: 0; }
#editorControls { display: none; }
</style>
</head>
<body>
<h1>Snake</h1>
<label>Rows</label>
<input id=rows type=text placeholder="Rows" value=20>
<label>Columns</label>
<input id=cols type=text placeholder="Columns" value=20>
<label>Speed (higher = faster)</label>
<input id=fps type=text placeholder="Speed (higher = faster)" value=10>
<input id=reset type=button value="Apply">
<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=600 height=600></canvas>
<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({ canvas: canvas,
keyContext: window,
rows: parseInt(document.getElementById("rows").value),
Snake.initialize({ rows: parseInt(document.getElementById("rows").value),
cols: parseInt(document.getElementById("cols").value),
fps: parseInt(document.getElementById("fps").value)});
resetButton.onclick = function() {
Snake.initialize({ canvas: canvas,
keyContext: window,
rows: parseInt(document.getElementById("rows").value),
cols: parseInt(document.getElementById("cols").value),
fps: parseInt(document.getElementById("fps").value)}); };
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>