HTML5 Canvas: 2D Oʻyin Yaratish Olamiga Kirish

HTML5 Canvas elementi veb-brauzerning oʻzida toʻgʻridan-toʻgʻri 2D oʻyinlar yaratish uchun kuchli va koʻp qirrali platformani taqdim etadi. Bu uni plaginlar yoki yuklab olishlarni talab qilmasdan keng auditoriya uchun ochiq qiladi. Ushbu keng qamrovli qoʻllanma sizni HTML5 Canvas oʻyinlarini yaratish asoslari bilan tanishtiradi va jozibali hamda samarali oʻyinlar yaratish uchun oddiy sozlashdan tortib ilgʻor texnikalargacha boʻlgan hamma narsani qamrab oladi.

Nima uchun 2D oʻyin yaratish uchun HTML5 Canvas'ni tanlash kerak?

HTML5 Canvas 2D oʻyinlar yaratish uchun bir qancha afzalliklarni taqdim etadi:

Foydalanish imkoniyati: Oʻyinlar toʻgʻridan-toʻgʻri brauzerda ishlaydi, bu plaginlar yoki oʻrnatish zaruratini yoʻq qiladi. Bu turli xil operatsion tizimlar va qurilmalarda oson almashish va foydalanish imkonini beradi.
Platformadan mustaqillik: Canvas oʻyinlari platformaga bogʻliq emas, ya'ni ular Windows, macOS, Linux va zamonaviy veb-brauzerga ega mobil qurilmalarda ishlay oladi.
Ochiq standartlar: HTML5 Canvas ochiq veb-standartlarga asoslangan boʻlib, bu moslik va uzoq muddatli ishlashni ta'minlaydi.
Samaradorlik: Toʻgʻri optimallashtirish bilan Canvas 2D oʻyinlar uchun ajoyib samaradorlikni ta'minlay oladi. Zamonaviy brauzerlar Canvas operatsiyalari uchun apparat tezlashtirishni ta'minlaydi, bu esa silliq va sezgir oʻyin jarayoniga imkon beradi.
Katta hamjamiyat va resurslar: Keng va faol hamjamiyat sizning oʻyin yaratish yoʻlingizni qoʻllab-quvvatlash uchun koʻplab resurslar, darsliklar va kutubxonalarni taqdim etadi.
JavaScript integratsiyasi: Canvas keng qoʻllaniladigan va koʻp qirrali dasturlash tili boʻlgan JavaScript bilan chambarchas bogʻlangan.

Ishlab Chiqish Muhitini Sozlash

HTML5 Canvas oʻyinlarini yaratishni boshlash uchun sizga quyidagilar kerak boʻladi:

Matn muharriri: Oʻzingizga qulay boʻlgan kod muharririni tanlang, masalan, VS Code, Sublime Text yoki Atom.
Veb-brauzer: Chrome, Firefox, Safari yoki Edge kabi zamonaviy veb-brauzerdan foydalaning.
HTML, CSS va JavaScript boʻyicha asosiy bilimlar: Ushbu veb-texnologiyalarni fundamental tushunish juda muhim.

Canvasni sozlash uchun oddiy HTML fayl namunasi:


<!DOCTYPE html>
<html>
<head>
  <title>Mening Birinchi Canvas Oʻyinim</title>
  <style>
    body { margin: 0; }
    canvas { background: #eee; display: block; margin: 0 auto; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="640" height="480"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // O'yin kodingiz shu yerga yoziladi
  </script>
</body>
</html>

Ushbu kod "gameCanvas" ID'siga ega Canvas elementini yaratadi va uning kengligi va balandligini oʻrnatadi. Shuningdek, u Canvasga chizish uchun ishlatiladigan 2D renderlash kontekstini oladi.

HTML5 Canvas Oʻyin Yaratishning Asosiy Tushunchalari

Oʻyin Sikli

Oʻyin sikli har qanday oʻyinning yuragi hisoblanadi. Bu oʻyin holatini yangilaydigan, oʻyin grafikalarini renderlaydigan va foydalanuvchi kiritishlarini boshqaradigan uzluksiz sikldir. Oddiy oʻyin sikli quyidagicha koʻrinadi:


function gameLoop() {
  update();
  render();
  requestAnimationFrame(gameLoop);
}

function update() {
  // O'yin mantiqini yangilash (masalan, o'yinchi pozitsiyasi, dushman sun'iy intellekti)
}

function render() {
  // Canvasni tozalash
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // O'yin elementlarini chizish (masalan, o'yinchi, dushmanlar, fon)
}

requestAnimationFrame(gameLoop);

requestAnimationFrame — bu keyingi qayta chizishdan oldin chaqiriladigan funksiyani rejalashtiruvchi brauzer API'si. Bu silliq va samarali animatsiyani ta'minlaydi.

Shakllar va Rasmlarni Chizish

Canvas API toʻrtburchaklar, doiralar va chiziqlar kabi turli xil shakllarni chizish uchun metodlarni taqdim etadi. Shuningdek, u Canvasga tasvirlarni chizishga imkon beradi.

Toʻrtburchak chizish


ctx.fillStyle = 'red'; // To'ldirish rangini o'rnatish
ctx.fillRect(10, 10, 50, 50); // (10, 10) nuqtada eni 50 va balandligi 50 bo'lgan to'ldirilgan to'rtburchak chizish

ctx.strokeStyle = 'blue'; // Chiziq rangini o'rnatish
ctx.strokeRect(70, 10, 50, 50); // (70, 10) nuqtada eni 50 va balandligi 50 bo'lgan to'rtburchak konturini chizish

Doira chizish


ctx.beginPath();
ctx.arc(150, 35, 25, 0, 2 * Math.PI); // (150, 35) nuqtada radiusi 25 bo'lgan doira chizish
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath();

Rasm chizish


const image = new Image();
image.src = 'path/to/your/image.png';

image.onload = function() {
  ctx.drawImage(image, 200, 10); // Rasmni (200, 10) nuqtada chizish
};

Foydalanuvchi Kiritishlarini Boshqarish

Oʻyiningizni interaktiv qilish uchun siz klaviatura tugmalarini bosish, sichqonchani bosish va sensorli hodisalar kabi foydalanuvchi kiritishlarini boshqarishingiz kerak. Ushbu hodisalarni aniqlash uchun JavaScript hodisa tinglovchilaridan foydalanishingiz mumkin.

Klaviatura kiritishlari


document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowLeft') {
    // O'yinchini chapga harakatlantirish
  }
  if (event.key === 'ArrowRight') {
    // O'yinchini o'ngga harakatlantirish
  }
});

Sichqoncha kiritishlari


canvas.addEventListener('mousedown', function(event) {
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;

  // Bosish ma'lum bir sohada sodir bo'lganligini tekshirish
});

Toʻqnashuvni Aniqlash

Toʻqnashuvni aniqlash - bu ikki oʻyin obyekti bir-biriga yopishgan yoki kesishganini aniqlash jarayonidir. Bu oʻyinchi-dushman toʻqnashuvlari yoki snaryad zarbalari kabi koʻplab oʻyin mexanikalari uchun muhimdir.

Oddiy toʻrtburchakli toʻqnashuvni aniqlash


function checkCollision(rect1, rect2) {
  return (
    rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.y + rect1.height > rect2.y
  );
}

// Foydalanishga misol:
const player = { x: 10, y: 10, width: 32, height: 32 };
const enemy = { x: 100, y: 100, width: 32, height: 32 };

if (checkCollision(player, enemy)) {
  // To'qnashuv aniqlandi!
}

Spayt Animatsiyasi

Spayt animatsiyasi - bu tasvirlar (spaytlar) ketma-ketligini tezda koʻrsatish orqali harakat illyuziyasini yaratish uchun ishlatiladigan usul. Har bir tasvir animatsiyaning turli kadrini ifodalaydi.

Spayt animatsiyasini amalga oshirish uchun sizga spayt varagʻi kerak boʻladi, bu animatsiyaning barcha kadrlarini oʻz ichiga olgan bitta tasvirdir. Keyin spayt varagʻidan ma'lum kadrlarni Canvasga chizish uchun drawImage metodidan foydalanishingiz mumkin.


const spriteSheet = new Image();
spriteSheet.src = 'path/to/your/sprite-sheet.png';

const frameWidth = 32; // Har bir kadrning kengligi
const frameHeight = 32; // Har bir kadrning balandligi
let currentFrame = 0; // Joriy kadr indeksi

function animate() {
  // Spayt varag'idagi joriy kadrning x va y koordinatalarini hisoblash
  const spriteX = currentFrame * frameWidth;
  const spriteY = 0; // Barcha kadrlar bir qatorda joylashgan deb faraz qilamiz

  // Joriy kadrni Canvasga chizish
  ctx.drawImage(
    spriteSheet,
    spriteX,
    spriteY,
    frameWidth,
    frameHeight,
    100, // canvasdagi x koordinatasi
    100, // canvasdagi y koordinatasi
    frameWidth,
    frameHeight
  );

  // Joriy kadr indeksini oshirish
  currentFrame = (currentFrame + 1) % numberOfFrames; // numberOfFrames - animatsiyadagi umumiy kadrlar soni
}

Ilgʻor Texnikalar va Optimallashtirish

Oʻyin Holatlari

Turli oʻyin holatlarini (masalan, menyu, oʻyin, pauza, oʻyin tugadi) boshqarish oʻyin mantiqini tashkil qilish uchun juda muhimdir. Ushbu holatlarni boshqarish uchun oddiy holat mashinasidan foydalanishingiz mumkin.


let gameState = 'menu'; // Boshlang'ich o'yin holati

function update() {
  switch (gameState) {
    case 'menu':
      updateMenu();
      break;
    case 'game':
      updateGame();
      break;
    case 'pause':
      updatePause();
      break;
    case 'gameover':
      updateGameOver();
      break;
  }
}

function render() {
  // Canvasni tozalash
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  switch (gameState) {
    case 'menu':
      renderMenu();
      break;
    case 'game':
      renderGame();
      break;
    case 'pause':
      renderPause();
      break;
    case 'gameover':
      renderGameOver();
      break;
  }
}

Obyektlar Hovuzi

Obyektlarni tez-tez yaratish va yoʻq qilish hisoblash jihatidan qimmatga tushishi mumkin. Obyektlar hovuzi yangilarini yaratish oʻrniga obyektlarni qayta ishlatish usulini taqdim etadi. Bu, ayniqsa, snaryadlar kabi koʻplab dinamik yaratiladigan obyektlarga ega oʻyinlar uchun samaradorlikni sezilarli darajada oshirishi mumkin.


function createObjectPool(size, objectFactory) {
  const pool = [];

  for (let i = 0; i < size; i++) {
    pool.push(objectFactory());
  }

  return {
    get: function() {
      if (pool.length > 0) {
        return pool.pop();
      } else {
        // Ixtiyoriy ravishda hovuz bo'sh bo'lsa, yangi obyekt yaratish
        return objectFactory();
      }
    },
    release: function(object) {
      pool.push(object);
    }
  };
}

// Foydalanishga misol:
function createBullet() {
  return { x: 0, y: 0, speed: 10, active: false };
}

const bulletPool = createObjectPool(100, createBullet);

Plitkalar Xaritasi

Plitkalar xaritasi oʻyin dunyosini yaratish uchun keng tarqalgan usuldir. Plitkalar xaritasi - bu plitkalar toʻri boʻlib, har bir plitka kichik tasvir yoki naqshni ifodalaydi. Plitkalar xaritalari katta va batafsil oʻyin muhitlarini yaratish uchun samaralidir.

Plitkalar xaritasini amalga oshirish uchun sizga barcha alohida plitkalarni oʻz ichiga olgan plitkalar varagʻi kerak boʻladi. Shuningdek, sizga plitkalar xaritasining joylashuvini belgilaydigan ma'lumotlar tuzilmasi kerak boʻladi. Ushbu ma'lumotlar tuzilmasi oddiy 2D massiv boʻlishi mumkin.


const tileSheet = new Image();
tileSheet.src = 'path/to/your/tile-sheet.png';

const tileWidth = 32;
const tileHeight = 32;

const mapData = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

function drawTileMap() {
  for (let row = 0; row < mapData.length; row++) {
    for (let col = 0; col < mapData[row].length; col++) {
      const tileIndex = mapData[row][col];

      // Plitkalar varag'idagi plitkaning x va y koordinatalarini hisoblash
      const spriteX = (tileIndex % numberOfTilesPerRow) * tileWidth; // numberOfTilesPerRow - plitkalar varag'ining har bir qatoridagi plitkalar soni
      const spriteY = Math.floor(tileIndex / numberOfTilesPerRow) * tileHeight;

      // Plitkani Canvasga chizish
      ctx.drawImage(
        tileSheet,
        spriteX,
        spriteY,
        tileWidth,
        tileHeight,
        col * tileWidth, // canvasdagi x koordinatasi
        row * tileHeight, // canvasdagi y koordinatasi
        tileWidth,
        tileHeight
      );
    }
  }
}

Ishlash Samaradorligini Optimallashtirish

Canvas oʻyiningizni optimallashtirish, ayniqsa, kuchsizroq qurilmalarda silliq va sezgir ishlashga erishish uchun juda muhimdir.

Canvasni qayta chizishni minimallashtirish: Faqat oʻzgargan Canvas qismlarini qayta chizing. Qaysi hududlarni yangilash kerakligini kuzatish uchun iflos toʻrtburchaklar kabi usullardan foydalaning.
Spayt varaqlaridan foydalaning: HTTP soʻrovlari sonini kamaytirish uchun bir nechta tasvirlarni bitta spayt varagʻiga birlashtiring.
Toʻqnashuvni aniqlashni optimallashtirish: Samarali toʻqnashuvni aniqlash algoritmlaridan foydalaning. Koʻp sonli obyektlar uchun kvadradaraxtlar yoki toʻrlar kabi fazoviy boʻlinish usullaridan foydalanishni oʻylab koʻring.
Obyektlar hovuzidan foydalaning: Chiqindilarni yigʻish yukini kamaytirish uchun yangi obyektlar yaratish oʻrniga ularni qayta ishlating.
Qimmat hisob-kitoblarni keshlash: Keraksiz qayta hisoblashni oldini olish uchun qimmat hisob-kitoblar natijalarini saqlang.
Apparat tezlashtirishdan foydalaning: Canvas'ingiz apparat tomonidan tezlashtirilganligiga ishonch hosil qiling. Zamonaviy brauzerlar odatda apparat tezlashtirishni sukut boʻyicha yoqadi.
Kodingizni profillash: Kodingizdagi samaradorlikdagi toʻsiqlarni aniqlash uchun brauzer ishlab chiquvchi vositalaridan foydalaning. Ushbu vositalar optimallashtirishga muhtoj joylarni aniqlashga yordam beradi. Chrome DevTools va Firefox Developer Tools ajoyib tanlovlardir.
WebGL'ni koʻrib chiqish: Murakkabroq 2D oʻyinlar yoki 3D grafikalarni talab qiladigan oʻyinlar uchun GPU'ga kirishni ta'minlaydigan WebGL'dan foydalanishni oʻylab koʻring.

Foydali Kutubxonalar va Freymvorklar

Bir nechta JavaScript kutubxonalari va freymvorklari HTML5 Canvas oʻyinlarini yaratishni soddalashtirishi mumkin:

Phaser: Fizika, animatsiya va kiritishni boshqarish kabi keng koʻlamli xususiyatlarni taqdim etadigan mashhur 2D oʻyin freymvorki. (phaser.io)
PixiJS: Oʻyinlar va boshqa interaktiv ilovalarni yaratish uchun ishlatilishi mumkin boʻlgan tez va moslashuvchan 2D renderlash dvigateli. (pixijs.com)
CraftyJS: Oddiy va intuitiv API taqdim etadigan modulli oʻyin dvigateli. (craftyjs.com)
melonJS: Oddiylik va foydalanish qulayligiga e'tibor qaratadigan yengil HTML5 oʻyin dvigateli. (melonjs.org)

HTML5 Canvas Oʻyinlariga Misollar

Koʻplab mashhur va muvaffaqiyatli oʻyinlar HTML5 Canvas yordamida yaratilgan boʻlib, uning imkoniyatlarini namoyish etadi:

Agar.io: Oʻyinchilar kattalashish uchun kichikroq hujayralarni iste'mol qiladigan hujayralarni boshqaradigan ommaviy koʻp oʻyinchili onlayn harakat oʻyini.
Slither.io: Agar.io'ga oʻxshash konsepsiya, lekin oʻyinchilar hujayralar oʻrniga ilonlarni boshqaradi.
Kingdom Rush: HTML5 Canvas'ga port qilingan mashhur minora himoyasi oʻyini.
Cut the Rope: HTML5 Canvas yordamida amalga oshirilgan fizikaga asoslangan jumboq oʻyini.

Xulosa

HTML5 Canvas 2D oʻyinlar yaratish uchun kuchli va qulay platformadir. Oʻzining platformalararo mosligi, ochiq standartlari va katta hamjamiyati bilan Canvas jozibali va samarali oʻyinlar yaratish uchun mustahkam poydevor yaratadi. Ushbu qoʻllanmada muhokama qilingan asosiy tushunchalar va ilgʻor texnikalarni oʻzlashtirib, siz HTML5 Canvas'ning toʻliq imkoniyatlarini ochishingiz va oʻyin gʻoyalaringizni hayotga tatbiq etishingiz mumkin.

Rivojlanish jarayonini yanada soddalashtirish va oldindan tayyorlangan funksiyalardan foydalanish uchun mavjud kutubxonalar va freymvorklarni oʻrganishni unutmang. Oʻyin yaratish yoʻlingizda omad tilaymiz!