【初心者向け】第六回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、前回までと同様に、パソコンにある「メモ帳」だけを使って、トランプのゲームの「神経衰弱」を作っていきたいと思います!

前回の記事をまだ読んでいない方は、先にそちらを是非読んでみてください!

【初心者向け】第五回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンに標準装備されている「メモ帳」だけを使って、「神経衰弱」を作っていきたいと思います♪ 今回作るもの 前回は、キーボードの入力で動かせるポインターを作りましたね! 準備編 カードの枠を表示させよう! カード … 続きを読む 【初心者向け】第五回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉


今回作るもの

前回は、エンターキーを押すことによってカードを裏返すコードを組みましたね!

  1. 準備編
  2. カードの枠を表示させよう!
  3. カードの数字を表示させよう!
  4. キー入力で動かせるようにしよう!
  5. キー入力でカードをひっくり返すようにしよう! ←前回
  6. 乱数を使ってカードを並べ替えよう! ←今回

そして今回は、ゲームを始めたときにカードをシャッフルして、神経衰弱として遊べるようにしていきたいと思います!

完成イメージは以下の通りです!

今回で、神経衰弱を完成させ、遊ぶことができるようになります!

(カードのシャッフルは、完全にランダムで行われるようにするので、クリアするのも一苦労です💦)


今回必要になる知識

今回はコードを組んでいく上で、1つだけ必要になってくる知識があります!

それが、乱数です!

乱数について、下の記事で詳しく解説したので、乱数についてあまり知らない人は、先にそちらを是非読んでみてください!


コードを書いていこう!

ここからは、前回までと同様に、またまたメモ帳にコードを書いていきましょう!

まず初めに、シャッフルをする前に前回のコードでは少し不具合が起きる可能性があるので、そちらを先に解消していきたいと思います!


二枚目をめくってから裏返すまで操作できないようにする

二枚目のカードが一枚目のカードの数字と違うときに1秒間裏返したままにするというコードを前回組みました。

ですが、前回のコードのままでは、その一秒間の間に矢印キーでポインターを動かすとおかしくなってしまいます。

なので、それを防ぐために、

二枚目をめくってからそれをもとに戻すまでの1秒間を操作できないようにします。

まずは、変数を一つだけ作ります。

…
let flipped = false;

let stop = false;
…

今回、「stop」という変数を作りました。

「stop」が「false」の時は、操作ができる状態にして、「true」の時に操作ができないようにしたいと思います。

なので次に、条件分岐を使って、「stop」が「false」の時だけ操作ができるようにしましょう。

…
if (stop == false) {

  if (e.key == "ArrowRight") {
    if (x <= 11) {
      x = x + 1;
    }
  }else if (e.key == "ArrowLeft") {
    if (x >= 1) {
      x = x - 1;
    }
  }else if (e.key == "ArrowDown") {
    if (y <= 2) {
      y = y + 1;
    }
  }else if (e.key == "ArrowUp") {
    if (y >= 1) {
      y = y - 1;
    }
  }else if (e.key == "Enter"){
    if (flip[y][x] == false) {
      flip[y][x] = true;
      if (flipped == false) {
        flipped = true;

        memory_x = x;
        memory_y = y
      }else if (flipped == true) {
        flipped = false;
        if (card[y][x][1] != card[memory_y][memory_x][1]) {
          stop = true;
          setTimeout("flipCards()", 1000);
        }
      }
    }
  }

}

少しややこしいですが、操作するための if文と else if文をすべて、

if (stop == false) {
  操作するための if文と else if文
}

のような、if文で囲いました。

「{」と「}」の位置がすごくややこしいので、エラーが出たらそこをチェックしましょう!

あとは最後に、2枚目のカードをひっくり返したときに「stop」を「true」に変えて、その2枚を元に戻す時に、「false」に戻すようにしましょう。

…
if (card[y][x][1] != card[memory_y][memory_x][1]) {
  stop = true;
  setTimeout("flipCards()", 1000);
}
…
…
function flipCards() {
  stop = false;
  flip[y][x] = false;
  flip[memory_y][memory_x] = false;

  CONTEXT.clearRect(0, 0, 1400, 500);
  drawCard();
}
…

これで、2枚目をめくってからひっくり返すまでの1秒間、どのキーを押しても動かなくなるはずです!

これで不具合の解消は完了ですね!


カードをシャッフルする

というわけで、本題です。

カードをシャッフルをランダムにシャッフルするには、乱数をうまく使います。

ですが、本題に入る前に一つだけ解説しておきたいことがあるのでそちらを先にします。


カードを入れ替える方法

プログラミングにおいて変数の中に入っている数字を入れ替えることって意外と難しいんです。

例えば次の例を見てみましょう。

let a = 12;
let b = 4;

このように、変数a, bがあったとしましょう。

そしてこれらの数字を入れ替えたい、つまり、「a を 4 に、b を 12」にしたいとしましょう。

すると、下のようなコードになりそうですね。

let a = 12;
let b = 4;

a = b;
b = a;

a を b の値に、b を a の値にしたいので、これでよさそうですが、これではだめです!

なぜだかわかるでしょうか?

「a = b;」となるので、その時点で「a = 12」「b = 12」となってしまい、4という数字が消えてしまいます。

そうこれが問題ですね。

数字の入れ替えをしようとしているのに、その数字が消えてしまったら元も子もありません。

なので、プログラミングにおいて、変数の入れ替えには下のようにします。

let a = 12;
let b = 4;

let c = a;

a = b;
b = c;

このように、新しい変数を作って、そこに消えないように数字を記憶させます。

最初は、少しややこしいかもしれませんが、意外と大事だったりしますので、しっかり覚えてみましょう!


「♤1」をランダムな場所に入れ替える

先ほどの入れ替えの説明はなんだったのかといわれそうですが、もう少しで使うのでお待ちください。

というわけで、いきなりすべてのカードをシャッフルするのは難しいので、まず初めに、「♤1」(=card[0][0]の場所)をランダムな場所と入れ替えてみましょう。

ランダムな場所と入れ替えるには、「0から3を出す乱数」と「0から12を出す乱数」が必要ですが、作れますか?

そして、なぜそれが必要になるかも考えてみましょう!

まず、「0から3を出す乱数」と「0から12を出す乱数」はこのように作りますね!

let a = Math.floor(Math.random() * 4);
let b = Math.floor(Math.random() * 13);

Math.floor(=切り捨て)をうまく使いこのように書けますね!

そして例えば、a が 3 になり、b が 2 になったときは、

「♤1」を「♡4」」と入れ替えるようにします!

先ほどの乱数をうまく使い、入れ替えるコードを書いて見ると…

let a = Math.floor(Math.random() * 4);
let b = Math.floor(Math.random() * 13);

let c = card[0][0];

card[0][0] = card[a][b];
card[a][b] = c;

のようになりますね!

これで、コードを実行するたびに、「♤1」がある場所(=card[0][0])がランダムで、別の場所と入れ替わります。

あとは、これを「♢K」(=card[3][12])まで、繰り返しをうまく使って書きます。

let card = [
  ["♤A", "♤2", "♤3", "♤4", "♤5", "♤6", "♤7", "♤8", "♤9", "♤10", "♤J", "♤Q", "♤K"],
  ["♧A", "♧2", "♧3", "♧4", "♧5", "♧6", "♧7", "♧8", "♧9", "♧10", "♧J", "♧Q", "♧K"],
  ["♡A", "♡2", "♡3", "♡4", "♡5", "♡6", "♡7", "♡8", "♡9", "♡10", "♡J", "♡Q", "♡K"],
  ["♢A", "♢2", "♢3", "♢4", "♢5", "♢6", "♢7", "♢8", "♢9", "♢10", "♢J", "♢Q", "♢K"]
];

for (let i = 0; i < 4; i++) {
  for (let j = 0; j < 13; j++) {
    let a = Math.floor(Math.random() * 4);
    let b = Math.floor(Math.random() * 13);

    let c = card[i][j];

    card[i][j] = card[a][b];
    card[a][b] = c;
  }
}

なぜこうなるかを少しだけ考えてから、多次元配列の「card」の下に書いて見ましょう!

これで、カードは完全にシャッフルされるはずです!

実際に実行してみて、神経衰弱で遊んでみましょう!


うまくいかなかった方向け

うまくいかなかった方は、まずエラーが出ていないか確認しましょう!

エラーの確認方法については、別の記事で詳しくまとめたので、ぜひそちらを参考にしてください!

それでもうまくいかなければ、下のサンプルコードをダウンロードして、自分のコードを比較してみましょう!

完成!

ということで、これで「神経衰弱」の完成です!

神経衰弱として、十分遊べるゲームができましたね!

お友達と交代しながら遊ぶこともできますが、1人でタイムアタックすることもできます!

是非、ゲームのスクリーンショットなどと共に感想を聞かせてください!

コメントやTwitterにどんなことでもいいので、ご感想いただけたらすごく喜びます!

ということで、長くなってしまいましたが、

最後まで読んでいただきありがとうございました!

このブログでは、ほかの方法でゲームを作ったり、様々なゲームの紹介をしています!

おすすめの記事:

【超おすすめ】あまり知られていない隠れた神ゲー〈3選〉

みなさんはゲームは好きですか? このブログの運営主のただの大学生は、ゲームが大大好きです。 今まで様々なハードで様々なゲームをプレイしてきました! なので、メチャクチャ有名なゲームから、意外と知られていない無名のゲームを … 続きを読む 【超おすすめ】あまり知られていない隠れた神ゲー〈3選〉

また、ほかにもメモ帳を使ったプログラミングをお探しの方は、まとめたページがあるので、そちらもぜひ見てください!

クリックで飛べますメモ帳プログラミング一覧

【初心者向け】第五回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンに標準装備されている「メモ帳」だけを使って、「神経衰弱」を作っていきたいと思います♪

前回の記事をまだ読んでいない方は、ぜひそちらから先に読んでください!

【初心者向け】第四回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンにある「メモ帳」を使って、「神経衰弱」を作っていきたいと思います! 今回作るもの 今回必要になる知識 今回もコードを書いていく上で、必要になってくる知識が、2つあります! まず1つ目が、関数です! そして … 続きを読む 【初心者向け】第四回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉


今回作るもの

前回は、キーボードの入力で動かせるポインターを作りましたね!

  1. 準備編
  2. カードの枠を表示させよう!
  3. カードの数字を表示させよう!
  4. キー入力で動かせるようにしよう! ←前回
  5. キー入力でカードをひっくり返すようにしよう! 今回
  6. 乱数を使ってカードを並べ替えよう!

そして今回は、すべてのカードを裏返し、エンターキーを押すとひっくり返せるようなコードを組んでいきたいと思います!

完成イメージは以下の通りです!

今回で、カードを裏返して、同じ数字なら裏返したままにしておくといったコードを組むので、神経衰弱として遊ぶことができるようになります!


今回必要になる知識

先にお伝えすると、今回新しく必要になってくるプログラミングの知識はありません!

ですが、今回は条件分岐をちょこちょこ使っていきます!

なので、条件分岐をまだ完全に理解していない方は、下の条件分岐について詳しくまとめた記事を読んで少し理解を深めておきましょう!


コードを書いていこう!

前回と同様に、メモ帳にコードを書いていきましょう!

今回は、似た名前の変数を作る事になるので、どの変数がどういう意味だったかをしっかり把握して進めましょう♪


変数を作る

まずは、今回使う変数を作りましょう!

今回は、またまた多次元配列を使っていきます!

…
let x = 0;
let y = 0;

let flip = [
  [false, false, false, false, false, false, false, false, false, false, false, false, false],
  [false, false, false, false, false, false, false, false, false, false, false, false, false],
  [false, false, false, false, false, false, false, false, false, false, false, false, false],
  [false, false, false, false, false, false, false, false, false, false, false, false, false]
];

let memory_x = 0;
let memory_y = 0;

let flipped = false;

document.addEventListener("keydown", movePointer);
…

flipという多次元配列には、どこのカードの数字が見えているのか、裏を向いているのか、という情報を、「true」と「false」というものでしまっておきます。

「false」の時は、数字や柄が見えていない状態(裏側)にして、「true」のときが数字や柄が見えている状態(表側)であるということがわかっていれば大丈夫です!

そして、memory_x, yには、一枚目にめくったカードの位置を記録させておきます!

最後の「flipped」というのは、一枚目のカードがめくられたかめくられていないかを記録しておきます。

これも先ほどと同様で、「false」の時は、一枚目がめくられていなくて、「true」の時は一枚目がすでにめくられていて、次に二枚目をめくる状態であることを指します!

変数は使うことによってわかることもあると思うので、ここでは完全に理解しなくて大丈夫ですよ~!


カードをひっくり返す

まずは、神経衰弱はカードがすべて裏を向いている状態で始まるので、数字と柄が表示されないようにしましょう!

ここで、先ほど作った「flip」という多次元配列を使います!

数字と柄を表示させるコードの部分を少し変えてみます!

for (let j = 0; j < 4; j++) {
    for (let i = 0; i < 13; i++) {
      CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
      CONTEXT.stroke();
      if (flip[j][i] == true) {
        CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
      }
    }
  }

flipがすべて「false」になっているので、数字と柄が表示されなくなったはずです。

このコードの意味がいまいちわからない方は、flipの中の「false」をいくつか「true」に変えてみましょう!

例えば…

let flip = [
  [false, false, false, false, false, false, false, false, false, false, false, false, false],
  [false, true, false, false, false, false, false, false, false, false, false, false, false],
  [false, false, false, false, true, false, false, false, false, false, false, false, false],
  [false, false, false, false, false, false, false, false, false, false, false, false, false]
];

これで実行すれば、大体どんな意味になっているのかがわかるはずです!


エンターキーを押してひっくり返す

では、次にエンターキーが押されたときにカードをひっくり返すようにしましょう!

キーを入力したときの処理は前回少し書いたので、その続きに書けばいいですね!

忘れている人がいるかもしれないので念のため

あとは、裏表の情報は「flip」という多次元配列にしまっているので、上の画像のように、対応する場所の「false」を「true」に変えればいいですね!

また、すでにめくられている場合は、めくることができないので、

めくる場所が「false」だったら「true」に変える

という風にすればいいですね!

なので、if文をうまく使い…

…
}else if (e.key == "ArrowUp") {
  if (y >= 1) {
    y = y - 1;
  }
}else if (e.key == "Enter"){
  if (flip[y][x] == false) {
    flip[y][x] = true;
  }
}

のように、エンターキーを押したときの処理を else if文書き、またその中にif文を書けばいいですね!

これで実行すれば、エンターキーを押したカードだけひっくり返るようになるはずです!


一枚目をめくったときの処理を書く

では、まず一枚目をめくったときの処理を書きましょう!

一枚目をめくる前は、最初に作った「flipped」という変数が「false」の時ですね!

あとは、一枚目をめくる処理は単純で、

カードをめくる
「flipped」を「true」にする(=一枚目をめくったら「true」に変えると最初に決めたため)
memory_x, y という変数に対応する場所を覚えさせる

の3つだけですね!

なので、コードも単純で、

…
}else if (e.key == "Enter"){
  if (flip[y][x] == false) {
    flip[y][x] = true;
    if (flipped == false) {
      flipped = true;
      
      memory_x = x;
      memory_y = y
    }
  }
}

と、めくった後に書くだけですね!


二枚目をめくったときの処理を書く

問題はこっちです。

二枚目をめくる時には、「flipped」は「true」の状態で、

「flipped」を「false」にもどす
もし、数字が同じならカードはめくったまま
もし、数字が違うなら何秒後かにカードを元に戻す

という3つの処理が必要ですね。

ですがこれ少し考えてみると

もし、数字が同じならカードはめくったまま

数字が同じなら何もしなくていい

となるので、実際に書かなければいけない処理は

「flipped」を「false」にもどす
もし、数字が違うなら何秒後かにカードを元に戻す

という2つを書くだけでいいのです!

そのまえに、何秒後かにカードを元に戻すためには、新しい「setTimeout」というものを使います。

ここのコードは少し難しいので、先に答えを書いてから、あとで解説という形にします!

function movePointer(e) {

…
中略
…

  }else if (e.key == "Enter"){
    if (flip[y][x] == false) {
      flip[y][x] = true;
      if (flipped == false) {
        flipped = true;
        
        memory_x = x;
        memory_y = y
      }else if (flipped == true) {
        flipped = false;
        if (card[y][x][1] != card[memory_y][memory_x][1]) {
          setTimeout("flipCards()", 1000);
        }
      }
    }
  }
  
  CONTEXT.clearRect(0, 0, 1400, 500);
  drawCard();
}

function flipCards() {
  flip[y][x] = false;
  flip[memory_y][memory_x] = false;
  
  CONTEXT.clearRect(0, 0, 1400, 500);
  drawCard();
}

まずは、

if (card[y][x][1] != card[memory_y][memory_x][1]) {

}

このif文から解説しましょう!

card[y][x]までなら、前回までも使っていますが、card[y][x][1]と、来ましたね。

実はこの「1」というのは、2文字目(コンピューターは0から始まるので、0、1の2番目)を指す意味があります。

なので、例えば…

let a = "こんにちは";
let b = a[3];

とすると、b は「こんにちは」の4番目の「ち」になります!

今回は、cardの中には例えば「♤3」などが入っていますが、実際にプレイしていく中で大事なのは、数字ですよね!

そしてのその数字だけを取り出そうとすると2文字目を指さなければならないので、最後にcard[y][x][1]と指すようにしています!

そして次に、今までの「==」ではなく「!=」となっていますね!

ですがこれは簡単で、数学などで使う「≠」(ノットイコール)と実は同じで、

もし、めくったカードと一枚目のカードが同じじゃなければ

といったように、今までのif文とは逆のものになっているということがわかりますね!

そして、次に…

setTimeout("flipCards()", 1000);

について説明します!

先ほども紹介しましたが、「setTimeout」というものを使って、何秒後かに処理を行うようにしています!

括弧の中の数字にはこのような意味があります!

setTimeout(行わせる処理, 何ミリ秒後に処理を行わせるか);

ここで「ミリ秒」という単位が出ましたね!

日常生活ではほとんど使いませんが、パソコンのような一秒に何億といった処理を行うものでが、1秒の1000分の1の1ミリ秒という単位を使います。

なので、1秒は1000ミリ秒となり、もし4秒遅らせたかったら上の数字を4000にすればいいですね!

ここで書いたコードを理解するのは、少し時間がかかるかもしれませんが、完全に理解しなくても全然大丈夫ですよ~!


うまくいかなかった方向け

うまくいかなかった方は、まずエラーが出ていないか確認しましょう!

エラーの確認方法については、別の記事で詳しくまとめたので、ぜひそちらを参考にしてください!

それでもうまくいかなければ、下のサンプルコードをダウンロードして、自分のコードを比較してみましょう!


ということで、第五回はここまでとしたいと思います!

次回は、新しいプログラミングの知識「乱数」を使って、カードをランダムでシャッフルするようなコードを組んでいきたいと思います!

長くなってしまいましたが、

最後まで読んでいただきありがとうございました!

ご感想などあれば、コメントやTwitterにどしどしお寄せください!

第六回はこちらから!

【初心者向け】第六回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、前回までと同様に、パソコンにある「メモ帳」だけを使って、トランプのゲームの「神経衰弱」を作っていきたいと思います! 今回作るもの 前回は、エンターキーを押すことによってカードを裏返すコードを組みましたね! 今回で … 続きを読む 【初心者向け】第六回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

【初心者向け】第四回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンにある「メモ帳」を使って、「神経衰弱」を作っていきたいと思います!

前回の記事をまだ読んでいない方は、ぜひそちらを先に読んでください!

【初心者向け】第三回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、前回までと同様に、パソコンに標準装備されている「メモ帳」を使って、「神経衰弱」を作っていきたいと思います! 今回作るもの 前回は、カードの枠だけを表示させましたね! 準備編 カードの枠を表示させよう! ←前回 カ … 続きを読む 【初心者向け】第三回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉


今回作るもの

前回は、トランプの柄と数字を表示し、カードを52枚にしましたね!

  1. 準備編
  2. カードの枠を表示させよう!
  3. カードの数字を表示させよう! ←前回
  4. キー入力で動かせるようにしよう! ←今回
  5. キー入力でカードをひっくり返すようにしよう!
  6. 乱数を使ってカードを並べ替えよう!

そして今回は、キーボード入力で動かせるポインターを作っていきたいと思います!

今回の完成イメージは以下の通りです!

違いが分かりずらいですが、♧2の枠が太くなっているのが分かりますね!

矢印キーでこの枠(ポインター)を操作できるようにします!


今回必要になる知識

今回もコードを書いていく上で、必要になってくる知識が、2つあります!

まず1つ目が、関数です!

関数については、下記の記事で詳しくまとめたので、ぜひ参考にしてください!

そして、2つ目が条件分岐です!

条件分岐についても、下記の記事で詳しくまとめたので、参考にしてください!


コードを書いていこう!

では、ここからは前回と同様にメモ帳に、ポインターを動かすためのコードを書いていきましょう!

今回は、関数を条件分岐をうまく使いコードを組んでいくので、関数と条件分岐がいまいちわかっていないという方にとっては、少し難しく感じるかもしれません。

ですが、深く考えずに、大体わかったら次に進もうといった感じで進めていきましょう!


関数を使ってまとめる

前回は、繰り返しを使ってコードをうまくまとめ、短くしました!

そして、今回はまず初めに、
先ほどご紹介した「関数」を使って見やすくしていきたいと思います!

まずは、前回作ったトランプを表示させるコードを「drawCard」という関数にしましょう!

function drawCard() {
    CONTEXT.font = "40px 'MS ゴシック'";
    CONTEXT.textAlign = "center";

    CONTEXT.beginPath();

    for (let j = 0; j < 4; j++) {
      for (let i = 0; i < 13; i++) {
        CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
        CONTEXT.stroke();
        CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
      }
    }
}

drawCard();

function drawCard()~ の部分で、仕事の内容を決めて、

最後の「drawCard();」で、その仕事を呼び出していますね!

そしてもう一つ!

キーが押されたときに、ポインターを動かす処理を

「movePointer」という名前の関数として新しく作りましょう!

drawCard();

function movePointer(e) {
  
}

</script>

今回は、押されたキーによって、右に行くか左に行くか処理を変えるため、
「e」という引数を設定しました!

これで、関数はおしまいです!

これで実行しても、前回と同じようにカードが表示されるはずです!


変数を作る

では次に、今回使う変数を作っていきましょう!

前回使った配列の下に新しいのを追加します。

…
["♢A", "♢2", "♢3", "♢4", "♢5", "♢6", "♢7", "♢8", "♢9", "♢10", "♢J", "♢Q", "♢K"]
];

let x = 0;
let y = 0;
…

あとで詳しく説明しますが、xとyは下のように対応しています。

なので、例えば、xが3で、yが2の時は、「♡4」を指す、
ということだけ分かっていればOKです!


ポインターを表示させる

では、今度は先ほど作ったxとyの変数を使って、ポインターを表示させてみましょう!

これは、drawCardの関数の中の、初めに書きましょう!

function drawCard() {
    CONTEXT.beginPath();
    CONTEXT.rect(68 + 100 * x, 58 + 100 * y, card_width + 4, card_height + 4);
    CONTEXT.stroke();

    CONTEXT.font = "40px 'MS ゴシック'";
    CONTEXT.textAlign = "center";

    CONTEXT.beginPath();

    for (let j = 0; j < 4; j++) {
      for (let i = 0; i < 13; i++) {
        CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
        CONTEXT.stroke();
        CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
      }
    }
}

最初の部分ですね!

CONTEXT.rect(~);

というのは、第二回でも使いましたね!

これをうまく使って、表示するカードの少し外側に四角形を描かせることで、線を二重にしています!

これで実行すれば、「♤1」にポインターが表示されているはずです!

少し実験で、

let x = 3;
let y = 2;

など数字を少し変えてみましょう!

すると、おそらく先ほど見た、xとyが対応するカードの部分にポインターが表示させるはずです!

x=3 y=2 の時は、「♡4」になるはずです!

なぜそうなるか少し考えてから、次に進めましょう!


キーボードの入力を検知する

ポインターを動かす処理を実際に書いていく前に、キーボードの入力を検知するためのコードを1行だけ書きます!

先ほどの変数の下に書きましょう!

…
let y = 0;

document.addEventListener("keydown", movePointer);

function drawCard() {
…

真ん中の一行ですね。

これについて詳しく説明すると難しくなってしまうので、簡単に説明すると…

キーボードのキーのどれかが押されたときに、
「movePointer」という仕事をする

といった意味があります。


ポインターを動かす処理を書いていく

ということでここで本題です!

先ほど作った、「movePointer」という関数に、ポインターを動かす処理を書いていきましょう!

まず初めに、条件分岐を用いて、どのキーが押されたかを判別するコードを書きます!

function movePointer(e){
  if (e.key == "ArrowRight") {

  }else if (e.key == "ArrowLeft") {

  }else if (e.key == "ArrowDown") {

  }else if (e.key == "ArrowUp") {

  }
}

先ほども少し説明しましたが、どのキーが入力されたかが引数によってわかるので、

引数の「key」が「ArrowRight」(右矢印キー)なら~

といったように条件で分けました。

そしてここから、先ほど作った変数の「x」と「y」を使っていきます。

先ほども説明しましたが、xとyにはこういう意味があります!

つまり、右キーが押されたときは、xの数字を1つ大きくすれば良いということですね!

なので、

if (e.key == "ArrowRight") {
  x = x + 1;
}else if (e.key == "ArrowLeft") {

}else if (e.key == "ArrowDown") {

}else if (e.key == "ArrowUp") {

}

と書けることができます!

ですが、一つ気を付けないといけないのが、

xの値が12のとき(ポインターがKを指しているとき)は右には行けないですね!

なので、条件分岐をうまく使い、

if (e.key == "ArrowRight") {
  if (x <= 11) {
    x = x + 1;
  }
}else if (e.key == "ArrowLeft") {

}else if (e.key == "ArrowDown") {

}else if (e.key == "ArrowUp") {

}

このように、xが11以下の時だけ、xを1つ増やすという処理にすればいいですね!

あとは、ほかも同じように考えて、

左キーが押されたら、xの値を1つ減らす
下キーが押されたら、yの値を1つ増やす
上キーが押されたら、yの値を1つ減らす

となることから、

if (e.key == "ArrowRight") {
  if (x <= 11) {
    x = x + 1;
  }
}else if (e.key == "ArrowLeft") {
  if (x >= 1) {
    x = x - 1;
  }
}else if (e.key == "ArrowDown") {
  if (y <= 2) {
    y = y + 1;
  }
}else if (e.key == "ArrowUp") {
  if (y >= 1) {
    y = y - 1;
  }
}

このように書けばいいですね!

あとは、キーボードが押された後に、drawCard()という関数(=カードとポインターを表示させる仕事)をもう一度して、

画面を更新すればいいですね!

なので、

function movePointer(e) {
  CONTEXT.clearRect(0, 0, 1400, 500);
  if (e.key == "ArrowRight") {
    if (x <= 11) {
      x = x + 1;
    }
  }else if (e.key == "ArrowLeft") {
    if (x >= 1) {
      x = x - 1;
    }
  }else if (e.key == "ArrowDown") {
    if (y <= 2) {
      y = y + 1;
    }
  }else if (e.key == "ArrowUp") {
    if (y >= 1) {
      y = y - 1;
    }
  }

  drawCard();
}

と、最後に「drawCard();」と書けばいいですね!

これで一度実行してみましょう!

するとどうなりますか?

おそらく、キーボードの入力で、枠がどんどん増えていく状態になっているはずです。


ポインターが増えていく問題を解決する

ほかの動作はうまくいっていますが、動かした後の枠が消えていませんね!

そう、それが問題ですね!

なので、drawCardの仕事をしてもらう前に、一度画面を真っ白に戻してもらいましょう!

画面を消すには、以下のようにします!

function movePointer(e) {
  if (e.key == "ArrowRight") {
    if (x <= 11) {
      x = x + 1;
    }
  }else if (e.key == "ArrowLeft") {
    if (x >= 1) {
      x = x - 1;
    }
  }else if (e.key == "ArrowDown") {
    if (y <= 2) {
      y = y + 1;
    }
  }else if (e.key == "ArrowUp") {
    if (y >= 1) {
      y = y - 1;
    }
  }
  CONTEXT.clearRect(0, 0, 1400, 500);
  drawCard();
}

clearRectというのは、

clearRect(x座標, y座標, 横の長さ, 縦の長さ);

といった使い方をするので、ここでは、画面の全体を消すように設定できていますね!

これで、ブラウザで確認すればしっかりポインターが増えずに、矢印キーを使って、うまく動かすことができるはずです!

これで、今回の目標は達成です!

少しずつですが、できていくのを見るのは楽しいですね♪


うまくいかなかった方向け

うまくいかなかった方は、まずエラーが出ていないか確認しましょう!

エラーの確認方法については、別の記事で詳しくまとめたので、ぜひそちらを参考にしてください!

それでもうまくいかなければ、下のサンプルコードをダウンロードして、自分のコードを比較してみましょう!

ということで、第四回はここまでとしたいと思います!

次回は、すべてのカードを裏返し、エンターキーを押すとひっくり返せるようなコードを組んでいきたいと思います!

長くなってしまいましたが、

最後まで読んでいただきありがとうございました!

ご感想などあれば、コメントやTwitterにどしどしお寄せください!

第五回はこちらから!

第五回は制作中です。
もう少しお待ちください。

【初心者向け】第三回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、前回までと同様に、パソコンに標準装備されている「メモ帳」を使って、「神経衰弱」を作っていきたいと思います!

前回の記事をまだ読んでいない方は、ぜひそちらを先に読んでください!

【初心者向け】第二回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンに標準で入っている「メモ帳」を使って、「神経衰弱」を作っていきたいと思います! 今回作るもの 前回は「神経衰弱」の準備として、真っ白なゲーム画面を作りました! 準備編 ←前回 カードの枠を表示させよう!  … 続きを読む 【初心者向け】第二回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉


今回作るもの

前回は、カードの枠だけを表示させましたね!

  1. 準備編
  2. カードの枠を表示させよう! ←前回
  3. カードの数字を表示させよう! ←今回
  4. キー入力で動かせるようにしよう!
  5. キー入力でカードをひっくり返すようにしよう!
  6. 乱数を使ってカードを並べ替えよう!

そして、第三回では、枠だけでなく数字やトランプの柄も表示させていきたいと思います!

今回の完成イメージは以下の通りです!

今回の目標である数字やトランプの柄を表示させるのはもちろん、

前回は、16枚しかカードの枠を作りませんでしたが、
これを1からKまでの13枚を、4種類で52枚にしたいと思います!


今回必要になる知識

今回も実際にコードを書いていく上で、知っていた方がいい知識が2つあります!

まず一つ目が、配列です!

配列については、以下の記事で詳しくまとめたので、参考にしてください!

そして、二つ目が繰り返しです!

繰り返しについても、以下の記事で詳しくまとめたので、ぜひ参考にしてください!


コードを書いていこう!

では、ここからは前回同様にメモ帳にコードを書いていきましょう!

今回から少しややこしくなってきますが、完全に理解するまでじっくり考えるのではなく、大体わかったから次に進めよう程度で大丈夫ですよ~!


変数を作るなど、下準備をする

まずは、今回使う変数を作りましょう。

変数といっても今回は配列を作ります!

その配列に、トランプの柄と数字を入れておきます!

まずは、カードが16枚の状態なので、1から4までを配列に入れましょう!

…
let card_height = 80;

let card = [
  ["♤1", "♤2", "♤3", "♤4"],
  ["♧1", "♧2", "♧3", "♧4"],
  ["♡1", "♡2", "♡3", "♡4"],
  ["♢1", "♢2", "♢3", "♢4"]
];
…

「♤」や「♡」のマークは、日本語で「すぺーど」や「はーと」と入力して変換すれば出ると思いますが、もしうまくいかなければコピーして使いましょう!

また、「,」や「””」にも注意しましょう!

そして、次に今回作るコードの下準備として、柄や数字の大きさと、そのフォントなどを調整するためのコードを書きます!

…
  ["♢1", "♢2", "♢3", "♢4"]
];

CONTEXT.font = "40px 'MS ゴシック'";
CONTEXT.textAlign = "center";

*「MS」が全角文字だったり、「’」がややこしいかもしれませんので、コピペしていただいても全然大丈夫です。

スライドパズル編を読んでくださった方は一度見たことがあるかもしれませんが、
簡単にご説明しますと…

一つ目の、

CONTEXT.font = "40px 'MS ゴシック'";

というのは、40pxの文字の大きさで、「MS ゴシック」というフォントで表示させる、といった意味があります。

今回はあらかじめ調整していて、40pxがちょうどの大きさになるはずです!

そして二行目の、

CONTEXT.textAlign = "center";

は、textAlignは文字位置を決めていて、今回は「center」なので中央にしています。

つまり文字位置が中央(=center)なら、

文字が真ん中に来ます

もし右寄せ(=right)なら、

文字が右に来ます

これもあらかじめ調整していて、文字位置を中央にすることでうまくいくようになっています!


トランプの柄と数字を表示させる(16枚)

次に、16枚でトランプの柄と数字を表示させてみましょう!

表示させるには、

CONTEXT.fillText(表示する文字, x座標, y座標);

を使いましょう!

そして、配列の中に表示する文字を入れていますが…

おさらいですが…

例えば

let c = card[1][2];

とすると、cは「♧3」になりますね!

*コンピューターが数字を数え始める時に「0」があることに注意しましょう!

まず最初の「♤1」を表示させるには、前回作ったコードの間に下のように書きましょう!

…
CONTEXT.rect(70, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][0], 100, 110);

CONTEXT.rect(170, 60, card_width, card_height);
…

これで実行すれば、「♤1」だけが左上に表示されるはずです!

次に「♤2」「♤3」「♤4」を表示させるコードを書いていきます!

これらを表示させるコードはこのようになります!

…
CONTEXT.rect(170, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][1], 200, 110);

CONTEXT.rect(270, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][2], 300, 110);

CONTEXT.rect(370, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][3], 400, 110);
…

これを後3種類分書かなければならないのですが、明らかに面倒くさいですよね!

そんな時に使えるのが、「繰り返し」です!

繰り返しを使って、スペードのカードを表示させるコードをまとめると…

CONTEXT.rect(70, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][0], 100, 110);

CONTEXT.rect(170, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][1], 200, 110);

CONTEXT.rect(270, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][2], 300, 110);

CONTEXT.rect(370, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][3], 400, 110);

を、下のようにまとめることができます!

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 60, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[0][i], 100 + 100 * i, 110);
}

これですっきりしましたね!

後は、これを4種類分作ってみましょう!

少しどのようなコードにすればよいか考えてから、下のコードを真似してみましょう!

…
CONTEXT.beginPath();

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 60, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[0][i], 100 + 100 * i, 110);
}

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 160, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[1][i], 100 + 100 * i, 210);
}

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 260, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[2][i], 100 + 100 * i, 310);
}

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 360, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[3][i], 100 + 100 * i, 410);
}

そして、勘のいい方はお気づきかもしれませんが、
これもまた繰り返しを使ってすっきりまとめることができそうですね…?

上の4つの繰り返しをまとめると、このようにすることができます!

for (let j = 0; j < 4; j++) {
  for (let i = 0; i < 4; i++) {
    CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
    CONTEXT.stroke();
    CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
  }
}

ここは少しややこしくなってきますが、難しく考えずに真似してみましょう!

ということで、これで16枚ではありますが、トランプの柄と数字を表示することができました!


16枚から52枚へ

では今度は、先ほど作った16枚のカードを52枚に変えていきましょう!

まず初めに、ゲーム画面がこのままの大きさでは足らないので、横に伸ばして大きくしましょう!

ゲーム画面の大きさの設定は、canvasタグの中に書きましたね!

<canvas width="1400" height="500" id="canvas" style="border:1px solid black"></canvas>

ここでは、横の長さを1400まで伸ばしました!

かなり横長になりましたね笑

では次に、配列を52枚に変えましょう。

let card = [
  ["♤A", "♤2", "♤3", "♤4", "♤5", "♤6", "♤7", "♤8", "♤9", "♤10", "♤J", "♤Q", "♤K"],
  ["♧A", "♧2", "♧3", "♧4", "♧5", "♧6", "♧7", "♧8", "♧9", "♧10", "♧J", "♧Q", "♧K"],
  ["♡A", "♡2", "♡3", "♡4", "♡5", "♡6", "♡7", "♡8", "♡9", "♡10", "♡J", "♡Q", "♡K"],
  ["♢A", "♢2", "♢3", "♢4", "♢5", "♢6", "♢7", "♢8", "♢9", "♢10", "♢J", "♢Q", "♢K"]
];

4までだったのを13までに延ばしただけですね!

*トランプっぽくするために、「1」を「A」に変えました!

そして最後に表示させるカードの枚数を52枚に変更しましょう!

これは実は非常に簡単で、

for (let j = 0; j < 4; j++) {
  for (let i = 0; i < 13; i++) {
    CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
    CONTEXT.stroke();
    CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
  }
}

この、先ほど書いた繰り返しの、たった1部分を変えるだけでなんと、52枚を表示させることができちゃいます!

そこを変えるのか少しだけ考えてから次のコードを見てみましょう!

for (let j = 0; j < 4; j++) {
  for (let i = 0; i < 13; i++) {
    CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
    CONTEXT.stroke();
    CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
  }
}

そうです。

なんと繰り返しの終わる条件の部分を「13」という数字に変えるだけです!

なぜこうなるかぜひ考えてみてください!

というわけで、これで実行すれば最初に見た完成イメージと同じ画面が見れるはず!

(「1」を「A」にするのを忘れていますね…)

これで、トランプ52枚に対応した表示をさせることができました!

前回まではとても質素でしたが、徐々に出来上がっていくのを見ると気持ちがいいですね!

この気持ちをバネにして次に進めていきましょう!


うまくいかなかった方向け

うまくいかなかった方は、まずエラーが出ていないか確認しましょう!

エラーの確認方法については、別の記事で詳しくまとめたので、ぜひそちらを参考にしてください!

もしうまくいかなかった方のために、サンプルコードを用意しました。
ダウンロードして、自分のコードのどこが間違っているのか、これを見て確認してみてください!


ということで、第三回はここまでとしたいと思います!

次回は、キーボード入力で動かせるポインターを作っていきたいと思います!

長くなってしまいましたが、

最後まで読んでいただきありがとうございました!

ご感想などあれば、コメントやTwitterの方にどしどしお寄せください!

第四回はこちらから!

第四回は制作中です。
もう少しお待ちください。

【初心者向け】第二回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンに標準で入っている「メモ帳」を使って、「神経衰弱」を作っていきたいと思います!

前回の記事をまだ読んでいない方は、そちらを先に読んでください!

【初心者向け】第一回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

「プログラミングって難しそうだけど、少しやってみたいな~」 と、プログラミングに少し興味を持ったことがある人は多いと思います。 そんな皆さんに朗報です!パソコンにもともと入っている「メモ帳」だけを使って、プログラミングを … 続きを読む 【初心者向け】第一回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉


今回作るもの

前回は「神経衰弱」の準備として、真っ白なゲーム画面を作りました!

  1. 準備編 ←前回
  2. カードの枠を表示させよう! ←今回
  3. カードの数字を表示させよう!
  4. キー入力で動かせるようにしよう!
  5. キー入力でカードをひっくり返すようにしよう!
  6. 乱数を使ってカードを並べ替えよう!

この〈神経衰弱編〉では、全六回に分けて少しずつ作っていきたいと思います!

そして、今回はカードの枠と数字を表示させていきたいと思います。

今回の完成イメージは以下の通りです。

少し質素ですが、次回から数字やトランプのマークを入れていくとそれっぽくなってきます!

また、カードは16枚とします! ←これ大事


下準備

前回は、HTMLを使う練習をしましたが、前回のままでは少し不十分なので、少しだけ修正を施したいと思います。

前回作ったものでは、

パソコンが正しくHTMLを認識しなかったり、
文字化けが起こってしまったりする可能性があるので、

まずはそれを無くすためのコードを書いていきたいと思います。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple Game</title>
  </head>
  <body>
     <canvas style="border:1px solid black"></canvas>
     <script>
     </script>
  </body>
</html>

一行目と四行目に新しい文字列が追加されていますね!

一行目の

<!DOCTYPE html>

という部分で、ブラウザにHTMLであることを認識させ、

<meta charset="utf-8">

という部分で、文字化けを起こさないようにしています。

*少し難しいですが、全然理解する必要もないので安心してください!


そしてもう一つ!

canvasタグを下のように変えましょう!

<canvas width="500" height="500" id="canvas" style="border:1px solid black"></canvas>

一つ一つ説明すると…

widthというのは、日本語で「幅」という意味もあることから、キャンバス(=ゲーム画面)の横の長さを指し、

それに対してheight「高さ」という意味から、キャンバスの縦の長さを指しています!

そしてそれが今回、500(px):500(px)にしているので、正方形の画面になりますね!

そして、idというのは、その名前の通り、キャンバス(=ゲーム画面)にIDを振りました。
後でも説明しますが、ゲーム画面に何かを表示させるときにこのIDを使います。


今回必要になる知識

今回実際にコードを書いていく上で、知っていた方がいいプログラミングの知識が一つだけあります!

それが、変数です!

変数については、この記事で詳しくまとめましたので、ぜひ見てください!


コードを書いていこう!

先ほどの下準備や第一回では、HTMLというものを主に書いてきました。

ですが、ここからはJavaScriptという、HTMLを動かすためのものを作っていきます!
そして、HTMLとは書き方が大きく変わってきますが、少しずつ慣れていきましょう!


ゲーム画面の設定

まずは手始めに、JavaScriptがキャンバス(=ゲーム画面)がどこにあるかわかるように、先ほど指定したIDで教えてあげましょう!

<script>
   const CANVAS = document.getElementById("canvas");
   const CONTEXT = CANVAS.getContext("2d");
</script>

この二行を書き写しましょう!
*左側のスペースは見やすくするために入れたもので、入れなくてもOKです!

この二行は少し難しいので、完全に理解はしなくて大丈夫ですが…

一行ずつ説明しますと

const CANVAS = document.getElementById("canvas");

constは、変えることのできない変数でしたね。

「document」は「メモ帳」、「getElementById(~)」は「~とIDが付いたものを探す」、「.」は「の」と訳すと…

「CANVAS」を「メモ帳の中の”canvas”というIDが付いたものにする」といった意味があります。

そして、

const CONTEXT = CANVAS.getContext("2d");

は、2Dともあるように、「CANVAS(=ゲーム画面)を2Dの設定にしたものを、CONTEXTとする」といった意味があります。


変数を作ろう!

では次に、今回使う変数を作ってみましょう!

今回まず作る変数は、カードの横の長さ(=width)と縦の長さ(=height)です!

先ほど書いたものの続きに書いて見ましょう!

…
const CONTEXT = CANVAS.getContext("2d");

let card_width = 60;
let card_height = 80;

横の長さを60、縦の長さを80にしたので、縦長のカードになることがわかれば十分です!


四角を表示させてみよう!

では、次にカードの枠を作るために、四角形の線を表示させてみましょう!

まずは深く考えず、下の通りに入力してみましょう!

…
let card_height = 80;

CONTEXT.beginPath();
CONTEXT.rect(100, 100, 100, 100);
CONTEXT.stroke();

簡単に説明しますと…

CONTEXT.beginPath();

というのは、ここから、CONTEXT(=ゲーム画面)に「線を書き始めるよー」という指示をしました。

そして次の行の、

CONTEXT.rect(100, 100, 100, 100);

で、キャンバスに四角形を表示する指示を出しました。
(括弧の中の数字については後で詳しく説明します!)

そしてその次に、

CONTEXT.stroke();

で、先ほど指定した四角形の形に線を引かせました!

これで、Internet ExplorerやChromeなどのブラウザで確認してみましょう!
するとどうなりますか?

下の画像のようになっていれば成功です!

左上の方に四角形が表れていたらOK!

では、ここで先ほど書いたものの、数字だけ変えてみましょう!

例えば…

CONTEXT.beginPath();
CONTEXT.rect(200, 300, 40, 60);
CONTEXT.stroke();

これでまた、ブラウザで確認してみましょう!
するとどうなるでしょうか?

上の例のように数字を変えたのなら、下の画像のようになっているはず!

四角形の場所と、大きさが変わっているはず!

何度か数字を変えてみて、どのようになるか試してみましょう!

すると、先ほどの()の中の数字について少しわかるかもしれません!

先ほどの括弧の中の数字ははこのようになっています!

rect( x座標, y座標, 横の長さ, 縦の長さ);

x座標やy座標は、前のスライドパズル編で説明した通り、このようになっています!

そして、今回はカードを表示したいので、先ほど作った変数を用いて、以下のようにしましょう!

CONTEXT.beginPath();
CONTEXT.rect(70, 60, card_width, card_height);
CONTEXT.stroke();

これでブラウザで確認してみましょう!
すると下の画像のように、左上にカードの形の四角形が引かれていますね!

これで一枚目は完成!

あとは、これを16枚分書くだけですね!

少し長くなりますが、頑張って写してみましょう!

*2枚目以降は、「CONTEXT.beginPath();」の指示は要りません!

CONTEXT.beginPath();
CONTEXT.rect(70, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(170, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(270, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(370, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(70, 160, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(170, 160, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(270, 160, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(370, 160, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(70, 260, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(170, 260, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(270, 260, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(370, 260, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(70, 360, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(170, 360, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(270, 360, card_width, card_height);
CONTEXT.stroke();

CONTEXT.rect(370, 360, card_width, card_height);
CONTEXT.stroke();

うまくコピー&ペーストを使いましょう!

これで実行すればおそらく最初の完成イメージで見たものと同じになると思います!

最初に見たやつ

これでカードの枠は表示できましたね!


うまくいかなかった方向け

うまくいかなかった方は、まずエラーが出ていないか確認しましょう!

エラーの確認方法については、別の記事で詳しくまとめたので、ぜひそちらを参考にしてください!

もしうまくいかなかった方のために、サンプルコードを用意しました。
ダウンロードして、自分のコードのどこが間違っているのか、これを見て確認してみてください!


今回はここまで!

思っている通りに作ることができると、やっぱりうれしいですよね!

その嬉しさをバネにして、これからも頑張っていきましょう!

長くなりましたが、

最後まで読んでいただきありがとうございました!

ご感想などあれば、コメントやTwitterにどしどしお寄せください!

第三回はこちらから!

【初心者向け】第一回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

「プログラミングって難しそうだけど、少しやってみたいな~」 と、プログラミングに少し興味を持ったことがある人は多いと思います。 そんな皆さんに朗報です!パソコンにもともと入っている「メモ帳」だけを使って、プログラミングを … 続きを読む 【初心者向け】第一回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

【初心者向け】第一回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

「プログラミングって難しそうだけど、少しやってみたいな~」

と、プログラミングに少し興味を持ったことがある人は多いと思います。

そんな皆さんに朗報です!
パソコンにもともと入っている「メモ帳」だけを使って、プログラミングを始めることができます!

難しい知識は全く要りません!
是非挑戦して、ゲームを作るという楽しさを体験してみてください!


必要なもの

パソコン
→パソコンに元々入っているメモ帳を使うので、ほかのソフトは要りません!

最低限のパソコンの知識
→メモ帳などの開き方や保存の方法がわかっていれば大丈夫です!

このブログを見ることができている時点でパソコンを使いこなせるといえるでしょう!
なので、皆さん必要なものは準備できています!


今回から作っていくゲーム

今回から作っていくゲームは、(タイトルにも書いてありますが…)

神経衰弱

を作っていきたいと思います!

皆さんもプレイしたことがあるのではないでしょうか?

神経衰弱はトランプゲームとしてとても有名ですね!

裏を向いているカードを2枚表に向けて、その2枚のカードの数字が同じだったらそのカードをとれるというゲームですね!

今回はこれを、パソコンの「メモ帳」だけを使って作っていきたいと思います!


プログラミングを始めてみよう!

長い説明はここまでにして、実際にメモ帳を使ってプログラミングを始めていきましょう!

まずは、メモ帳を開きましょう!

Windowsの場合は、左下の検索バーに「メモ帳」と入力して開きましょう!
Macの場合は、「テキストエディタ」を開きましょう!

開けたら、下を真似して入力してみましょう!

<html>
<head>
<title>Game</title>
</head>
<body>

</body>
</html>

*左の数字は見やすくするためのものなので、入力しなくて大丈夫です!

これを入力出来たら、保存していくのですが、少し変わった方法で保存するのでしっかり真似をしましょう!

左上の「ファイル」→「名前を付けて保存」
適当な場所に好きな名前を付けて…

ファイルの種類を「すべてのファイル」に変更して、
ファイル名を「(つけた名前).html」というものに変更しましょう!
(文字コードは画像の通りに合わせておいてください)

そしたら、保存したファイルを

右クリック→「プログラムから開く」
→「Internet Explorer」や「Chrome」など自分が使うブラウザを選択しましょう!

すると…

真っ白な画面が出てくるはずです!

それで成功です!
まだ何も作っていなので真っ白になります!

ここで、今メモ帳に書いたものを簡単に説明したいと思います!

まず、「<」と「>」に囲まれたもの(例えば、<html>)は、タグと呼ばれます。

例えば、<title>では、英語でタイトルとあるように、ここからがタイトルであるとコンピューターがわかるようにできています。

そして、</title>というもので、タイトルがどこまでなのかがわかるようになっています。

つまり、どのタグにも始め用のものと、終わり用のものがあります。
今回使ったタグを解説します!

headタグは、今回ならゲームの名前やアイコンなどの情報を書く部分です。

titleタグは先ほども書いた通り、タイトルを書く部分です。

bodyタグは、実際の画面に表示されるものであり、今回はゲームの画面を表示させるためのコードをここに書きます。

そしてhtmlタグは、今回HTMLというものを使ってゲームを作っているため、コンピュータがHTMLであると認識できるようにするためのタグです。

さて解説も終わったので、実際に一つbodyタグの中に好きな文章を入れてみましょう!
またタイトルも変えてみましょう!

例えばこんな感じ!

<html>
  <head>
    <title>Simple Game</title>
  </head>
  <body>
    こんにちは!
  </body>
</html>

(ここからはコードを見やすくするために、左側にスペースを入れますが、入れなくても大丈夫です!)

入力した文字がそのまま反映されたと思います。
bodyタグの中に書いたものは画面に、タイトルは上のタブの名前に反映されたはずです。

もしうまくいってなかったらどこかが入力ミスをしているかもしれません。


ゲーム画面を作る

HTMLの性質を簡単に理解したうえで、
ここからは実際にゲーム画面を作っていきましょう!

先ほど書いたもののbodyタグの中の部分だけ変えますね。

<body>
  <canvas></cannvas>
  <script>

  </script>
</body>

canvasというものをゲーム画面として表示させます!
なので、canvasというタグで、ゲーム画面を作ったことになります!

scriptについては後々説明しますが、ゲーム画面を操作するためにあります

これで、ゲーム画面を作る事はできたのですが、
真っ白の背景に白色の画面を用意したので、ゲーム画面がこのままでは見えませんね💦

なので、ゲーム画面の周りに枠線を引いて見えるようにしましょう!

<canvas style="border:1px solid black"></canvas>

borderというのは、「枠線」を英語にしたものですねー。

そして、「””」で囲まれたものが、

1px(という単位がパソコンにはあります)の太さの線を、
solid(切れ目のない、ただの線)
black(黒色) で引く

といった意味があります!

なので、太くしたければ5pxにしたり、色を変えたければ、「red」や「yellow」などの英語名で入力すればOKです!

これで確認してみると、ゲーム画面が左上に見えているはずですね!

今回のコードを書く作業はここまでにします!

最後に、今回使ったHTMLというものについて説明して終わりたいと思います!


HTMLとJavaScriptとは?

今回からゲームを作っていく上で、「HTML」「JavaScript」という2つのものを使っていきます!

HTMLとは、ウェブページを作るためのものです。
つまりあなたが見ているこのページも、GoogleもYouTubeも先ほどあなたが書いたような、<title>や<body>などのタグですべて作られています!

それに対して、JavaScriptは最後に少し書いた「<script>」の部分で、
HTMLを様々な形で動かすことができます!

どういうことか、分かりやすい例を挙げてみましょう!

HTMLとJavaScriptを合わせて、「操り人形」であると考えましょう!

すると、HTMLはただの「人形」で、それだけでは動かず、見せるだけのものになります!

それに対して、JavaScriptは「人形を動かすための糸」になり、HTMLがあることで、操り人形として成り立つことができます!

こんな感じ

HTMLとJavaScriptについて簡単にわかっていただけたでしょうか?

次回からは、ゲーム画面を動かす(=HTMLを動かす)ために、
JavaScriptのコードを書いていきたいと思います!


第一回はここまで!

今回は神経衰弱を作るための準備編でした!

次回から本格的に神経衰弱を作っていきたいと思います!

今回は説明が多く少し長くなってしまいましたが…

最後まで読んでいただきありがとうございます!

感想などあれば、ぜひコメントやTwitterのほうにどしどしお寄せください!

第二回はこちらから!

【初心者向け】第二回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンに標準で入っている「メモ帳」を使って、「神経衰弱」を作っていきたいと思います! 今回作るもの 前回は「神経衰弱」の準備として、真っ白なゲーム画面を作りました! 準備編 ←前回 カードの枠を表示させよう!  … 続きを読む 【初心者向け】第二回 メモ帳だけでゲーム作ってみた〈神経衰弱編〉