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

Kali Linux 2017.2

Most Advanced Penetration Testing Distribution, Ever. New and Updated Packages in Kali 2017.2 In addition to all of the standard security and package updates that come to us via Debian Testing, we have also added more than a dozen new tools to the repositories, a few of which are listed below. There are some really nice additions so we encourage you to ‘apt install’ the ones that pique your interest and check them out. hurl  – a useful little hexadecimal and URL encoder/decoder phishery  – phishery lets you inject SSL-enabled basic auth phishing URLs into a .docx Word document ssh-audit  – an SSH server auditor that checks for encryption types, banners, compression, and more apt2  – an Automated Penetration Testing Toolkit that runs its own scans or imports results from various scanners, and takes action on them bloodhound  – uses graph theory to reveal the hidden or unintended relationships within Active Directory crackmapexec  – a post-expl...
Post a Comment
Read more