Skip to main content

Create Your Own First Game : Snake Game

Create Your Own First Game On Html : Snake Game

    Basic Snake HTML Game
                             

Copy this source code and paste in notepad. After that, save that file with  .html  extension 


<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
background: black;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
border: 1px solid white;
}
</style>
</head>
<body>
<canvas width="400" height="400" id="game"></canvas>
<script>
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var grid = 16;
var snake = {
x: 160,
y: 160,
dx: grid,
dy: 0,
cells: [],
maxCells: 4
};
var count = 0;
var apple = {
x: 320,
y: 320
};
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
// game loop
function loop() {
requestAnimationFrame(loop);
// slow game loop to 15 fps instead of 60 - 60/15 = 4
if (++count < 4) {
return;
}
count = 0;
context.clearRect(0,0,canvas.width,canvas.height);
snake.x += snake.dx;
snake.y += snake.dy;
// wrap snake position on edge of screen
if (snake.x < 0) {
snake.x = canvas.width - grid;
}
else if (snake.x >= canvas.width) {
snake.x = 0;
}
if (snake.y < 0) {
snake.y = canvas.height - grid;
}
else if (snake.y >= canvas.height) {
snake.y = 0;
}
// keep track of where snake has been. front of the array is always the head
snake.cells.unshift({x: snake.x, y: snake.y});
// remove cells as we move away from them
if (snake.cells.length > snake.maxCells) {
snake.cells.pop();
}
// draw apple
context.fillStyle = 'red';
context.fillRect(apple.x, apple.y, grid-1, grid-1);
// draw snake
context.fillStyle = 'green';
snake.cells.forEach(function(cell, index) {
context.fillRect(cell.x, cell.y, grid-1, grid-1);
// snake ate apple
if (cell.x === apple.x && cell.y === apple.y) {
snake.maxCells++;
apple.x = getRandomInt(0, 25) * grid;
apple.y = getRandomInt(0, 25) * grid;
}
// check collision with all cells after this one (modified bubble sort)
for (var i = index + 1; i < snake.cells.length; i++) {
// collision. reset game
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 4;
snake.dx = grid;
snake.dy = 0;
apple.x = getRandomInt(0, 25) * grid;
apple.y = getRandomInt(0, 25) * grid;
}
}
});
}
document.addEventListener('keydown', function(e) {
// prevent snake from backtracking on itself
if (e.which === 37 && snake.dx === 0) {
snake.dx = -grid;
snake.dy = 0;
}
else if (e.which === 38 && snake.dy === 0) {
snake.dy = -grid;
snake.dx = 0;
}
else if (e.which === 39 && snake.dx === 0) {
snake.dx = grid;
snake.dy = 0;
}
else if (e.which === 40 && snake.dy === 0) {
snake.dy = grid;
snake.dx = 0;
}
});
requestAnimationFrame(loop);
</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Momo suicide game

Microsoft clamps down on sick 'Momo suicide game' in 'Minecraft' Microsoft is clamping down on the sick “Momo suicide challenge,” which recently infiltrated the wildly popular online game “Minecraft.”The tech giant owns “Minecraft” developer Mojang. The vile “Momo suicide game” has been garnering attention after spreading on WhatsApp, prompting police warnings. "Momo" is a viral challenge that asks people to add a contact via WhatsApp - they are then   urged   to commit self-harm or suicide. The "game" has fueled comparisons to the sinister " Blue Whale challenge " that led to reports of suicides in Russia and the U.S, as well as the online fictional character of "Slender Man." In 2014 two 12-year-old girls in Wisconsin  attempted to kill   a classmate in an attempt to please the horror character. The Buenos Aires Times recently  reported  that police in Argentina are investigating whether “Momo” is linked to the suicide of a 12-y...
Post a Comment
Read more

Create WAR file in Spring Boot

This is just a three step simple procedure to package your application into war. Extending Main Class First, we extend our main class to SpringBootServletInitializer. This tells spring that your main class will be the entry point to initialize your project in server. ? 1 2 3 4 5 6 7 @SpringBootApplication public class Application extends SpringBootServletInitializer{        public static void main(String[] args) {          SpringApplication.run(Application. class , args);      } } Overriding configure method Next, we overload the configure method of SpringBootServletInitializer. We tell spring to build the sources from our Main class. Your final Main class should look like this: ? 1 2 3 4 5 6 7 8 9 10 11 12 @SpringBootApplication public class Application extends SpringBootServletInitializer{        public static void main(String[] args) {     ...
Post a Comment
Read more

Java - Basic Operators

Java provides a rich set of operators to manipulate variables. We can divide all the Java operators into the following groups − Arithmetic Operators Relational Operators Bitwise Operators Logical Operators Assignment Operators Misc Operators The Arithmetic Operators Arithmetic operators are used in mathematical expressions in the same way that they are used in algebra. The following table lists the arithmetic operators − Assume integer variable A holds 10 and variable B holds 20, then − Show Examples Operator Description Example + (Addition) Adds values on either side of the operator. A + B will give 30 - (Subtraction) Subtracts right-hand operand from left-hand operand. A - B will give -10 * (Multiplication) Multiplies values on either side of the operator. A * B will give 200 / (Division) Divides left-hand operand by right-hand operand. B / A will give 2 % (Modulus) Divides left-hand operand by right-hand operand and returns remainder. B % A will give 0 ++ (Increment) Increases the v...
11 comments
Read more