Snake bug fixes, stil WIP. Moved page logic into a separate JS file.
This commit is contained in:
Joanthan Bernard
parent
e247071dc4
commit
dd63438ae6
@ -7,7 +7,7 @@
|
||||
|
||||
|
||||
// Level 1: Hello Snake!
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "Hello Snake!", "rows":10, "cols":10,
|
||||
"easy": { "fps": 2, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps": 4, "targetScore": 7, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -26,7 +26,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 2: Room to Grow
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "Room to Grow", "rows":16, "cols":16,
|
||||
"easy": { "fps":3, "targetScore": 7, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 7, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -51,7 +51,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 3: North and South
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "North and South", "rows":15, "cols":15,
|
||||
"easy": { "fps":3, "targetScore": 6, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 6, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -75,7 +75,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 4: Four Small Rooms
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "Four Small Rooms","rows":15,"cols":15,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -99,7 +99,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 5: Polka Dots
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "Polka Dots" ,"rows":15,"cols":15,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -123,7 +123,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 6: Toaster Face
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "Toaster Face","rows":15,"cols":15,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -147,7 +147,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 7: Wierd Walls
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "Wierd Walls","rows":15,"cols":15,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -171,7 +171,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 8: Feast and Famine
|
||||
small.push({
|
||||
small.levels.push({
|
||||
"name": "Feast and Famine","rows":15,"cols":15,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -195,7 +195,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 1: Maze 1
|
||||
mazes.push({
|
||||
mazes.levels.push({
|
||||
"name": "Maze 1","rows":15,"cols":15,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -219,7 +219,7 @@
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
// Level 2: Spiral
|
||||
mazes.push({
|
||||
mazes.levels.push({
|
||||
"name": "Spiral","rows":15,"cols":15,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -244,7 +244,7 @@
|
||||
|
||||
|
||||
// Level 3: Maze 2
|
||||
mazes.push({
|
||||
mazes.levels.push({
|
||||
"name": "Maze 2","rows":17,"cols":17,
|
||||
"easy": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
"medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
|
||||
@ -267,8 +267,7 @@
|
||||
1,0,1,1,1,1,0,0,0,0,1,1,1,1,1,0,1,
|
||||
1,0,1,0,0,0,1,1,1,1,0,0,0,1,0,0,1,
|
||||
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,1,
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}
|
||||
]);
|
||||
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
|
||||
|
||||
window.SnakeLevels = {
|
||||
"Small Rooms": small,
|
||||
|
||||
47
snake/snake-page.js
Normal file
47
snake/snake-page.js
Normal file
@ -0,0 +1,47 @@
|
||||
var $canvas = $("#snakeCanvas");
|
||||
var canvasEl = $canvas[0];
|
||||
var $scoreValue = $("#score span.value");
|
||||
var $levelSelectSection = $("#levelSelect");
|
||||
|
||||
canvasEl.width = canvasEl.clientWidth;
|
||||
canvasEl.height = canvasEl.clientHeight;
|
||||
|
||||
var initializePage = function() {
|
||||
|
||||
// Load the snake levels onto the page UI.
|
||||
_.each(SnakeLevels, function(levelSet, setName) {
|
||||
var newHtml = "<h5>" + setName + "</h5>" +
|
||||
"<ol levelSet='" + setName + "'>";
|
||||
|
||||
_.each(levelSet, function(levelData, levelIdx) {
|
||||
newHtml += "<li levelNum='" + levelIdx + "'>" +
|
||||
levelData.name + "</li>"; });
|
||||
|
||||
newHtml += "</ol>"; });
|
||||
};
|
||||
|
||||
var loadLevel = function(ev) { }
|
||||
|
||||
var nextLevel = function() { };
|
||||
|
||||
var updateScore = function(ev) {
|
||||
var curScore = parseInt(scoreValue.textContent);
|
||||
curScore += ev.detail.bodyLength;
|
||||
curScore.textContent = curScore;
|
||||
|
||||
if (evDetail.score == Snake.currentLevel.targetScore)
|
||||
nextLevel(); };
|
||||
|
||||
$canvas.on('score', updateScore);
|
||||
|
||||
|
||||
// Add listeners for each of the level list items.
|
||||
var levelLis = document.querySelectorAll("#levelSelect li");
|
||||
for (var i = 0; i < levelLis.length; ++i) {
|
||||
levelLis[i].addEventListener("click", loadLevel); }
|
||||
|
||||
loadLevel({target: document.querySelector("#levelSelect li.selected")});
|
||||
|
||||
|
||||
window.onload = initializePage;
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
<meta charset=utf-8>
|
||||
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P|PT+Mono' rel='stylesheet' type='text/css'>
|
||||
<link href="snake.css" type="text/css" rel="stylesheet">
|
||||
<script src="snake.js" type="application/javascript"></script>
|
||||
<script src="snake-levels.js" type="application/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
|
||||
@ -23,21 +21,6 @@
|
||||
|
||||
--><section id=levelSelect>
|
||||
<h4>Level Select</h4>
|
||||
<h5>Beginner</h5>
|
||||
<ol>
|
||||
<li levelNum=0 class=selected>Hello Snake!</li>
|
||||
<li levelNum=1>Room to Grow</li>
|
||||
<li levelNum=2>North and South</li>
|
||||
<li levelNum=3>4 Small Rooms</li>
|
||||
<li levelNum=4>Polka Dots</li>
|
||||
<li levelNum=5>Toaster Face</li>
|
||||
<li levelNum=6>Wierd Walls</li>
|
||||
<li levelNum=7>Maze 1</li>
|
||||
<li levelNum=8>Spiral</li>
|
||||
<li levelNum=9>Feast and Famine</li>
|
||||
<li levelNum=10>Maze 2</li>
|
||||
</ol>
|
||||
<h5>Classic Nibbles</h5>
|
||||
</section><!--
|
||||
|
||||
--><section id=gameContainer>
|
||||
@ -91,40 +74,11 @@
|
||||
<span class=ultralarge-only>ultralarge</span>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
var canvas = document.getElementById("snakeCanvas");
|
||||
var scoreValue = document.querySelector("#score span.value");
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
<script src="../resources/js/jquery-2.1.1.min.js" type="application/javascript"></script>
|
||||
<script src="../resources/js/underscore-1.7.0.min.js" type="application/javascript"></script>
|
||||
<script src="snake.js" type="application/javascript"></script>
|
||||
<script src="snake-levels.js" type="application/javascript"></script>
|
||||
<script src="snake-page.js" type="application/javascript"></script>
|
||||
|
||||
var loadLevel = function(ev) {
|
||||
var levelEl = ev.target;
|
||||
document.querySelector("#levelSelect li.selected").className = "";
|
||||
levelEl.className = "selected";
|
||||
var levelNum = parseInt(levelEl.getAttribute("levelNum"));
|
||||
Snake.initialize(levelData[levelNum]); };
|
||||
|
||||
var nextLevel = function() {
|
||||
|
||||
};
|
||||
|
||||
var updateScore = function(ev) {
|
||||
var curScore = parseInt(scoreValue.textContent);
|
||||
curScore += ev.detail.bodyLength;
|
||||
curScore.textContent = curScore;
|
||||
|
||||
if (evDetail.score == Snake.currentLevel.targetScore)
|
||||
nextLevel(); };
|
||||
|
||||
canvas.addEventListener('score', updateScore);
|
||||
|
||||
|
||||
// Add listeners for each of the level list items.
|
||||
var levelLis = document.querySelectorAll("#levelSelect li");
|
||||
for (var i = 0; i < levelLis.length; ++i) {
|
||||
levelLis[i].addEventListener("click", loadLevel); }
|
||||
|
||||
loadLevel({target: document.querySelector("#levelSelect li.selected")});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -119,8 +119,7 @@
|
||||
g.fillStyle = "black";
|
||||
g.fillText("Press Space to begin.", 50, Math.floor(canvas.height/2), canvas.width - 100);
|
||||
|
||||
skipTicks = Math.ceil(1000 / fps);
|
||||
else skipTicks = 150; }
|
||||
skipTicks = Math.ceil(1000 / fps); }
|
||||
|
||||
// They want the editor
|
||||
else {
|
||||
@ -362,7 +361,7 @@
|
||||
growthFactor: startGrowthFactor,
|
||||
growthFactorIncrease: startGFIncrease,
|
||||
targetScore: targetScore,
|
||||
fps: fps)}); }
|
||||
fps: fps}); }
|
||||
|
||||
// Load the editor data as a JSON string from the textarea.
|
||||
function loadEditorLevelData() { }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user