Chromeの恐竜ゲームをスクロールで再現してみた

Chromeの恐竜ゲームとは

オフライン時にChromeブラウザで遊べるミニゲームです

完成したもの

ページのスクロールに応じて恐竜が走ります
※ブラウザサイズによって挙動がちょっと不安定かもです🙇‍♂️
https://git-gen.github.io/dino_scroll.html

作り方

cssでドット絵を用意する

恐竜・サボテン・雲のcssを用意します
cssでドット絵を描く方法は単純で、
基準とした要素に擬似要素のbox-shadowを使ってひたすらドットを打ちます
ソースコード見て頂けるとわかると思うのですが、結構面倒なんでエクセルとか使うと楽です

（例）■■□■

.dinosaur {
  position: relative;
  width: 40px;
  height: 10px;

  &::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    transform: scale(0.3, 0.3);
	  box-shadow:
            0 0 $black,
            10px 0 $black,
            30px 0 $black;
  }
}

レイヤーを分けてパララックスを活用する

レイヤー要素をキャラクター・背景・地面と分ける事で、キャラクターが前進しているしている様に見せます

• game_layer
  • 恐竜とUIなど
  • 画面固定
• cloud_layer
  • 雲
  • 遅くスクロールする
• map_layer
  • 地面・サボテン
  • 速くスクロールする

アニメーションを付与する

アニメーションの付与にはjsの「GSAP」というライブラリを使用します
scrollTriggerという機能をつかいアニメーションをつけるのですが、
GSAPの使用方法はざっくりとしか書いてません
詳しく知りたい方は公式の方を見ていただけると！
https://greensock.com/docs/

横スクロール

縦スクロールを横スクロールに変換します
まずアニメーションにはxPercentを使用します
xPercentはX軸方向に要素を動かすアニメーションです
次に重要なのはpinというオプションで、
これをtrueにするとアニメーション実行中は要素が画面に固定されます

// 背景のスクロール
gsap.to(".map_layer", {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    start: "top top",
    end: "+2000",
    onUpdate: () => {
      dino_run();
    }
  }
});

// 雲のスクロール
gsap.to(".cloud_layer", {
  xPercent: -40,
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    start: "top top",
    end: "+2000",
  }
});

恐竜のアニメーション

恐竜がサボテンをジャンプで避けるアニメーションをつけます
実際には恐竜がその場で跳ねているアニメーションをつけます
gsap.toで恐竜が跳ねてgsap.fromToで恐竜が元の位置に戻ると行った感じ
toggleClassを使うとアニメーション実行中に対象要素にclassを付与する事もできます

gsap.to(".dinosaur", {
  y: -130,
  ease: "Power3.inOut",
  scrollTrigger: {
    trigger: ".game_layer",
    scrub: 1,
    start: "+250",
    end : "+300",
    toggleClass: {
      targets: ".dinosaur",
      className: "jump"
    },
  }
});
gsap.fromTo(".dinosaur", {
    y: -130,
  },
  {
    y: 0,
    ease: "Power3.inOut",
    scrollTrigger: {
      trigger: ".game_layer",
      scrub: 1,
      start: "+300",
      end: "+350",
      toggleClass: {
        targets: ".dinosaur",
        className: "jump"
      },
    }
  }
);

その他

その他に恐竜の足をバタつきやゲームオーバーの表記はGSAPからのコールバックで行っています
使ったのはこちら

• onComplete
  • アニメーションが完了した際に呼び出される
• onUpdate
  • アニメーションが更新される度に呼び出される

github

上記の手順で完成です！
github pagesのソースはこちらになります