Last active
June 6, 2020 15:45
-
-
Save umuthopeyildirim/46e14d877090b1a050287fb05731f60a to your computer and use it in GitHub Desktop.
Snake Game in any Website
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
/* global $*/ | |
jQuery('body').append('<div id="board"></div><style>#board,body{overflow: hidden;z-index:99999999;background-color:#fff}#board{z-index:99999999;color:white; width:440px;height:440px;border:1px solid #000;}#highScore,#score,#timer{z-index:99999999;color:#fff}.apple,.snake{z-index:99999999;display:block;width:20px;height:20px;position:absolute;user-select:none}.snake{z-index:99999999;background-color:green;}#snake-head{z-index:99999999;background-color:#006400}.apple{z-index:99999999;background-color:red;}</style>'); | |
// Set window sessionStorage to keep track of high scores (lowest time) | |
sessionStorage.setItem("highScore", 0); | |
// timer variables | |
var timer = $('#mega_menu_dd_31'); | |
var timeStr; | |
var time; | |
// score variables | |
var scoreElement = $('#mega_menu_dd_11'); | |
var score; | |
var highScoreElement = $('#mega_menu_dd_18'); | |
// board variables | |
var board = $('#board'); | |
board.rows = window.innerHeight / 20; | |
board.columns = window.innerWidth / 20; | |
var squareSize = 20; | |
// snake variables | |
var snake = {}; | |
snake.speed = 10; | |
// apple | |
var apple; | |
// KeyCodes | |
var KEY = { | |
LEFT: 37, | |
UP: 38, | |
RIGHT: 39, | |
DOWN: 40 | |
}; | |
// interval variables | |
var updateInterval; | |
var timerInterval; | |
init(); | |
function init() { | |
disableScrollingByKeyboard(); | |
// initialize the snake | |
snake.body = []; | |
snake.head = makeSnakeSquare(localStorage.getItem("snakeRow"), localStorage.getItem("snakeColumn")).attr('id', 'snake-head'); | |
snake.head.direction = "right"; | |
// initialize the first apple | |
apple = makeApple(); | |
//start timer ticking at 0 | |
timer.text("Time: 0:00"); | |
time = 0; | |
timerInterval = setInterval(updateTimer, 1000); | |
// set score to 0 | |
scoreElement.text("Score: 0"); | |
score = 0; | |
//high score element | |
highScoreElement.text("High Score : "+localStorage.getItem("highScore")); | |
// start update interval | |
updateInterval = setInterval(update, 100); | |
(function loop() { | |
setTimeout(function () { | |
score++; | |
loop() | |
}, 10000); | |
}()); | |
// turn on keyboard inputs | |
$('body').on('keydown', setNextDirection); | |
} | |
function disableScrollingByKeyboard(){ | |
window.addEventListener("keydown", function(e) { | |
// space, page up, page down and arrow keys: | |
if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { | |
e.preventDefault(); | |
} | |
}, false); | |
} | |
/* | |
* On each update tick update each bubble's position and check for | |
* collisions with the walls. | |
*/ | |
function update() { | |
moveSnake(); | |
if (hasCollidedWithApple()) { | |
handleAppleCollision(); | |
} | |
if (hasCollidedWithSnake() || hasHitWall()) { | |
endGame(); | |
} | |
} | |
function moveSnake() { | |
// start at 1, the head is moved separately | |
for (var i = snake.body.length - 1; i >= 1; i--) { | |
var snakeSquare = snake.body[i]; | |
var nextSnakeSquare = snake.body[i - 1]; | |
snakeSquare.row = nextSnakeSquare.row; | |
snakeSquare.column = nextSnakeSquare.column; | |
snakeSquare.direction = nextSnakeSquare.direction; | |
localStorage.setItem("snakeRow", snakeSquare.row); | |
localStorage.setItem("snakeColumn", snakeSquare.column); | |
localStorage.setItem("snakeDirection", snakeSquare.direction); | |
repositionSquare(snakeSquare); | |
} | |
/* snake.nextDirection is set using keyboard input and only changes if the | |
next direction is perpendicular to snake.head.direction | |
only when the snake actually is making the turn does the next direction get | |
registered | |
*/ | |
snake.head.direction = snake.nextDirection; | |
if (snake.head.direction === "left") { | |
snake.head.column--; | |
} | |
else if (snake.head.direction === "right") { | |
snake.head.column++; | |
} | |
else if (snake.head.direction === "up") { | |
snake.head.row--; | |
} | |
else if (snake.head.direction === "down") { | |
snake.head.row++; | |
} | |
repositionSquare(snake.head); | |
} | |
function hasCollidedWithApple() { | |
return snake.head.row === apple.row && snake.head.column === apple.column; | |
} | |
function handleAppleCollision() { | |
// Remove existing Apple and create a new one | |
console.log('apple eaten'); | |
apple.remove(); | |
apple = null; | |
makeApple(); | |
var row = snake.tail.row; | |
var column = snake.tail.column; | |
if (snake.tail.direction === "left") { | |
column++; | |
} | |
else if (snake.tail.direction === "right") { | |
column--; | |
} | |
else if (snake.tail.direction === "up") { | |
row++; | |
} | |
else if (snake.tail.direction === "down") { | |
row--; | |
} | |
makeSnakeSquare(row, column); | |
score++; | |
score++; | |
scoreElement.text("Score: " + score); | |
} | |
function hasCollidedWithSnake() { | |
for (var i = 1; i < snake.body.length; i++) { | |
if (snake.head.row === snake.body[i].row && snake.head.column === snake.body[i].column) { | |
console.log('snake collision'); | |
return true; | |
} | |
} | |
} | |
function hasHitWall() { | |
return snake.head.row > board.row || snake.head.row < 0 || snake.head.column > board.columns || snake.head.column < 0; | |
} | |
function makeSnakeSquare(row, column) { | |
// make the snake jQuery Object | |
var snakeSquare = $('<div>').addClass('snake'); | |
// set snake position properties | |
snakeSquare.column = column; | |
snakeSquare.row = row; | |
repositionSquare(snakeSquare); | |
// add snakeSquare to body and set a new tail | |
snake.body.push(snakeSquare); | |
snake.tail = snakeSquare; | |
board.append(snakeSquare); | |
return snakeSquare; | |
} | |
function makeApple() { | |
// make the snake jQuery Object if one doesn't already exist | |
if (!apple) { | |
apple = $('<div>').addClass('apple'); | |
// set snake position properties | |
var randomPosition = getRandomAvailablePosition(); | |
apple.column = randomPosition.column; | |
apple.row = randomPosition.row; | |
repositionSquare(apple); | |
board.append(apple); | |
} | |
return apple; | |
} | |
function getRandomAvailablePosition() { | |
var spaceIsAvailable = false; | |
var randomPosition = {}; | |
while (!spaceIsAvailable) { | |
randomPosition.column = Math.floor(Math.random() * board.rows); | |
randomPosition.row = Math.floor(Math.random() * board.rows); | |
spaceIsAvailable = true; | |
snake.body.forEach(function(snakeSquare) { | |
if (snakeSquare.row === randomPosition.row && snakeSquare.column === randomPosition.column) { | |
spaceIsAvailable = false; | |
} | |
}); | |
} | |
return randomPosition; | |
} | |
function setNextDirection(event) { | |
var keyPressed = event.which; | |
if (keyPressed === KEY.LEFT && snake.head.direction !== "left" && snake.head.direction !== "right") { | |
snake.nextDirection = "left"; | |
} | |
else if (keyPressed === KEY.RIGHT && snake.head.direction !== "left" && snake.head.direction !== "right") { | |
snake.nextDirection = "right"; | |
} | |
else if (keyPressed === KEY.UP && snake.head.direction !== "up" && snake.head.direction !== "down") { | |
snake.nextDirection = "up"; | |
} | |
else if (keyPressed === KEY.DOWN && snake.head.direction !== "up" && snake.head.direction !== "down") { | |
snake.nextDirection = "down"; | |
} | |
} | |
function updateTimer() { | |
time++; | |
var secondsOnes = (time % 60) % 10; | |
var secondsTens = Math.floor((time % 60) / 10); | |
var minutes = Math.floor(time / 60); | |
timeStr = minutes + ":" + secondsTens + secondsOnes; | |
timer.text("Time: " + timeStr); | |
} | |
function endGame() { | |
// turn off intervals | |
clearInterval(updateInterval); | |
clearInterval(timerInterval); | |
// turn off keyboard input | |
$('body').off('keydown'); | |
// clear board of all elements | |
board.empty(); | |
// reset the apple | |
apple = null; | |
// calculate high score and restart the game | |
calculateAndDisplayHighScore(); | |
setTimeout(function() { init(); }, 500); | |
} | |
function calculateAndDisplayHighScore() { | |
var highScore = localStorage.getItem("highScore"); | |
if (score > highScore) { | |
sessionStorage.setItem("highScore", score); | |
highScore = score; | |
highScoreElement.text("High Score: " + highScore); | |
localStorage.setItem("highScore", highScore); | |
alert("New High Score! Your Score :" + highScore); | |
} | |
} | |
//////////////////////////////////////////////////////////////////////////////// | |
///////////////////////// HELPER FUNCTIONS ///////////////////////////////////// | |
//////////////////////////////////////////////////////////////////////////////// | |
/* Called on each update to move the snake to it's next position. Also called | |
by makeApple when a new apple is created */ | |
function repositionSquare(square) { | |
square.css('left', square.column * squareSize + 20); | |
square.css('top', square.row * squareSize + 20); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment