Let's Learn together: বানিয়ে ফেলুন নকিয়ার সেই সাপের গেইম HTML এবং jquery দিয়ে !!

সাপ যে এতো কিউট হয় সেটা নকিয়ার সাপের গেইম না খেললে বোঝা যেতনা । নকিয়া মোবাইলে সাপের গেইম তো অনেক খেললেন । এবার বানান !!!
▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓
নকিয়ার তুমুল জনপ্রিয় সেই সাপের গেইম HTML এবং jquery দিয়েও বানানো যায় ।
নকিয়া বানিয়েছিল সিম্বিয়ান দিয়ে ।
তো দেখা যাক কিভাবে HTML এবং jquery দিয়ে গেইম বানাবেন ............
যাদের HTML এবং jquery নিয়ে ধারণা নেই তারাও এই গেইম বানাতে পারবেন ।

♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛♛
প্রথমে একটি .txt ফাইলকে snake.html নামে সেইভ করুন (দ্বিতীয় ছবি দেখুন) । নোটপ্যাড এ নিচের কোড গুলো কপি পেস্ট করুন ।

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snake Game with HTML5 and Jquery </title>

<script src="http://ajax.googleapis.com/…/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<canvas id="canvas" width="450" height="450"></canvas>

<script>
$(document).ready(function(){
//Canvas stuff
var canvas = $("‪#‎canvas‬")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
//Lets save the cell width in a variable for easy control
var cw = 10;
var d;
var food;
var score;
//Lets create the snake now
var snake_array; //an array of cells to make up the snake
function init()
{
d = "right"; //default direction
create_snake();
create_food(); //Now we can see the food particle
//finally lets display the score
score = 0;
//Lets move the snake now using a timer which will trigger the paint function
//every 60ms
if(typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}
init();
function create_snake()
{
var length = 5; //Length of the snake
snake_array = []; //Empty array to start with
for(var i = length-1; i>=0; i--)
{
//This will create a horizontal snake starting from the top left
snake_array.push({x: i, y:0});
}
}
//Lets create the food now
function create_food()
{
food = {
x: Math.round(Math.random()*(w-cw)/cw),
y: Math.round(Math.random()*(h-cw)/cw),
};
//This will create a cell with x/y between 0-44
//Because there are 45(450/10) positions accross the rows and columns
}
//Lets paint the snake now
function paint()
{
//To avoid the snake trail we need to paint the BG on every frame
//Lets paint the canvas now
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//The movement code for the snake to come here.
//The logic is simple
//Pop out the tail cell and place it infront of the head cell
var nx = snake_array[0].x;
var ny = snake_array[0].y;
//These were the position of the head cell.
//We will increment it to get the new head position
//Lets add proper direction based movement now
if(d == "right") nx++;
else if(d == "left") nx--;
else if(d == "up") ny--;
else if(d == "down") ny++;
//Lets add the game over clauses now
//This will restart the game if the snake hits the wall
//Lets add the code for body collision
//Now if the head of the snake bumps into its body, the game will restart
if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
{
//restart game
init();
//Lets organize the code a bit now.
return;
}
//Lets write the code to make the snake eat the food
//The logic is simple
//If the new head position matches with that of the food,
//Create a new head instead of moving the tail
if(nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//Create new food
create_food();
}
else
{
var tail = snake_array.pop(); //pops out the last cell
tail.x = nx; tail.y = ny;
}
//The snake can now eat the food.
snake_array.unshift(tail); //puts back the tail as the first cell
for(var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
//Lets paint 10px wide cells
paint_cell(c.x, c.y);
}
//Lets paint the food
paint_cell(food.x, food.y);
//Lets paint the score
var score_text = "Score: " + score;
ctx.fillText(score_text, 5, h-5);
}
//Lets first create a generic function to paint cells
function paint_cell(x, y)
{
ctx.fillStyle = "blue";
ctx.fillRect(x*cw, y*cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x*cw, y*cw, cw, cw);
}
function check_collision(x, y, array)
{
//This function will check if the provided x/y coordinates exist
//in an array of cells or not
for(var i = 0; i < array.length; i++)
{
if(array[i].x == x && array[i].y == y)
return true;
}
return false;
}
//Lets add the keyboard controls now
$(document).keydown(function(e){
var key = e.which;
//We will add another clause to prevent reverse gear
if(key == "37" && d != "right") d = "left";
else if(key == "38" && d != "down") d = "up";
else if(key == "39" && d != "left") d = "right";
else if(key == "40" && d != "up") d = "down";
//The snake is now keyboard controllable
})
})
</script>

<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

এইবার ফাইলটিকে save করে আপনার ব্রাউজারে ওপেন করুন ।
✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂
☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂☁ ☂

===========================================
খেলা শুরু করে দেওয়ার আগে কোডগুলোর ব্যখ্যায় আসুন .........
===========================================
☛ <html> , <head> , <title> - এগুলা HTML কোড ।
☚ Jquery লিংক অ্যাড করা হয়েছে ।
☛ HTML5 canvas ব্যবহার করে স্ক্রিনের width="450" এবং height="450 নেওয়া হোলো ।
আপনি চাইলে আপনার মনমতো width- height দিতে পারেন ।
☚ var ctx মানে হোলো ctx নামে ভ্যারিয়েবল নেওয়া হয়েছে ।
☛ $("#canvas").width(); দিয়ে canvas আইডিকে কল করা হয়েছে ।
☚ function init() এখানে সাপকে initiate করা হয়েছে
{
d = "right"; //default direction সাপ ডানদিক থেকে চলা শুরু করবে ।
create_snake(); সাপ তৈরির ফাংশন
create_food(); খাদ্য তৈরির ফাংশন
☛ setInterval(paint, 60); এখানে ৬০ মানে হোলো ৬০ মিলিসেকেন্ড পর পর সাপটা নড়াচড়া করবে । সাপের গতি বাড়ানো কমানো আরকি ।
৬০ এর জায়গায় ১০০০ মিলিসেকেন্ড দিলে এক সেকেন্ড পর পর সাপটা অগ্রসর হবে (আর আপনিও খেলতে গিয়ে ঘুমায় যাবেন) ।
☚ function create_snake()
{
var length = 5; মানে ৫ পিক্সেল লম্বা সাপ তৈরি হবে (সাপ না বিছকা :--p)

☛ snake_array = []; //Empty array to start with
সাপ বাবাজি যত খাবে তত লম্বু হবে এজন্যই অ্যারেতে নেওয়া হয়েছে ।
Randomly খাদ্য তৈরি হবার জন্য function create_food()
function paint() paint হোলো জাভাস্ক্রিপ্ট এর একটি বিল্ট ইন ফাংশন
।
☚ সাপের মৃত্যুর কারণ (ধাক্কা খাইলেই অক্কা)
if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
☛ সাপকে কীবোর্ডের অ্যারো বাটন দিয়ে নাচানোর কোড
$(document).keydown(function(e){
var key = e.which;
if(key == "37" && d != "right") d = "left";
else if(key == "38" && d != "down") d = "up";
else if(key == "39" && d != "left") d = "right";
else if(key == "40" && d != "up") d = "down";
})
▁ ▂ ▃ ▄ ▅ ▆ ▇ █
খেলাধুলা করার লিংক
http://thecodeplayer.com/…/html5-game-tutorial-make-a-snake…
█ ▇ ▆ ▅ ▄ ▃ ▂ ▁