I decided that was when I will post on my blog the next time I share nice tips or something about HTML Codes. That’s why today I gonna share with all of you something interesting tips on how to make snake games with notepads by inputting HTML codes. Actually, it’s a simple trick from my very own Srinivas Tamada.
Make a Snake Game With HTML Codes Using Notepad
<!documentTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Play Snake Game</title>
<style type=”text/css”>
body {text-align:center;}
canvas { border:5px dotted #ccc; }
h1 { font-size:50px; text-align: center; margin: 0; padding-bottom: 25px;}
</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 = “#006699”; // 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 rand_frog()
{
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
rand_frog();
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;
rand_frog();
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 msg_score = document.getElementById(“msg”);
msg_score.innerHTML = “Thank you for playing game.<br /> Your Score : <b>”+score+”</b><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=”msg”></div>
<canvas id=”playArea” width=”450″ height=”300″>Sorry your browser does not support HTML5</canvas>
</body>
</html>
Second Step: Now open your notepad file from your Computer.
Third: Now Paste the codes into the notepad file and save it by the extension is Snake.html
By finishing the above options, now you are ready to play the game. Just click the icon where you save it and enjoy the games. You can edit it by changing the codes which I highlighted with other colors inside the code area.
Enjoy the game now which you make now by the HTML codes with notepad. If not working your codes don’t forget to share or ask me anything via comment. Share this post on social media like Facebook and Twitter. Also, you can read How to Make Clock and Date Using Notepad Text Editor.
Games With HTML Codes Using Notepad (Part 2)
HTML or Hyper Text Markup Language is the foundation of creating a website. It is used to create the basic structure and content of web pages, and it can also be used to create simple games using the code editor like Notepad. Here are some examples of games that you can create using HTML codes and Notepad.
- Guess the Number Game
This is a simple game where the user has to guess a number between 1 to 100. The computer generates a random number, and the user has to keep guessing until they get the correct number. Here’s how you can create this game using HTML codes.
First, create a new HTML file in Notepad and save it with a .html extension. Then, create a heading for the game and add an input field where the user can enter their guess. You can also add a button to submit the guess.
<!DOCTYPE html>
<html>
<head>
<title>Guess the Number Game</title>
</head>
<body>
<h1>Guess the Number</h1>
<p>Enter a number between 1 and 100:</p>
<input type=”number” id=”guess”>
<button onclick=”checkGuess()”>Submit</button>
<p id=”result”></p>
<script>
function checkGuess() {
var number = Math.floor(Math.random() * 100) + 1;
var guess = document.getElementById(“guess”).value;
if (guess == number) {
document.getElementById(“result”).innerHTML = “Congratulations! You guessed the number!”;
} else if (guess < number) {
document.getElementById(“result”).innerHTML = “Try a higher number.”;
} else {
document.getElementById(“result”).innerHTML = “Try a lower number.”;
}
}
</script>
</body>
</html>
2. Tic Tac Toe Game
Tic Tac Toe is a classic game that can be easily created using HTML codes. In this game, two players take turns marking X and O on a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.
To create this game, you will need to create a table with 3 rows and 3 columns. Each cell of the table represents a position on the grid. You can use JavaScript to handle the game logic and update the table with each move.
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
table {
border-collapse: collapse;
margin: 50px auto;
}
td {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
font-size: 50px;
font-weight: bold;
border: 2px solid black;
cursor: pointer;
}
td:hover {
background-color: #eee;
}
</style>
</head>
<body>
<table>
<tr>
<td id=”0″ onclick=”play(this)”></td>
<td id=”1″ onclick=”play(this)”></td>
<td id=”2″ onclick=”play(this)”></td>
</tr>
<tr>
<td id=”3″ onclick=”play(this)”></td>
<td id=”4″ onclick=”play(this)”></td>
<td id=”5″ onclick=”play(this)”></td>
</tr>
<tr>
<td id=”6″ onclick=”play(this)”></td>
<td id=”7″ onclick=”play(this)”></td>
Tags Are:
notepad snake game code, HTML game codes copy and paste, snake game notepad, how to make snake game in notepad, notepad snake game, snake code notepad, notepad games codes for games, notepad game codes, notepad game codes list, how to make a shooting game in notepad, notepad game script, cmd prompt games, how to make a computer game on the notepad, how to make a video game using notepad, how to make a 3d game in notepad.
It works in my pc
thank u
Sounds Good 🙂
It works good with the arduino sd card server.
Oh! And thank you for sharing your code.
amazing bro!it worked……
i req u to create some adventurous game using notepad/html
My Pleasure 🙂
Sure I Will Try! 🙂
THANKS BHAI
bro any other coding is there ?
Yap! You can try notepad category form the category option.
Luthfar can you explain to me what all your code in the middle does for the snake game
I'm not clear about your questions Tyrse! I just wanna to say you copy all of my codes from here to your notepad file in windows or mac. Then save it with the extension .html for play snake game . If you have more query you free to ask me with clear sentence.
Thanks for the nice source of Notepad Snake Game Code. I learn here how to make a game in notepad and make it on my desktop PC successfully. Hope you will publish another good one like this. Your notepad games codes are active and work nicely.
Here I have a question is how can I use notepad for find my website IP Address?
how do you change the speed? and also the starting size of snake?