Games With HTML Codes: Make A Snake Game With Notepad

In this post, I will be showing you how to make a snake game with HTML codes using Notepad. As a computer engineer, I am always interested in programming and blogging. When I posted my previous post on this blog about web design and web development
 

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

http://computercourse.org/ snake game javascript source code, html snake game code, simple html game code, html game codes mario, how to make a game using html code, html games source code, snake game code java, html game tutorial.

Make a Snake Game With HTML Codes Using Notepad

First, you have to copy the below codes:

 

<!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.

  1. 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.

13 thoughts on “Games With HTML Codes: Make A Snake Game With Notepad”

  1. 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.

    Reply
  2. 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?

    Reply

Leave a Comment