Image from Gyazo
今回はスキンの使い方を紹介します。スキンはハックフォープレイの基本的な機能ですが、マスターすれば作れるゲームの幅がかなり広がります。まずは、スキンを使ってできることを見ていきましょう
①ドラゴンを操作する(プレイヤー+ドラゴン)
②鬼ごっこ(コウモリ+男の子)
③何でも食べるスライム(ダイヤモンド+色々なスキン)
おまけ:スコアでゲームクリア
それでは、それぞれの作り方を順番に紹介していきます
最後に、③と相性のいい「スコア」の使い方も紹介します

1. ドラゴンを操作する(プレイヤー+ドラゴン)

プレイヤーのスキンをドラゴンに変えることで、ドラゴンを自由に操作することができます
コードの上の方にある、 Skin.ナイト と書かれている部分をクリックしましょう。すると、スキンの一覧が出てきます
Image from Gyazo
Skin.ドラゴン をクリックしましょう。そのあと、プレイボタンを押しましょう
Image from Gyazo
プレイヤーの見た目がドラゴンになりました!
今までのプレイヤーと同じように、動いたり、攻撃したりといったことができます。ただし、火を吹くことは(このままだと)できません。火を吹くコードをプレイヤーに付け足す必要があります

2. 鬼ごっこ(コウモリ+男の子)

男の子のキャラクターが自分を追いかけてくるゲームを作ってみます
いちから作ろうとすると大変ですが、今回は、自分を追いかけてくるモンスターである、コウモリを使います。まずは、モンスターのコウモリを出しましょう
Image from Gyazo
コウモリが出てきました。では、コウモリのコードを見てみましょう
Image from Gyazo
この中にも、 Skin.コウモリ というスキンが使われています。クリックして、 Skin.ボーイ をクリックしましょう。そのあと、プレイボタンを押しましょう
Image from Gyazo
男の子が追いかけてくるゲームになりました。これも他のスキンに変えることができます

3. 何でも食べるスライム(ダイヤモンド+色々なスキン)

食いしん坊なスライムが、お花や家などのアイテムを食べるゲームを作ってみます
まずは、プレイヤーのスキンをナイトからスライムに変えましょう
Image from Gyazo
次に、ダイヤモンドを出します。そして、スキンをダイヤモンドからフラワーに変えてみましょう
Image from Gyazo
すると、スライムを操作して、お花を食べることが出来るようになります
Image from Gyazo
もう一つダイヤモンドを出します。今度は、ダイヤモンドの位置を次のように (10, 5) に変えて、スキンをダイヤモンドからツリーに変えてみましょう
Image from Gyazo
スライムが色んなものを食べるようになりました
でも、これだけではゲームらしくありませんね。なぜなら、ゲームクリアがないからです
実は、ダイヤモンドを使ったのは理由があります。ダイヤモンドには「スコアを1ふやす」というコードが最初から入っているのです。これを利用して、スコアが一定以上になったらゲームクリアになるようにしてみましょう

おまけ スコアでゲームクリア

スコアが10になったらゲームクリアになるように、コードを追加してみましょう
次のコードをコピーして、プレイヤーのコードの下に貼り付けましょう

Hack.onscorechange = () => {
    if (Hack.score >= 2) {
        // スコアが 2 以上なら、ゲームクリア!
        Hack.gameclear();
    }
};

このように貼り付けます
Image from Gyazo
貼り付けたら、プレイボタンを押してゲームを始めてみましょう。そして、お花と木を食べてみます……
Image from Gyazo
ゲームクリアになりました!
もっと色んなものを置いたら、 2 という数字の部分を、もっと大きな数にしましょう。この数字の数だけアイテムを食べると、ゲームクリアになります

コードの説明

コードの中身はこうなっています。まず、Hack.gameclear() は、「ゲームクリアにする」という意味の関数(かんすう)です
その1つ上の行にある日本語の文章は、ただの説明書きなので、コード上は無視されます
さらに上に書かれている、 Hack.score >= 2 は、「スコアが2以上なら」という意味の、条件式(じょうけんしき)です
Hack.gameclear() と Hack.score >= 2 の2つを組み合わせると、「スコアが2以上ならゲームクリアにする」という意味になります。だから、2つアイテムを拾うとゲームクリアになったんですね
さて、 Hack.score >= 2 の周りには、 if とか、 () とか、 {} などの記号も一緒に書かれています。これは if 文(イフぶん)と呼ばれるもので、次の3行で1セットになっています

if (Hack.score >= 2) {
}

if 文の動きの流れは、次のようになります

// スコアが2以上なら①に、そうでなければ②にジャンプする
if (Hack.score >= 2) {
    // ①
    // →次は②にジャンプ
}
// ②

これで、「スコアが2以上なら〇〇」というコードになります
最後に、それらの周りを囲むように書いてある、 Hack.onscorechange = () => { } というコードについて説明します。これは、スコアが変化したときに実行されるイベントを表しています。イベントは、「〇〇したときに△△する」といった動作を行わせたいときに使われます
ハックフォープレイでは、何もないところにコードを書いたら、ゲームが始まったときの1度だけしかコードが実行されません。ゲームが始まったときはスコアは0なので、ゲームクリアにはなりません。スコアが変わるたびに、何度もスコアを確認して、スコアが2以上になるときを逃さないようにする必要があります
そこで使うのが、 Hack.onscorechange イベントです。イベントは、第4回の記事で紹介しました。このイベントを使えば、「スコアが変わるたびに〇〇する」が実現できるのです。このように使います

// スコアが変わるたびに、①にジャンプする
Hack.onscorechange = () => {
    // ①
};

これでコード全体の流れがわかりました。スコアの仕組みは様々なゲームに応用できるので、 if 文の中身や実行する内容を変えたりして、色々と活用してみて下さい