案件獲得できなかったら全額返金!未経験からプロのエンジニアスキルを身につけ、フリーエンジニアとして稼げるまで徹底サポート。オンラインでも教室でも学習可

これなら誰でも簡単にプログラミングが始められる!HackforPlayの紹介【スキンの使い方】

Pocket

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になったらゲームクリアになるように、コードを追加してみましょう

次のコードをコピーして、プレイヤーのコードの下に貼り付けましょう

このように貼り付けます

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 文の動きの流れは、次のようになります

これで、「スコアが2以上なら〇〇」というコードになります

最後に、それらの周りを囲むように書いてある、 Hack.onscorechange = () => { } というコードについて説明します。これは、スコアが変化したときに実行されるイベントを表しています。イベントは、「〇〇したときに△△する」といった動作を行わせたいときに使われます

ハックフォープレイでは、何もないところにコードを書いたら、ゲームが始まったときの1度だけしかコードが実行されません。ゲームが始まったときはスコアは0なので、ゲームクリアにはなりません。スコアが変わるたびに、何度もスコアを確認して、スコアが2以上になるときを逃さないようにする必要があります

そこで使うのが、 Hack.onscorechange イベントです。イベントは、第4回の記事で紹介しました。このイベントを使えば、「スコアが変わるたびに〇〇する」が実現できるのです。このように使います

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

投稿者:プロナビ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか?オンラインのプログラミングスクール「TechAcademy」のメンターが対応。

この記事が気に入ったら
いいね!しよう

プロナビの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る