2048もどきをPixi.js + Typescript で作ってみた

 javascript typescript GitHub pixi.js

勉強がてら暇つぶしに2048もどきをつくりました。

つくったもの

Screenshot 20200310 083616

https://kuroneko46.github.io/2048/index.html

PCでもスマホでも遊べます。
キーボード操作とスワイプ操作に対応してます。

GitHubも公開してます。

https://github.com/kuroneko46/2048

2048とは

2014年頃にGabriele Cirulli氏が作成したブラウザゲームで、数字を動かして、同じ数字同士を重ねると合体しより大きい数字を作っていき2048を作ったらクリアというシンプルな内容のゲームです。

オリジナルと違うところ

  • 初期スポーンが3つ (オリジナルは2つ)
  • スポーン数値に 8 がある

難易度に影響があったので本家に寄せました。

他にも挙動で違うところはあるとおもいますが、もどきなので許してください。

実装について

使用ライブラリ

pixi.js

WebGLで2Dを描画するためのライブラリ。RPGツクールMVにも使われてます。APIがFlashのActionScriptに似ていてActionScriptでなにか作った事がある人でもそうでない人でもとっつきやすいライブラリだと思います。

Hammer.js

スマホなどのタッチスクリーンによるジェスチャー操作を実装するためのライブラリです。これ一つで簡単にスワイプからピンチ、回転までジェスチャー操作を取得することができるのでWebアプリでジェスチャーを実装するのにとてもよいです。

例えば左方向のスワイプを検知するには以下のようにします。

import Hammer from 'hammerjs'
const hammer = new Hammer(document.querySelector('body'))
hammer.on('swipeleft', () => {
  console.log('swiped left!')
})

タイル(数字)の管理方法

マスを作って多次元配列で管理するのではなく、普通にタイル一つ一つをオブジェクトとして管理するようにしてます。このほうがPixi.jsと相性がいいんですよね。

詳細が気になる方はGitHubで公開されているソースのsrc/components/Board.ts, src/components/Tile.ts を参照してください。


仕様がシンプルで教材には良いなとおもったので、ぜひ推しの言語やライブラリで一度作ってみるのをおすすめします。

Published at 2020-03-10 02:28