Html Canvas API ni o'zlashtiraylik 🔥

html Canvas API asoslarini o'rganadi va ushbu maqolada o'rganadigan tushunchalar yordamida Ping Pong o'yinini yaratadi.

Maqola uchun qozon plitasi

CSS

html, * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body {
   text-align: center;
}
.grid {
   background: lightgreen;
   margin: auto;
}
p:nth-child(1) {
   padding: 10px 20px;
   text-align: center;
   font-family: ubuntu;
   font-weight: bolder;
   font-size: 25px;
   text-transform: uppercase;
   color: gray;
}

HTML

<canvas class='grid' width="1000" height="500">
  
</canvas>

JAVASCRIPT

let ctx = document.querySelector("canvas").getContext("2d");

Eslatma : Ushbu maqolada biz faqat java skript faylini boshqaramiz.

HTML Canvas API asoslari

1. Chiziq yaratish

function createLine(x1, y1, x2, y2) {
       ctx.lineWidth = 5;
       ctx.strokeStyle = "red";
       ctx.beginPath();
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
       ctx.closePath();
}
createLine(0, 0, 10, 10);

lineWidth: Bu parametr chiziq qalinligini beradi.

strokeStyle:Ushbu parametr chiziqqa maxsus rang beradi.

moveTo(): ​​Biz tuvalda chiziq chizmasdan biror nuqtaga o'tmoqchi bo'lsak, biz ko'chirish buyrug'idan foydalanamiz.

lineTo(): ​​Agar biz joriy pozitsiyadan kerakli pozitsiyaga chiziq chizmoqchi bo'lsak, biz ushbu funksiyadan foydalanamiz.

stroke():Biz lineTo() buyrug'ini ishlatganimizda, oxirida stroke() buyrug'ini ishlatmagunimizcha, ko'rinadigan chiziqqa chizilmaydi.

2. To‘rtburchakni yaratish

function createRect(x1, y1, width, height) {
       ctx.fillStyle = "red";
       ctx.fillRect(x1, y1, width, height);
 }
createLine(0, 0, 10, 10);

fillStyle:U yaratiladigan to'rtburchakga maxsus rang berish uchun ishlatiladi.

fillRect():Ushbu buyruq to'rtburchak yaratish uchun ishlatiladi.

3. Davrani yaratish

function createCircle(cx, cy, radius) {
       ctx.fillStyle = "red";
       ctx.beginPath();
       ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
       ctx.stroke();       
       ctx.fill();
       ctx.closePath();
}
createCircle(20, 20, 10);

arc():Arc buyrug'i markaz x koordinatasini, markaz y koordinatasini, radiusni, boshlang'ich burchakni va yakuniy burchakni parametr sifatida qabul qiladigan yoy yaratish uchun ishlatiladi.

🕙 PING-PONG O'yinini yarataylik 🕟

let circle = {
   x: 100,
   y: 100,
   radius: 10,
   dx: 2,
   dy: 2
}
let rect = {
   x: 488,
   y: 0,
   width: 10,
   height: 50,
}
let line = {
   init_x: 100,
   init_y: 100,
   fin_x: 0,
   fin_y: 0
 }
let ctx = document.querySelector("canvas").getContext("2d");
function draw_circle() {
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
   ctx.beginPath();
   ctx.arc(circle.x , circle.y, circle.radius, 0, Math.PI * 2);
   ctx.fillStyle = 'red';
   ctx.fill();
   ctx.fillStyle = 'blue';
   ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
}
function draw_animated_circle() {
   draw_circle(circle);
   circle.x += circle.dx;
   circle.y += circle.dy;
   line.init_x = line.fin_x
   line.init_y = line.fin_y
   line.fin_x = circle.x;
   line.fin_y = circle.y;
   if(circle.x + circle.radius ==rect.x && 
   (  circle.y + circle.radius >rect.y && 
      circle.y + circle.radius <rect.y +
      rect.height + 2 * circle.radius)
   ) {
      circle.dx *= -1;
   }
   if(circle.x + circle.radius >= ctx.canvas.width || 
      circle.x  <= circle.radius
   ) {
      if(circle.x + circle.radius >= ctx.canvas.width){
         alert("gameover");
         window.location.reload();
      }
      circle.dx *= -1;
   }
   if(circle.y + circle.radius >= ctx.canvas.height || 
       circle.y  <= circle.radius
   ) {
        circle.dy *= -1;
   }
   requestAnimationFrame(draw_animated_circle);
}

function init() {
   document.querySelector("body").addEventListener("keydown", 
    (e) => {
          if(e.keyCode == 38 &&rect.y >= 2) {
             rect.y -= 10 
          }
          if(e.keyCode == 40 && 
             rect.y +rect.height < ctx.canvas.height - 7
          ) {
             rect.y += 10 
          }
   })   
   draw_animated_circle();
}
init();

requestAnimationFrame : usul brauzerga animatsiyani amalga oshirmoqchi ekanligingizni bildiradi va keyingi qayta bo'yashdan oldin brauzer animatsiyani yangilash uchun belgilangan funksiyani chaqirishini so'raydi. Usul qayta bo'yashdan oldin chaqiriladigan argument sifatida qayta qo'ng'iroqni oladi.

CodePen Biz yaratgan stol tennisi oʻyiniga havola.

Eslatma : Ushbu asosiy tushunchalardan foydalanib, siz ko'plab chiroyli animatsiyalar va boshqa ko'p narsalarni yaratishingiz mumkin.

Tuval haqida ko'proq ma'lumot olish uchun MDNhujjatlariga murojaat qilishingiz mumkin.