[マイおもちゃ]動くボール1-JavaScript

ボールを弾く(ボールを捕まえることもできる!)

製造のきっかけ

Javaを勉強しているうちに、気軽に面白いアイテムを作るために、Interactive Developer金鍾民のYouTubeに行きました.実際、canvasも大まかに探したすべてなので、知りたい気持ちもあります.
こうして最初のビデオを申請しました...プログラミングが素敵に見えます!
現在,オブジェクト向けの言語を学習しているが,実際にはプログラミング方式はオブジェクト向けの方式とは程遠い.
キム・ジョンミンはオブジェクト向けにシナリオ言語JSを実現した.
難しそうに見えますが、コードは確かに簡潔なので、そのようにすることにしました.

🔨 さぎょうコード

まず、キャンバスを予め配置しておきます.

class App {
  constructor() {
    // canvas를 생성해주고
    this.canvas = document.createElement("canvas");
    // body에 추가한다.
    document.body.appendChild(this.canvas);

    this.ctx = this.canvas.getContext("2d");
    // 디바이스에 따라 선명도를 올려주기 위해 사용
    this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;

    // 창 사이즈가 변할 때마다 캔버스를 변화시켜줘야 하기에 선언
    window.addEventListener("resize", this.resize.bind(this), false);
    this.resize();

    // 움직이는 공을 위한 애니메이션 함수
    window.requestAnimationFrame(this.animate.bind(this));
  }

  resize() {
    // resize때마다 canvas의 width, height를 창 사이즈로 만들어 주기 위함.
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.canvas.width = this.stageWidth * this.pixelRatio;
    this.canvas.height = this.stageHeight * this.pixelRatio;
    // 선명도를 좋게 해주기 위함
    this.ctx.scale(this.pixelRatio, this.pixelRatio);
  }

  animate() {
    window.requestAnimationFrame(this.animate.bind(this));
  }
}
// 캔버스 실행
window.onload = () => {
  new App();
};

キム・ジョンミンの動画を見ると、ほとんどこのようにキャンバスを事前に配置しています.
最初はよくわかりませんでしたが、何度かやってみるとこの方法が気持ちがいいことがわかりました.

-ボールを作る

キャンバスはもうできました.ボールを作ってあげましょう.
まず、ボールが出る位置を指定します.

export class Ball {
  // 처음 공의 위치를 화면 내에 랜덤하게 줄 예정이기에, 현재화면의 width와 height를 가져온다.
  constructor(stageWidth, stageHeight, radius, speed) {
    this.radius = radius;
    // 공이 움직이는 속도
    this.vx = speed;
    this.vy = speed;

    // 우선 공의 지름을 잡는다.
    const diameter = this.radius * 2;
    // 공이 화면 밖에 생성되면 안되기 때문에 원의 중앙(x, y)을 잡아준다.
    this.x = this.radius + Math.random() * (stageWidth - diameter);
    this.y = this.radius + Math.random() * (stageHeight - diameter);
  }
}

ボールの位置が決まったので、今からボールを作りましょう.

import { Ball } from "./ball.js";

class App {
  constructor() {
	...
    // 공을 만들어 준다.
    this.ball = new Ball(this.stageWidth, this.stageHeight, 60, 10);
    window.requestAnimationFrame(this.animate.bind(this));
  }
  ...
}

export class Ball {
  constructor(stageWidth, stageHeight, radius, speed) {
	...
  }
  // 공을 그릴 함수
  draw(ctx) {
    ctx.fillStyle = "yellow";
    ctx.beginPath();
    // 현재 중심 (x, y)에서 원을 만든다.
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }
}

乾杯.黄色いボールを描いた.アニメーションを利用してボールを移動しましょう.

-ボールを動かす

export class Ball {
  constructor(stageWidth, stageHeight, radius, speed) {
    ...
  }

  draw(ctx, stageWidth, stageHeight) {
    // 지속적으로 값이 증가함으로써 공이 움직이는 것처럼 보일 예정
    this.x += this.vx;
    this.y += this.vy;
	// 공이 화면에 닿으면 튀게끔 함수를 만듦
    this.bounceWindow(stageWidth, stageHeight);

    ctx.fillStyle = "yellow";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }

  bounceWindow(stageWidth, stageHeight) {
    const minX = this.radius;
    const maxX = stageWidth - this.radius;
    const minY = this.radius;
    const maxY = stageHeight - this.radius;
	// 창 끝에 닿으면
    if (this.x <= minX || this.x >= maxX) {
      // 증가 값을 음수로 만들어 반대로 이동하게 한다.
      this.vx *= -1;
      this.x += this.vx;
    }
    if (this.y <= minY || this.y >= maxY) {
      this.vy *= -1;
      this.y += this.vy;
    }
  }
}

import { Ball } from "./ball.js";

class App {
  constructor() {
	...
    // 공을 만들어 준다.
    this.ball = new Ball(this.stageWidth, this.stageHeight, 60, 10);

    window.requestAnimationFrame(this.animate.bind(this));
  }

  ...

  animate() {
    window.requestAnimationFrame(this.animate.bind(this));
	// 만들어진 공을 그린다.
    this.ball.draw(this.ctx, this.stageWidth, this.stageHeight);
  }
}

-エラーを検出🔍

ボールは弾けるけど...残された残片がなくなり、このような現象が発生したようだ.
animate関数でアニメーションを実行するたびにcanvasが明確に変更されます.

-エラー修復ライブラリ

  animate() {
    window.requestAnimationFrame(this.animate.bind(this));
    // 애니메이션 함수 호출시 캔버스 clear
    this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);

    this.ball.draw(this.ctx, this.stageWidth, this.stageHeight);
  }

結果...

ボールが跳ねる動作になった!今から真ん中の積み木を作って、積み木にぶつかっても弾かせようとしますが、文章が長くなるような気がするので、次の文章を書きます.😀