Chromeの恐竜ゲームをスクロールで再現してみた
Chromeの恐竜ゲームとは
オフライン時にChromeブラウザで遊べるミニゲームです
完成したもの
ページのスクロールに応じて恐竜が走ります
※ブラウザサイズによって挙動がちょっと不安定かもです🙇♂️
作り方
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の使用方法はざっくりとしか書いてません
詳しく知りたい方は公式の方を見ていただけると!
横スクロール
縦スクロールを横スクロールに変換します
まずアニメーションには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のソースはこちらになります
Discussion