210 lines
5.3 KiB
JavaScript
210 lines
5.3 KiB
JavaScript
$(document).ready(function () {
|
|
|
|
var canvas = $("#myCanvas")[0];
|
|
var ctx = canvas.getContext("2d");
|
|
var w = $("#myCanvas").width();
|
|
var h = $("#myCanvas").height();
|
|
var cw = 15;
|
|
var food;
|
|
var snake;
|
|
var d = "RIGHT";
|
|
var gameloop;
|
|
|
|
function start(gameloop){
|
|
gameloop = setInterval(update, 100);
|
|
return gameloop
|
|
}
|
|
function reset() {
|
|
window.location.reload()
|
|
}
|
|
function stop(gameloop){
|
|
clearInterval(gameloop);
|
|
}
|
|
|
|
function getSessionScore(){
|
|
var sessionScore = localStorage.getItem("session_score");
|
|
return sessionScore;
|
|
}
|
|
function getCurrentScore(){
|
|
var currentScore = localStorage.getItem("current");
|
|
return currentScore;
|
|
}
|
|
function setSessionScore(score){
|
|
localStorage.setItem("session_score", score);
|
|
}
|
|
function setCurrentScore(score){
|
|
localStorage.setItem("current", score);
|
|
}
|
|
function checkScore(score){
|
|
var session = getSessionScore();
|
|
var current = getCurrentScore();
|
|
if(current === null){
|
|
setCurrentScore(score);
|
|
setSessionScore(score);
|
|
}
|
|
if (session < score){
|
|
current = 0;
|
|
setCurrentScore(score);
|
|
setSessionScore(score);
|
|
}
|
|
}
|
|
$('#popup_question').submit(function(e){
|
|
var form = $(this).serializeArray();
|
|
e.preventDefault();
|
|
form = JSON.stringify(form);
|
|
localStorage.setItem("new_question",form);
|
|
|
|
});
|
|
$('#add_question').click(function(){
|
|
var isHidden = localStorage.getItem('isHidden');
|
|
if(isHidden === null){
|
|
isHidden = 'true';
|
|
}
|
|
if(isHidden === 'true'){
|
|
$('#popup_question').fadeIn();
|
|
localStorage.setItem('isHidden', 'false');
|
|
}else if(isHidden === 'false'){
|
|
$('#popup_question').fadeOut();
|
|
localStorage.setItem('isHidden', 'true');
|
|
}
|
|
})
|
|
|
|
|
|
$('#session').text(getSessionScore())
|
|
|
|
function update() {
|
|
if (d == "RIGHT")
|
|
snake.x = snake.x + 1;
|
|
else if (d == "LEFT")
|
|
snake.x = snake.x - 1;
|
|
else if (d == "UP")
|
|
snake.y = snake.y - 1;
|
|
else if (d == "DOWN")
|
|
snake.y = snake.y + 1;
|
|
|
|
check_borders();
|
|
check_food();
|
|
blank();
|
|
paint_cell(food.x, food.y, "grey");
|
|
paint_cell(snake.x, snake.y, "green");
|
|
}
|
|
|
|
function showGameOver() {
|
|
|
|
var current = $('#current').text();
|
|
$('#final').text(current);
|
|
$('#popup').fadeIn();
|
|
$('#yes').click(function () {
|
|
if ($('#yes').is(':checked')) {
|
|
$('#correct').fadeIn('slow');
|
|
$('#session').text(getSessionScore());
|
|
$('#no').attr('disabled','disabled');
|
|
}
|
|
});
|
|
$('#no').click(function(){
|
|
if($('#no').is(':checked')){
|
|
$('#incorrect').fadeIn('slow');
|
|
$('#yes').attr('disabled','disabled');
|
|
}
|
|
})
|
|
}
|
|
|
|
function updateHighScore() {
|
|
var current = $("#current").text();
|
|
var highest = $("#highest").text();
|
|
if (parseInt(current) > parseInt(highest)) {
|
|
$('#highest').text(current)
|
|
}
|
|
|
|
}
|
|
|
|
function placeFood() {
|
|
food = {
|
|
x: Math.round(Math.random() * (w - cw) / cw),
|
|
y: Math.round(Math.random() * (h - cw) / cw)
|
|
}
|
|
}
|
|
|
|
function placeSnake() {
|
|
snake = {
|
|
x: Math.round(Math.random() * (w - cw) / cw),
|
|
y: Math.round(Math.random() * (h - cw) / cw)
|
|
}
|
|
}
|
|
|
|
function blank() {
|
|
//Paint The Canvas
|
|
ctx.fillStyle = "black";
|
|
ctx.fillRect(0, 0, w, h);
|
|
ctx.strokeStyle = "white";
|
|
ctx.strokeRect(0, 0, w, h);
|
|
|
|
}
|
|
|
|
function check_borders() {
|
|
if (snake.x < 0 || snake.x > (w - cw) / cw || snake.y < 0 || snake.y > (h - cw) / cw) {
|
|
stop(gameloop);
|
|
showGameOver();
|
|
}
|
|
}
|
|
|
|
function paint_cell(x, y, color) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(x * cw, y * cw, cw, cw);
|
|
ctx.strokeStyle = "white";
|
|
ctx.strokeRect(x * cw, y * cw, cw, cw);
|
|
}
|
|
|
|
function check_food() {
|
|
if (food.x == snake.x && food.y == snake.y) {
|
|
var current = parseInt($('#current').text());
|
|
current += 1;
|
|
$('#current').text(current);
|
|
checkScore(current);
|
|
placeFood();
|
|
}
|
|
|
|
|
|
}
|
|
|
|
gameloop = start();
|
|
|
|
placeFood();
|
|
paint_cell(food.x, food.y, "grey");
|
|
placeSnake();
|
|
paint_cell(snake.x, snake.y, "green");
|
|
|
|
//Keyboard Controller
|
|
$(document).keydown(function (e) {
|
|
//39: RIGHT
|
|
//37: LEFT
|
|
//38: UP
|
|
//40: DOWN
|
|
var key = e.which;
|
|
if (key == "37") {
|
|
snake.x -= 1;
|
|
d = "LEFT";
|
|
} else if (key == "38") {
|
|
snake.y -= 1;
|
|
d = "UP";
|
|
} else if (key == "39") {
|
|
snake.x += 1;
|
|
d = "RIGHT";
|
|
} else if (key == "40") {
|
|
snake.y += 1;
|
|
d = "DOWN";
|
|
} else if(key == "32"){
|
|
reset();
|
|
}
|
|
|
|
check_food();
|
|
blank();
|
|
color = "grey";
|
|
paint_cell(food.x, food.y);
|
|
color = "green";
|
|
paint_cell(snake.x, snake.y);
|
|
|
|
});
|
|
|
|
});
|