文字を入れ替えるワードパズルゲームを作る！なぞって学ぶプログラミングドリル(Processing / p5js)

なぞって学ぶプログラミングドリルとは？

この教材は小学生〜高校生までのプログラミング初心者向けに作られた、ゲームプログラミング教材です。
この教材にサンプルコードは登場しません。
Scratchのブロックで構成されたアルゴリズム（設計）だけを提示します。
アルゴリズムをなぞって、コードにおきかえていきましょう。
なお、Processingやp5.jsを想定してアルゴリズムを設計しています。

今回作るもの

ワードパズルゲームです。言葉を入れ替えて言葉、文章を完成させましょう。

動画で学習する

初めての方は動画を見ながらチャレンジしながらの方がわかりやすいと思います。

マスとなる四角形を1つだけ表示

横幅100、縦幅100の四角形を表示します。

Java(Processing)

void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  fill(255);
  rect(0, 0, 100, 100);
}

JavaScript(p5js)

function setup(){
  createCanvas(600, 400);
}
function draw(){
  background(0);
  fill(255);
  rect(0, 0, 100, 100);
}

​

マスを横一列に表示

横に6個、100ずつずらしてマスをしき詰めます。

繰り返し処理を使ってマス横一列に表示

同じようなコードは繰り返し処理を使いましょう。

繰り返し処理を使って縦にも表示

マスの上に文字を表示（とりえあず「？」を表示）

マスの上にマス番号を書く

マス番号は0からスタートすることに注意してください。

お題を設定する

ここではお題を「りもこんてんこもり」にしましょう。
文字数を超えた分のマスは非表示にします。
「文字数を数える」プログラムはちょっと難しいです。ヒントは「length」です。文字数を数えるプログラミング方法をネットで検索して調べてみましょう。

マスに1文字ずつ書く

文字を抜き出すプログラムはちょっと難しいです。ヒントは「substring」です。文字を抜き出すプログラミング方法を検索して探してみましょう。

お題の文字をランダムにシャッフルする

シャッフルは難しいです。
文字をランダムにシャッフルした結果を返す関数、shuffleStringと、後に使うchangeStringを作っておきました。コピペして使いましょう。関数の中身を理解する必要はありません。

Java (Processing)

// 文字をシャッフルして返す
String shuffleString(String str){
 for(int i=0; i<999; i++){
   int from = int(random(0, str.length()));
   int to = int(random(0, str.length()));
   str = changeString(str, from, to);
 }
 return str;
}

// 文字を入れ替えて返す
String changeString(String str, int from, int to){
 String res = "";
 ArrayList<String> list = new ArrayList<String>();
 for(int i=0; i<str.length(); i++){
   list.add(str.substring(i, i+1));
 }
 String f = list.get(from);
 String t = list.get(to);
 list.set(from, t);
 list.set(to, f);
 for(int i=0; i<list.size(); i++){
   res += list.get(i);
 }
 return res;
}

JavaScript (p5js)

// 文字をシャッフルして返す
function shuffleString(str){
 for(let i=0; i<999; i++){
   let from = int(random(0, str.length));
   let to = int(random(0, str.length));
   str = changeString(str, from, to);
 }
 return str;
}

// 文字を入れ替えて返す
function changeString(str, from, to){
 let res = "";
 let list = [];
 for(let i=0; i<str.length; i++){
   list.push(str.substring(i, i+1));
 }
 let f = list[from];
 let t = list[to];
 list[from] = t;
 list[to] = f;
 for(let i=0; i<list.length; i++){
   res += list[i];
 }
 return res;
}

文字を操作できるようにする

キーボード操作で文字を入れ替えられるようにしましょう。
文字の入れ替えは、作っておいたchangeStringの関数を使いましょう。

課題1. お題を変えてみましょう。

「りもこんてんこもり」は回文でした。君ならどんなテーマでお題を出す？

課題2. 操作方法をわかりやすくしよう。

なんか操作方法悪くないですか？イライラしますよね。
どうしたらイライラしない、自然な操作方法になるんでしょうか？
理想的な操作方法を考えて実装してみましょう。

スーパー課題. ステージモードを作ろう

文字を正しく入れ替えたら次の問題がスタートする、ステージモードを実装してみましょう。