# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن > jQuery > آموزش: ساخت بازی اسنک بوسیله jquery css3 html5

## amin1softco

آموزش کنویس ساخت یک بازی مار
از تمام عناصر جدید که در HTML5 اضافه شده من فکر می کنم canvas از همشون هیجان انگیز تر باشه.
canvas به شما یک قسمت ثابت برای طراحی سطحی میده و دستور انتخابی برای نقاشی روی اون سحط
در این آموزش من قصد دارم به شما ساخت یک بازی ساده مار با کنویس رو نشون بدم.شما می دونید, می تونید اونو روی گوشی نوکیا خودتون دریافت کنید.

ساخت کنویس و اولین مستطیل ما 
اجازه بدید یک عنصر <canvas> ایجاد کنیم و و نقاشی کنیم بعضی چیز ها را روی آن. در این قطعه کد من یک عنصر کنویس ساختم و بعد اون را تنظیم کردم و نقاشی کردم یک مسطتیل صورتی روی اون.
$(document).ready(function () {
  $('body').append('<canvas id="jsSnake">'); //create the canvas element
  var $canvas = $('#jsSnake'); //select it with jQuery
  $canvas.attr('width', 100); //set its width
  $canvas.attr('height', 100); //and height
  var canvas = $canvas[0]; //get the actual dom element
  var ctx = canvas.getContext('2d'); //get the context
  ctx.fillStyle = '#fe57a1'; //hot pink!
  ctx.fillRect(10, 10, 30, 50); //fill a rectangle (x, y, width, height)
});

اولین نکته ایی که باید بهش اشاره کنم اینه که ما فراخوانی نمی کنیم تابع نقاشی رو برای طراحی روی کنویس ولی روی drawing context این کار صورت می گیره. در حال حاضر کنویس فقط یک context داره که ما که ما خواستار دستیابی به .getContext('2d'). هستیم.
ایتدا ما رنگ داخل context را مشخص می کنیم که به فرم رنگ های CSS است به عنوان مثال #f00 یا rgba(100, 100, 100, 0.5) . سپس ما فراخوانی می کنیم fillRect که  پهنا و ار تفاعش مشخص می شه  از گوشه سمت چپ بالای مستطیل
توجه کنید که مختصات x/y در کنویس از گوشه چپ سمت بالا شروع می شه  هرچقدر به سمت راست حرکت کنیم x افزایش پیدا می کنه و هر چقدر به سمت پایین حرکت کنیم y اضافه می شه.
ساخته حلقه بازی 

ادامه دارد ....
منبع + سورس : http://css-tricks.com/learn-canvas-snake-game/

----------

