کد بازی HTML برای ساخت بازی مار در NOTEPAD در ۲ دقیقه
اگر به دنبال کد بازی HTML هستید تا Snake Game را به راحتی در دفترچه یادداشت ایجاد کنید ، در صفحه مناسبی قرار دارید. در حقیقت ، ساخت بازی مار در Notepad فقط با کد HTML بسیار آسان است. اساساً می توانید بازی را تنها در ۲ دقیقه انجام دهید.
برای انجام این کار نیازی به دانش برنامه نویسی ندارید . همه چیز برای شما انجام شده است ، از جمله CSS و JavaScript.
تنها چیزی که نیاز دارید این است که کد بازی HTML زیر را کپی و جایگذاری کنید و می توانید بازی را به صورت رایگان شروع کنید!
نکته : کد بازی مار بصورت فایل PDF نیز در انتهای مقاله برای استفاده در دسترس است.
همچنین ما دو کد را برای این منظور در اختیار شما قرار داده ایم ، کد اول کمی حرفه ای تر و زیباتر نسبت به کد دوم می باشد.
کد اول :
اجازه دهید مروری بر این بازی در قالب GIF داشته باشیم.
من فقط یک فایل برای این برنامه ایجاد کرده ام زیرا این برنامه از نظر طول و اندازه کوچک است. من کمی از CSS استفاده کردم ، به همین دلیل CSS را بین برچسب <head> قرار دادم . یک فایل HTML با نام “snakegame.html” یا هر نام دیگری که می خواهید ایجاد کنید. فرم کدها را در زیر کپی کرده و روی فایل HTML بچسبانید.
<!--Code By WebDevTrick (https://webdevtrick.com)-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JavaScript Snake Game| Webdevtrick.com</title>
<style>
canvas {
display: block;
position: absolute;
border: 5px solid #009BFF;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
</head>
<body>
<script>
var
COLS = 26,
ROWS = 26,
EMPTY = 0,
SNAKE = 1,
FRUIT = 2,
LEFT = 0,
UP = 1,
RIGHT = 2,
DOWN = 3,
KEY_LEFT = 37,
KEY_UP = 38,
KEY_RIGHT = 39,
KEY_DOWN = 40,
canvas,
ctx,
keystate,
frames,
score;
grid = {
width: null,
height: null,
_grid: null,
init: function(d, c, r) {
this.width = c;
this.height = r;
this._grid = [];
for (var x=0; x < c; x++) {
this._grid.push([]);
for (var y=0; y < r; y++) {
this._grid[x].push(d);
}
}
},
set: function(val, x, y) {
this._grid[x][y] = val;
},
get: function(x, y) {
return this._grid[x][y];
}
}
snake = {
direction: null,
last: null,
_queue: null,
init: function(d, x, y) {
this.direction = d;
this._queue = [];
this.insert(x, y);
},
insert: function(x, y) {
this._queue.unshift({x:x, y:y});
this.last = this._queue[0];
},
remove: function() {
return this._queue.pop();
}
};
function setFood() {
var empty = [];
for (var x=0; x < grid.width; x++) {
for (var y=0; y < grid.height; y++) {
if (grid.get(x, y) === EMPTY) {
empty.push({x:x, y:y});
}
}
}
var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
grid.set(FRUIT, randpos.x, randpos.y);
}
function main() {
canvas = document.createElement("canvas");
canvas.width = COLS*20;
canvas.height = ROWS*20;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
ctx.font = "12px Helvetica";
frames = 0;
keystate = {};
document.addEventListener("keydown", function(evt) {
keystate[evt.keyCode] = true;
});
document.addEventListener("keyup", function(evt) {
delete keystate[evt.keyCode];
});
init();
loop();
}
function init() {
score = 0;
grid.init(EMPTY, COLS, ROWS);
var sp = {x:Math.floor(COLS/2), y:ROWS-1};
snake.init(UP, sp.x, sp.y);
grid.set(SNAKE, sp.x, sp.y);
setFood();
}
function loop() {
update();
draw();
window.requestAnimationFrame(loop, canvas);
}
function update() {
frames++;
if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
snake.direction = LEFT;
}
if (keystate[KEY_UP] && snake.direction !== DOWN) {
snake.direction = UP;
}
if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
snake.direction = RIGHT;
}
if (keystate[KEY_DOWN] && snake.direction !== UP) {
snake.direction = DOWN;
}
if (frames%7 === 0) {
var nx = snake.last.x;
var ny = snake.last.y;
switch (snake.direction) {
case LEFT:
nx--;
break;
case UP:
ny--;
break;
case RIGHT:
nx++;
break;
case DOWN:
ny++;
break;
}
if (0 > nx || nx > grid.width-1 ||
۰ > ny || ny > grid.height-1 ||
grid.get(nx, ny) === SNAKE
) {
return init();
}
if (grid.get(nx, ny) === FRUIT) {
score++;
setFood();
} else {
var tail = snake.remove();
grid.set(EMPTY, tail.x, tail.y);
}
grid.set(SNAKE, nx, ny);
snake.insert(nx, ny);
}
}
function draw() {
var tw = canvas.width/grid.width;
var th = canvas.height/grid.height;
for (var x=0; x < grid.width; x++) {
for (var y=0; y < grid.height; y++) {
switch (grid.get(x, y)) {
case EMPTY:
ctx.fillStyle = "#fff";
break;
case SNAKE:
ctx.fillStyle = "#333";
break;
case FRUIT:
ctx.fillStyle = "#009BFF";
break;
}
ctx.fillRect(x*tw, y*th, tw, th);
}
}
ctx.fillStyle = "#000";
ctx.fillText("SCORE: " + score, 10, canvas.height-10);
}
main();
</script>
</body>
</html>
کد دوم : کد بازی HTML برای ساخت بازی مار در NOTEPAD
اگر ترجیح می دهید یک آموزش تصویری نیز ایجاد کرده ام ، آن را در زیر مشاهده کنید:
ابتدا کد زیر را کپی کنید.
<!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>
در مرحله بعد ، Note Pad را در رایانه خود باز کرده و کد را وارد کنید.
برای ذخیره کد روی CTRL + S کلیک کنید .
در زیر نوع فایل ، All file را انتخاب کرده و به اسم فایل را با عنوان mar.html یا هر چیز دیگری ذخیره کنید .
توجه: هر اسمی که برای بازی خود بگذارید ، مطمئن شوید که با فرمت html. ذخیره می کنید.
اکنون می توانید به پوشه ای که فایل کد را در آن ذخیره کرده اید بروید و آن را با هر مرورگری که از HTML 5 پشتیبانی می کند باز کنید.
مرورگرهای توصیه شده: Chrome/Firefox.
شما همچنین می توانید کد بازی مار Notepad را در PDF زیر دانلود و کپی کنید.
اگر مقاله مفید بود ، اشتراک گذاری را با استفاده از دکمه های زیر فراموش نکنید.
سلام .بازی گل یا پوچ کدش چی میشه ؟؟؟