جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
0
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : admin تعداد بازدید : ۳۹۷ تاریخ : یکشنبه,۳۰ شهریور ۱۳۹۳
بازی Snake(مار) با HTML5
امتیاز دهید
تعداد رای 0 امتیاز 0

این کد شامل سه تابع 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; }
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>

دمو بازی Snake

comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه
آپلود چند فایل بصورت Drag and Drop بوسیله  Jquery  و Html5

آپلود چند فایل بصورت Drag and Drop بوسیله Jquery و Html5

   تعداد بازدید: ۷۹۴
سفارشی کردن گوگل مپ

سفارشی کردن گوگل مپ

   تعداد بازدید: ۵۷۷
کلاس آماده ساخت متن لورم ایپسوم

کلاس آماده ساخت متن لورم ایپسوم

   تعداد بازدید: ۴۲۹
تغییر اندازه تصاویر بوسیله php

تغییر اندازه تصاویر بوسیله php

   تعداد بازدید: ۴۵۰
انواع ورودی های جدید در HTML5

انواع ورودی های جدید در HTML5

   تعداد بازدید: ۷۲۶