Ticker

6/recent/ticker-posts

HTML Game Code to Make Snake Game In NOTEPAD In 2 mins (2022)

ALL FACTS January 16, 2022

HTML Game code - If you have been searching for the HTML Game code to make Snake Game in notebook effectively, then, at that point, you are on the right page.


Truth be told, it is so natural to make Snake game in Notepad with just HTML code. You can fundamentally make the game in only 2 minutes.


You needn't bother with any information on coding/programming to get it done. All that has been done for you, including the CSS and JavaScript.

All you really want is to reorder the HTML game code beneath and you can begin playing for nothing!


PS: The notepad pad snake game code PDF is likewise accessible toward the finish of the article for sometime later.

To start with, copy the code underneath.

--------------------------------------------------------------------------------------------------------------

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
<meta charset="utf-8" />
<title>Snake Game</title>
<style type="text/css">
body {text-align:center;}
canvas { border:7px dashed #4A4747 }
h1 { font-size:35px; text-align: center; margin: 0; padding-bottom: 25px; text-decoration: underline; font-family: Geneva; color: #0520A5;}
</style>
<script type="text/javascript">
function play_game()
{
var level = 160; // Game level, by decreasing will speed up
var rect_w = 45; // Width
var rect_h = 30; // Height
var inc_score = 50; // Score
var snake_color = "#0520A5"; // Snake Color
var ctx; // Canvas attributes
var tn = []; // temp directions storage
var x_dir = [-1, 0, 1, 0]; // position adjusments
var y_dir = [0, -1, 0, 1]; // position adjusments
var queue = [];
var frog = 1; // defalut food
var map = [];
var MR = Math.random;
var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positions
var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions
var direction = MR() * 3 | 0;
var interval = 0;
var score = 0;
var sum = 0, easy = 0;
var i, dir;
// getting play area 
var c = document.getElementById('playArea');
ctx = c.getContext('2d');
// Map positions
for (i = 0; i < rect_w; i++)
{
map[i] = [];
}
// random placement of snake food
function random_snake()
{
var x, y;
do
{
x = MR() * rect_w|0;
y = MR() * rect_h|0;
}
while (map[x][y]);
map[x][y] = 1;
ctx.fillStyle = snake_color;
ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);
}
// Default somewhere placement
random_snake();
function set_game_speed()
{
if (easy)
{
X = (X+rect_w)%rect_w;
Y = (Y+rect_h)%rect_h;
}
--inc_score;
if (tn.length)
{
dir = tn.pop();
if ((dir % 2) !== (direction % 2))
{
direction = dir;
}
}
if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y])
{
if (1 === map[X][Y])
{
score+= Math.max(5, inc_score);
inc_score = 50;
random_snake();
frog++;
}
//ctx.fillStyle("#ffffff");
ctx.fillRect(X * 10, Y * 10, 9, 9);
map[X][Y] = 2;
queue.unshift([X, Y]);
X+= x_dir[direction];
Y+= y_dir[direction];
if (frog < queue.length)
{
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
}
else if (!tn.length)
{
var show_score = document.getElementById("show");
show_score.innerHTML = "You lose!<br /> <u>Your Score:</u> <b>"+score+"</b><br><br> Want to try again?<br><br><input type='button' value='Play Again' onclick='window.location.reload();' />";
document.getElementById("playArea").style.display = 'none';
window.clearInterval(interval);
}
}
interval = window.setInterval(set_game_speed, level);
document.onkeydown = function(e) {
var code = e.keyCode - 37;
if (0 <= code && code < 4 && code !== tn[0])
{
tn.unshift(code);
}
else if (-5 == code)
{
if (interval)
{
window.clearInterval(interval);
interval = 0;
}
else
{
interval = window.setInterval(set_game_speed, 60);
}
}
else
{
dir = sum + code;
if (dir == 44||dir==94||dir==126||dir==171) {
sum+= code
} else if (dir === 218) easy = 1;
}
}
}
</script>
</head>
<body onload="play_game()">
<h1>Play Snake Game</h1>
<div id="show"></div>
<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5. Try using like Chrome or Firefox.</canvas>
</body>
</html>
--------------------------------------------------------------------------------------------
Next, open note pad on your PC and paste the code


Click CTRL + S to save the code.
Under file type, select All file, and save as .html.
NOTE: Whatever name you give to your game, make sure you save as .html.
Presently, you can go to the organizer where you saved the code record and open it with any program that upholds HTML 5.

Suggested programs: Chrome/Firefox.




Enjoy!
ALL FACTS

Posted by ALL FACTS