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

Spring Security with JWT for REST API

Spring is considered a trusted framework in the Java ecosystem and is widely used. It’s no longer valid to refer to Spring as a framework, as it’s more of an umbrella term that covers various frameworks. One of these frameworks is Spring Security , which is a powerful and customizable authentication and authorization framework. It is considered the de facto standard for securing Spring-based applications. Despite its popularity, I must admit that when it comes to single-page applications , it’s not simple and straightforward to configure. I suspect the reason is that it started more as an MVC application -oriented framework, where webpage rendering happens on the server-side and communication is session-based. If the back end is based on Java and Spring, it makes sense to use Spring Security for authentication/authorization and configure it for stateless communication. While there are a lot of articles explaining how this is done, for me, it was still frustrating to set it up for the f...
Post a Comment
Read more

The Java 8 Stream API

1 Overview In this comprehensive tutorial, we'll go through the practical uses of Java 8 Streams from creation to parallel execution. To understand this material, readers need to have a basic knowledge of Java 8 (lambda expressions,   Optional,  method references) and of the Stream API. 2 Stream Creation There are many ways to create a stream instance of different sources. Once created, the instance  will not modify its source,  therefore allowing the creation of multiple instances from a single source. Empty Stream We should use the  empty()  method in case of the creation of an empty stream: Stream<String> streamEmpty = Stream.empty(); We often use the  empty()  method upon creation to avoid returning  null  for streams with no element: public Stream<String> streamOf (List<String> list) { return list == null || list.isEmpty() ? Stream.empty() : list.stream(); } 2.2. Stream of  Collection We can also creat...
Post a Comment
Read more