【JavaScript】オブジェクトの動きに摩擦を加える【ゲーム制作】

オブジェクトをアニメーションで動かすスクリプトに摩擦を追加する。摩擦を加えることで徐々に動きを止めていく。「【JavaScript】ボールを壁で跳ね返させる」のBoundクラスに、たった3行加えただけ。

まず、猫画像を表示するCatクラス。

/**
 * 猫画像を表示(cat.js)
 */
export class Cat {
	constructor(parent = undefined, x = 0, y = 0) {
		if (parent !== undefined) {
			this._parent = parent;
		}
		this._x = x;
		this._y = y;
		this._rotation = 0;
		this._img;
		
		this._init();
	}

	//////////////////////////////////
	// Private and protected
	//////////////////////////////////

	_init() {
		if (this._parent !== undefined) {
			this._ctx = this._parent;
		}
		this._img = new Image();
		this._img.src = "./cat.png";
		this.draw();
	}

	//////////////////////////////////
	// Public
	//////////////////////////////////

	draw() {
		// 現在の描画状態を保存
		this._ctx.save();
		// コンテキストの座標を変更し、キャンバス中央に移動
		this._ctx.translate(this._x, this._y);
		// コンテキストの角度をラジアン値で指定
		this._ctx.rotate(this._rotation);
		this._ctx.drawImage(this._img, -(this._img.width / 2), -(this._img.height / 2));
		// save()で保存した描画状態を復元
		this._ctx.restore();
	}

	//////////////////////////////////
	// Getters/Setters
	//////////////////////////////////

	get x() {
		return this._x;
	}
	set x(x) {
		this._x = x;
	}

	get y() {
		return this._y;
	}
	set y(y) {
		this._y = y;
	}

	get width() {
		return this._img.width;
	}

	get height() {
		return this._img.height;
	}

	get rotation() {
		return this._rotation;
	}
	set rotation(rotation) {
		this._rotation = rotation;
	}
}

次に、Boundクラスに摩擦処理を加えたFrictionクラス。

import { Cat } from "./cat.js";

/**
 * 摩擦をシミュレートする(friction.js)
 */
export class Friction {
	constructor() {
		this._cvs = document.getElementById('canvas');
		this._ctx = this._cvs.getContext('2d');
		this._leftEnd = 0;                  // キャンバス左端
		this._rightEnd = this._cvs.width;   // キャンバス右端
		this._topEnd = 0;                   // キャンバス上端
		this._bottomEnd = this._cvs.height; // キャンバス下端
		this._cat;
		this._vx = 0;
		this._vy = 0;
		this._ax = 0;
		this._ay = 0;
		this._friction = 0.98;	// ①摩擦力
		this._cvs.setAttribute('tabindex', 0);
		this._cvs.addEventListener('keydown', this._onKeydown.bind(this));
		this._cvs.addEventListener('keyup', this._onKeyUp.bind(this));
		// タイマー関連
		this._animID;
		this._isAnim = 0;
		this._FPS = 60;
		this._frame = 0;
		this._startTime;
		this._nowTime;
		
		this._init();
	}

	//////////////////////////////////
	// Private and protected
	//////////////////////////////////

	_init() {
		this._cvs.style.backgroundColor = "#eeeeee";
		this._cat = new Cat(this._ctx, this._cvs.width / 2, this._cvs.height / 2);

		this._startTime = performance.now();
		this._mainLoop();
	}

	_mainLoop() {
		this._nowTime = performance.now();
		let elapsedTime = this._nowTime - this._startTime;
		let idealTime = this._frame * (1000 / this._FPS);
		if (idealTime < elapsedTime) {
			this._ctx.clearRect(0, 0, this._cvs.width, this._cvs.height);
			this._vx += this._ax;
                        this._vy += this._ay;

			// ②摩擦をかけて速度を減退させる
			this._vx *= this._friction;
			this._vy *= this._friction;

			this._cat.x += this._vx;
			this._cat.y += this._vy;

			if (this._cat.x + this._cat.width / 2 > this._rightEnd) {
				this._cat.x = this._rightEnd - this._cat.width / 2;
				this._vx *= -1;
			} else if (this._cat.x - this._cat.width / 2 < this._leftEnd) {
				this._cat.x = this._leftEnd + this._cat.width / 2;
				this._vx *= -1;
			} if (this._cat.y + this._cat.height / 2 > this._bottomEnd) {
				this._cat.y = this._bottomEnd - this._cat.height / 2;
				this._vy *= -1;
			} else if (this._cat.y - this._cat.height / 2 < this._topEnd) {
				this._cat.y = this._topEnd + this._cat.height / 2;
				this._vy *= -1;
			}

			this._cat.draw();

			this._frame++;

			if (elapsedTime >= 1000) {
				this._startTime = this._nowTime;
				this._frame = 0;
			}
		}
	
		this._animID = requestAnimationFrame(this._mainLoop.bind(this));
	}

	//////////////////////////////////
	// Handlers
	//////////////////////////////////

	_onKeydown(e) {
		switch (e.keyCode) {
			case 37: // 左矢印キー
				this._ax = -0.2;
				break;
			case 39: // 右矢印キー
				this._ax = 0.2;
				break;
			case 38: // 上矢印キー
				this._ay = -0.2;
				break;
			case 40: // 下矢印キー
				this._ay = 0.2;
				break;
		}
	}

	_onKeyUp(e) {
		this._ax = this._ay = 0;
	}
}

①が摩擦力を表すthis._friction変数。

②やっていることは、ただ速度に摩擦（小数）をかけて速度を減退させているだけ。理屈の上では速度が0になることはない。しかし、極めて小さな値のため、画面上では静止した状態にできる。

このやり方は厳密な摩擦のシミュレーションではないが、ゲームなどで使う場合、プレイヤーの目に違いとしては現れない。

requestAnimationFrameを使ったゲームループの実装は、「【JavaScript】requestAnimationFrameでゲームループを作る」を参照。

リンク