کانال تلگرام پورتال پادرا

بازی Snake (ماربازی) با HTML5

بازی Snake (ماربازی) با HTML5 - HTML5


تاریخ : سه شنبه,۲۱ دی ۱۳۹۵ تعداد بازدید :394

این کد شامل سه تابع play_game ()، rand_frog () و set_game_speed (). اگر می خواهید تم بازی تغییر دهید، باید این پنج مقادیر متغیر rect_w، rect_h، inc_score و  snake_colorرا تغییر دهید.

<!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; }
h2 { 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()">
<h2>Play Snake Game</h2>
<div id="msg"></div>
<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5</canvas>
</body>
</html>

دمو بازی Snake

منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید




دیدگاه




در ارتباط با همین مطلب بخوانید