MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

ক্যানভাস তৈরি এবং এটির উপর অঙ্কন

This translation is incomplete. Please help translate this article from English.

এটি হল Gamedev Canvas tutorial এর প্রথম ধাপ। এই পাঠ শেষ করার পর আপনি সোর্স কোডটির সঙ্গে আপনার কোড Gamedev-Canvas-workshop/lesson1.html থেকে মিলিয়ে নিতে পারেন।

গেমটির কার্যকারিতা লেখার আগে, আমাদের একটি মৌলিক গঠন তৈরী করতে হবে যার উপর আমরা গেমটিকে দার করাব।  এটা করার জন্য  HTML এবং <canvas> উপাদান ব্যবহার করা যেতে পারে।

গেমের HTML গঠন

HTML ডকুমেন্টের গঠন খুবই সহজ, যেহেতু খেলাটি পুরোপুরি <canvas> উপাদানের উপর তৈরী হবে। আপনার প্রিয় টেক্সট এডিটর ব্যবহার করে, একটি নতুন HTML document তৈরী করুন এবং আপনার নতুন প্রজেক্ট ফোল্ডারে index.html নাম একটি  দিয়ে সেভ করুন, এবং নিচের কোডগুলিকে পেস্ট করুন অথবা লিখুন:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	// JavaScript code goes here
</script>

</body>
</html>

আমরা আমাদের হেডার অংশে charset, <title> এবং কিছু সহজ CSS ব্যবহার করেছি। বডি অংশটি <canvas> এবং <script> উপাদান নিয়ে তৈরী — আমরা আমাদের গেমটিকে প্রথম উপাদানের উপর উপস্থাপন করব এবং দ্বিতীয় উপাদানের(স্ক্রিপ্ট) ভেতরে জাভাস্ক্রিপ্ট কোড ব্যবহার করব যা খেলাটিকে নিয়ন্ত্রণ করবে। <canvas> উপাদানটিতে myCanvas id আছে যা আমাদেরকে সেটিকে চিহ্নিত করতে সাহায্য করবে, এছাড়াও ক্যানভাসটি 480 pixels চওড়া এবং 320 pixels লম্বা। এই পাঠে যে সমস্ত কোড আমরা লিখব সেই সবগুলিই আমাদের শুরু হওয়া <script> এবং অন্তিম </script> ট্যাগের ভেতরে থাকবে।

Canvas-এর মুল ধারনা

ছবি গুলিকে <canvas> উপাদানের উপর উপস্থাপন করার জন্য আমাদের আসলে এটিকে চিহ্নিত করতে হবে। সুতরাং, নিচের কোডগুলিকে আপনার  <script> </script> এর ভেতরে লিখুনঃ

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

এখানে আমরা <canvas> উপাদানটিকে canvas চলরাশিতে চিহ্নিতকরন করছি। এরপর আমরা 2D rendering context (প্রকৃত সাধনী যা দিয়ে আমরা ক্যানভাসের উপর ছবি আঁকব) কে সঞ্চয় করার জন্য আরেকটি ctx চলরাশি তৈরী করছি

চলুন, একটা একটা উদাহরণ দেখা যাক যা কিনা ক্যানভাসের উপর একটা লাল বর্গক্ষেত্র আঁকবে। নিচের কয়েক লাইনের কোড আপনার স্ক্রিপ্টে যোগ করুন, এরপর আপনার ব্রাউজারে index.html লোড করুনঃঃ

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

সমস্ত নির্দেশাবলী beginPath() এবং closePath() পদ্ধতির ভেতরে অন্তর্ভুক্ত. আমরা rect() ব্যাবহার করে একটি আয়তক্ষেত্র সংজ্ঞায়িত করছি, প্রথম দুটি মান আয়তক্ষেত্রটির top left corner অবস্থান নির্ণয় করে, যেখানে পরের দুটি মান আয়তক্ষেত্রের দৈর্ঘ্য এবং প্রস্থ নির্দেশ করে।  আমাদের ক্ষেত্রে আয়তক্ষেত্রটি স্ক্রিনের বাম পাশ থেকে 20 পিক্সেল এবং উপরের দিক থেকে 40 পিক্সেল দুরে আঁকা হয়েছে, এবং আয়তক্ষেত্রটি 50 পিক্সেল চওড়া এবং 50 পিক্সেল লম্বা। যা কিনা এটিকে নিখুঁত বর্গক্ষেত্র তৈরি করে।  fillStyle property রঙ বহন করে যেটা কিনা fill() method দ্বারা ব্যাবহার করা হয় বর্গক্ষেত্রটির উপর রঙ করার জন্য, এক্ষেত্রে লাল রঙ।

আমরা শুধুমাত্র আয়তক্ষেত্রের উপরই সীমাবদ্ধ নই  — এখানে কিছু কোড আছে যা কিনা একটি সবুজ রঙের বৃত্ত তৈরী করে। নিচের এই কোডগুলিকে আপনার স্ক্রিপ্টে যোগ করে সেভ করুন এবং ব্রাউজারটিকে রিলোড দিয়ে দেখুনঃ

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

এখানে দেখতে পাচ্ছেন আমরা beginPath() এবং closePath() পদ্ধতি আবার ব্যবহার করছি। তারমধ্যে, সবচেয়ে গুরুত্বপূর্ণ অংশ হল arc() পদ্ধতি. এটি ছয়টি প্যারামিটার গ্রহণ করেঃ

  • x এবং y হল বৃত্তের কেন্দ্র অবস্থান
  • বৃত্তের ব্যাসার্ধ
  • শুরু হওয়া কোণ এবং শেষ হওয়া কোণ (বৃত্ত আঁকবার জন্য যে কোণে শুরু হয়ে শেষ হবে, রেডিয়ানে)
  • বৃত্ত আঁকবার গতিপথ (ঘড়ির কাঁটার অভিমুখে false(ডিফল্ট), অথবা ঘড়ির কাঁটার বিপরীতে true) এই শেষ প্যারামিটারটি ঐচ্ছিক।

fillStyle property আগেরবারের তুলনায় ভিন্নরকম। কারণ,  CSS দিয়ে যেমন রঙ নির্দেশ করা যায় hexadecimal মান দিয়ে ঠিক তেমনি rgba() function অথবা যেকোনো  উপলব্ধ রঙের পদ্ধতি অনুসরণ করেও বৃত্তের রঙ নির্দেশ করা যায়।

fill() ব্যবহার ছাড়াও, আমরা stroke() ব্যাবহার করে বৃত্তের চারপাশের রেখা গুলিকেও রঙ করতে পারি। আপনার জাভাস্ক্রিপ্টে নিচের কোডগুলিকে যোগ করে একবার ব্রাউজার রিলোড করে দেখে নিনঃ

ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();

উপরের কোডটি একটি নীল রেখাযুক্ত খালি আয়তক্ষেত্র তৈরী করে। rgba() function এর আলফা চ্যানেলের সুবাদে নীল রঙটি অর্ধ-স্বছ হয়ে গেছে।

আপনার কোডের সঙ্গে তুলনা করুন

এখানে প্রথম পাঠের পুরো সোর্স কোড তুলে ধরা হল, JSFiddle থেকে সরাসরিঃ

অনুশীলন: প্রদত্ত আকারের গঠন এবং বর্ন পরিবর্তন করার চেষ্টা করুন।

পরবর্তি ধাপ

আমরা এখন সহজ HTML উপস্থাপিত করেছি এবং ক্যানভাস সম্পর্কে একটু শিখেছি, দ্বিতীয় অধ্যায়ে অগ্রসর হই এবং  and আমাদের খেলায় বলটিকে গতিময় করার প্রক্রিয়া জেনে নেই।

Document Tags and Contributors

 Contributors to this page: surajitbasak109
 Last updated by: surajitbasak109,