Created
August 19, 2013 23:31
-
-
Save byronwade/6275428 to your computer and use it in GitHub Desktop.
i was wondering how i could add a scoring system to this stand-alone script for the game snake! im wanting to be able to let users input there username at the end and have a high score list set up next to the game table! how could i do this efficiently with the code i have set up here? the game is displayed here http://www.thorbis.com/snake/ can…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Lets make a simple snake game --> | |
<canvas id="canvas" width="750" height="300"></canvas> | |
<script> | |
$(document).ready(function(){ | |
//Canvas stuff | |
var canvas = $("#canvas")[0]; | |
var ctx = canvas.getContext("2d"); | |
var w = $("#canvas").width(); | |
var h = $("#canvas").height(); | |
//Lets save the cell width in a variable for easy control | |
var cw = 10; | |
var d; | |
var food; | |
var score; | |
//Lets create the snake now | |
var snake_array; //an array of cells to make up the snake | |
function init() | |
{ | |
d = "right"; //default direction | |
create_snake(); | |
create_food(); //Now we can see the food particle | |
//finally lets display the score | |
score = 0; | |
//Lets move the snake now using a timer which will trigger the paint function | |
//every 60ms | |
if(typeof game_loop != "undefined") clearInterval(game_loop); | |
game_loop = setInterval(paint, 60); | |
} | |
init(); | |
function create_snake() | |
{ | |
var length = 5; //Length of the snake | |
snake_array = []; //Empty array to start with | |
for(var i = length-1; i>=0; i--) | |
{ | |
//This will create a horizontal snake starting from the top left | |
snake_array.push({x: i, y:0}); | |
} | |
} | |
//Lets create the food now | |
function create_food() | |
{ | |
food = { | |
x: Math.round(Math.random()*(w-cw)/cw), | |
y: Math.round(Math.random()*(h-cw)/cw), | |
}; | |
//This will create a cell with x/y between 0-44 | |
//Because there are 45(450/10) positions accross the rows and columns | |
} | |
//Lets paint the snake now | |
function paint() | |
{ | |
//To avoid the snake trail we need to paint the BG on every frame | |
//Lets paint the canvas now | |
ctx.fillStyle = "white"; | |
ctx.fillRect(0, 0, w, h); | |
ctx.strokeStyle = "black"; | |
ctx.strokeRect(0, 0, w, h); | |
//The movement code for the snake to come here. | |
//The logic is simple | |
//Pop out the tail cell and place it infront of the head cell | |
var nx = snake_array[0].x; | |
var ny = snake_array[0].y; | |
//These were the position of the head cell. | |
//We will increment it to get the new head position | |
//Lets add proper direction based movement now | |
if(d == "right") nx++; | |
else if(d == "left") nx--; | |
else if(d == "up") ny--; | |
else if(d == "down") ny++; | |
//Lets add the game over clauses now | |
//This will restart the game if the snake hits the wall | |
//Lets add the code for body collision | |
//Now if the head of the snake bumps into its body, the game will restart | |
if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array)) | |
{ | |
//restart game | |
init(); | |
//Lets organize the code a bit now. | |
return; | |
} | |
//Lets write the code to make the snake eat the food | |
//The logic is simple | |
//If the new head position matches with that of the food, | |
//Create a new head instead of moving the tail | |
if(nx == food.x && ny == food.y) | |
{ | |
var tail = {x: nx, y: ny}; | |
score++; | |
//Create new food | |
create_food(); | |
} | |
else | |
{ | |
var tail = snake_array.pop(); //pops out the last cell | |
tail.x = nx; tail.y = ny; | |
} | |
//The snake can now eat the food. | |
snake_array.unshift(tail); //puts back the tail as the first cell | |
for(var i = 0; i < snake_array.length; i++) | |
{ | |
var c = snake_array[i]; | |
//Lets paint 10px wide cells | |
paint_cell(c.x, c.y); | |
} | |
//Lets paint the food | |
paint_cell(food.x, food.y); | |
//Lets paint the score | |
var score_text = "Score: " + score; | |
ctx.fillText(score_text, 5, h-5); | |
} | |
//Lets first create a generic function to paint cells | |
function paint_cell(x, y) | |
{ | |
ctx.fillStyle = "blue"; | |
ctx.fillRect(x*cw, y*cw, cw, cw); | |
ctx.strokeStyle = "white"; | |
ctx.strokeRect(x*cw, y*cw, cw, cw); | |
} | |
function check_collision(x, y, array) | |
{ | |
//This function will check if the provided x/y coordinates exist | |
//in an array of cells or not | |
for(var i = 0; i < array.length; i++) | |
{ | |
if(array[i].x == x && array[i].y == y) | |
return true; | |
} | |
return false; | |
} | |
//Lets add the keyboard controls now | |
$(document).keydown(function(e){ | |
var key = e.which; | |
//We will add another clause to prevent reverse gear | |
if(key == "37" && d != "right") d = "left"; | |
else if(key == "38" && d != "down") d = "up"; | |
else if(key == "39" && d != "left") d = "right"; | |
else if(key == "40" && d != "up") d = "down"; | |
//The snake is now keyboard controllable | |
}) | |
}) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment