スクラッチで同色点つなぎ(広告のゲーム)の作り方

中級

今回つくるゲーム

難易度3 out of 5 stars

今回はYouTubeの広告で最近よく見る「同色点つなぎ」のゲームをスクラッチで作っていきます。コードはとてもかんたんなので、あとは色をどこに配置するかでゲームの難易度がかわります。是非自分だけのオリジナルゲームを作ってみてください。

この記事でも順番に作り方を解説しますがくわしくははYouTube動画で確認してください。


まずはゲームをプレイしてみましょう。

youtube解説

こちらの動画ではわかりやすくゲームの作り方を解説しています。実際に作るときはこの動画を見ながら作ることをお勧めします。チャンネル登録もよろしくお願いします!

[スクラッチ]同色点つなぎ(広告のゲーム)の作り方①

赤玉をつくる

まずは1色からつくっていきます。以下のように50×50の大きさで赤玉をつくります。

スクラッチで同色点つなぎ(広告のゲーム)の作り方

そして赤1のコードに以下のように書きます。

スクラッチで同色点つなぎ(広告のゲーム)の作り方

そうすると赤玉をクリックしてマウスを動かすと、マウスにそって線が引けます。ただ、これでは途中で線がとぎれてしまいます。それはなぜかというと、スクラッチのクローンは300個が限度だからです。それを回避するために以下のようにコードを書き換えます。

スクラッチで同色点つなぎ(広告のゲーム)の作り方

そうすると、上記のように、点線状にクローンが並び、クローンの上限を回避できます。
※線を早く引くととぎれとぎれになってしまいます。そうなったときに注意を出す方法は最後に説明します。

次に赤1を右クリックで複製して赤2をつくります。赤1→赤2、もしくは、赤2→赤1に線を引くと、線がとまるように赤1と赤2のコードを変更していきます。

スクラッチで同色点つなぎ(広告のゲーム)の作り方
スクラッチで同色点つなぎ(広告のゲーム)の作り方

青玉をつくる

ここまでできたら2色目の青玉を作っていきます。コードはほぼ同じです。以下のように青1と青2のスプライトをつくってください。これで青と赤の線が引けるようになったはずです。

スクラッチで同色点つなぎ(広告のゲーム)の作り方
スクラッチで同色点つなぎ(広告のゲーム)の作り方

2つの線が重なるとやりなおしにする

同色点つなぎは、色の線同士がぶつかってはいけません。いまのままだと以下のように交差してひけてしまいますが、そうなったらやりなおしになるように変更します。

スクラッチで同色点つなぎ(広告のゲーム)の作り方

赤1のコード

スクラッチで同色点つなぎ(広告のゲーム)の作り方

赤2のコード

スクラッチで同色点つなぎ(広告のゲーム)の作り方

青1のコード

スクラッチで同色点つなぎ(広告のゲーム)の作り方

青2のコード

スクラッチで同色点つなぎ(広告のゲーム)の作り方

ステージ管理

失敗=1になったらまたすぐに失敗=0にもどす必要があります。ステージ管理というスプライトを新たに作り、以下のようにコードを書きます。

スクラッチで同色点つなぎ(広告のゲーム)の作り方

これで線を書く基本的なコードは完成です。

ゲームを組み立てていく

ではここからゲームを組み立てていきます。

ステージ管理のコード

先ほど作ったステージ管理のスプライトに以下のようにコードを追加します。成功するとステージが進んでいくようにします。

スクラッチで同色点つなぎ(広告のゲーム)の作り方

赤1のコード

そして、それぞれのステージでの色の配置をつくっていきます。またこのタイミングで黄色と緑の玉も追加しています。

スクラッチで同色点つなぎ(広告のゲーム)の作り方

赤2

スクラッチで同色点つなぎ(広告のゲーム)の作り方

青1

スクラッチで同色点つなぎ(広告のゲーム)の作り方

青2

スクラッチで同色点つなぎ(広告のゲーム)の作り方

黄1

スクラッチで同色点つなぎ(広告のゲーム)の作り方

黄2

スクラッチで同色点つなぎ(広告のゲーム)の作り方

緑1

スクラッチで同色点つなぎ(広告のゲーム)の作り方

緑2

スクラッチで同色点つなぎ(広告のゲーム)の作り方

すべてのコード

これでコードは完成です。ステージ1・2・3を受け取った時のそれぞれの球の場所を変えることでいろいろなパターンの問題を作ることができます。

是非オリジナルの同色点つなぎゲームをつくってみてください!

すべてのコードはこちらから確認できます。

同色点つなぎ

コメント