Skip to content

Adding some good features to the game (Snake) #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adding some good features to the game (Snake) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5046d51
adding new images of food and the feature of colors using Java Sc…
May 1, 2020
42fd3ea
adding new features to the game using Java Script
May 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added img/food1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/food2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 14 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<html>
<head>
<title>Snake Game</title>
<style>
canvas{
display: block;
margin: 0 auto;
}
</style>
</head>
<canvas id="snake" width="608" height="608"></canvas>
<script src="snake.js"></script>

<head>
<title>Snake Game</title>
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<canvas id="snake" width="608" height="608"></canvas>
<script src="snake.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

</html>
194 changes: 130 additions & 64 deletions snake.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,133 +38,199 @@ down.src = "audio/down.mp3";
let snake = [];

snake[0] = {
x : 9 * box,
y : 10 * box
x: 9 * box,
y: 10 * box
};

// create the food

let food = {
x : Math.floor(Math.random()*17+1) * box,
y : Math.floor(Math.random()*15+3) * box
x: Math.floor(Math.random() * 17 + 1) * box,
y: Math.floor(Math.random() * 15 + 3) * box
}

// create the score var

let score = 0;
let secondScore = 0;
let thirdScore = 0;
let finalSccore = 0;

//control the snake

let d;

document.addEventListener("keydown",direction);
document.addEventListener("keydown", direction);

function direction(event){
function direction(event) {
let key = event.keyCode;
if( key == 37 && d != "RIGHT"){
if (key == 37 && d != "RIGHT") {
left.play();
d = "LEFT";
}else if(key == 38 && d != "DOWN"){
} else if (key == 38 && d != "DOWN") {
d = "UP";
up.play();
}else if(key == 39 && d != "LEFT"){
} else if (key == 39 && d != "LEFT") {
d = "RIGHT";
right.play();
}else if(key == 40 && d != "UP"){
} else if (key == 40 && d != "UP") {
d = "DOWN";
down.play();
}
}

// cheack collision function
function collision(head,array){
for(let i = 0; i < array.length; i++){
if(head.x == array[i].x && head.y == array[i].y){
return true;
}
}
return false;
}


// draw everything to the canvas

function draw(){

ctx.drawImage(ground,0,0);

for( let i = 0; i < snake.length ; i++){
ctx.fillStyle = ( i == 0 )? "green" : "white";
ctx.fillRect(snake[i].x,snake[i].y,box,box);

function draw() {

ctx.drawImage(ground, 0, 0);

for (let i = 0; i < snake.length; i++) {
let arrColor = ["yellow", "red", "blue", "White", "Black", "Brown", "Purple", "Orange", "Gray", "Silver", "Cyan", "Khaki", "Coral", "Aquamarine", "Lime"];
let randomColor;
randomColor = Math.floor(Math.random() * (15 - 0 + 1) + 0);
if ((i == 0)) {
ctx.fillStyle = "green";
} else {

ctx.fillStyle = arrColor[randomColor];
}

ctx.fillRect(snake[i].x, snake[i].y, box, box);

ctx.strokeStyle = "red";
ctx.strokeRect(snake[i].x,snake[i].y,box,box);
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}



ctx.drawImage(foodImg, food.x, food.y);

// old head position
let snakeX = snake[0].x;
let snakeY = snake[0].y;

// which direction
if( d == "LEFT") snakeX -= box;
if( d == "UP") snakeY -= box;
if( d == "RIGHT") snakeX += box;
if( d == "DOWN") snakeY += box;

if (d == "LEFT") snakeX -= box;
if (d == "UP") snakeY -= box;
if (d == "RIGHT") snakeX += box;
if (d == "DOWN") snakeY += box;

// collision with barriers part 1
function collision1(snakeX, snakeY) {
if ((snakeX == 5 * box && snakeY == 6 * box) || (snakeX == 6 * box && snakeY == 6 * box) || (snakeX == 5 * box && snakeY == 7 * box) || (snakeX == 5 * box && snakeY == 8 * box) || (snakeX == 13 * box && snakeY == 12 * box) || (snakeX == 13 * box && snakeY == 13 * box) || (snakeX == 13 * box && snakeY == 14 * box) || (snakeX == 12 * box && snakeY == 14 * box)) {
return true;
} else { return false; }
}
// collision with barriers part 2
function collision2(snakeX, snakeY) {
if ((snakeX == 5 * box && snakeY == 12 * box) || (snakeX == 5 * box && snakeY == 13 * box) || (snakeX == 5 * box && snakeY == 14 * box) || (snakeX == 6 * box && snakeY == 14 * box) || (snakeX == 12 * box && snakeY == 6 * box) || (snakeX == 13 * box && snakeY == 6 * box) || (snakeX == 13 * box && snakeY == 7 * box) || (snakeX == 13 * box && snakeY == 18 * box)) {
return true;
} else { return false; }
}
// if the snake eats the food
if(snakeX == food.x && snakeY == food.y){
if (snakeX == food.x && snakeY == food.y) {
score++;
if (score > 3) {
secondScore++;
if (secondScore > 4) { thirdScore++; }
}
eat.play();
food = {
x : Math.floor(Math.random()*17+1) * box,
y : Math.floor(Math.random()*15+3) * box
x: Math.floor(Math.random() * 17 + 1) * box,
y: Math.floor(Math.random() * 15 + 3) * box
}
while (collision1(food.x, food.y) || collision2(food.x, food.y)) {
food = {
x: Math.floor(Math.random() * 17 + 1) * box,
y: Math.floor(Math.random() * 15 + 3) * box
}
}
// we don't remove the tail
}else{
} else {
// remove the tail
snake.pop();
}

// add new Head

let newHead = {
x : snakeX,
y : snakeY
}

// game over

if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){
clearInterval(game);
dead.play();
x: snakeX,
y: snakeY
}

snake.unshift(newHead);

ctx.fillStyle = "white";
ctx.font = "45px Changa one";
ctx.fillText(score,2*box,1.6*box);
}

// call draw function every 100 ms

let game = setInterval(draw,100);



// game over
function gameOver() {

alert("Game Over ! \n\n Your Score is : " + score + " / 12");
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Game Over !',
footer: 'Powered By KHITER .'
})

}

if (snakeX < box || snakeX > 17 * box || snakeY < 3 * box || snakeY > 17 * box) {
clearInterval(game);
dead.play();
gameOver();

}

snake.unshift(newHead);

ctx.fillStyle = "white";


if (score > 3) {
ctx.fillStyle = "blue";
ctx.font = "45px Changa one";
ctx.fillText("3/3.", 2 * box, 1.6 * box);
ctx.fillStyle = "#16510e"
ctx.fillRect(5 * box, 6 * box, box, 3 * box);
ctx.fillRect(5 * box, 6 * box, 2 * box, box);
ctx.fillRect(12 * box, 14 * box, 2 * box, box);
ctx.fillRect(13 * box, 12 * box, box, 3 * box);
if (collision1(snakeX, snakeY)) {
clearInterval(game);
dead.play();
gameOver();

}
if (secondScore > 4) {
ctx.fillStyle = "red";
ctx.font = "45px Changa one";
ctx.fillText("3/3.", 2 * box, 1.6 * box);
ctx.fillText("4/4.", 7 * box, 1.6 * box);
ctx.fillText(thirdScore + "/5.", 11 * box, 1.6 * box);
ctx.fillStyle = "#16510e"
ctx.fillRect(12 * box, 6 * box, 2 * box, box);
ctx.fillRect(13 * box, 6 * box, box, 3 * box);
ctx.fillRect(5 * box, 12 * box, box, 3 * box);
ctx.fillRect(5 * box, 14 * box, 2 * box, box);
if (collision1(snakeX, snakeY) || collision2(snakeX, snakeY)) {
clearInterval(game);
gameOver();
dead.play();
}
}
if (secondScore <= 4) {
ctx.fillStyle = "blue";
ctx.fillText(secondScore + "/4.", 7 * box, 1.6 * box);
}

} else {
ctx.font = "45px Changa one";
ctx.fillText(score + "/3.", 2 * box, 1.6 * box);
}



}

// call draw function every 100 ms

let game = setInterval(draw, 200);