✨

初心者向け！3時間でミニゲームを作ろう(1)

2022/03/20に公開

JavaScript

idea

ようこそ！

このコースは、プログラミングをしたことがない学生やプログラミングに興味のある初心者を対象に、わかりやすいプログラミング入門ガイドを目指すものです。コースを学ぶことで、最終的には下のように自分でミニゲームを書くことができるようになります。

あなたは小学生、中学生、大学生、社会人、定年退職者にもかかわらず、基礎知識がなくてもいいです。Webを閲覧できるブラウザが搭載されたパソコンがあれば、勉強を始めることができます！

プログラミングの勉強は5時間以内で終了できます。さあ、はじめましょう

準備

まず、パソコンがあることを確認します。パソコンのOS（Operating System）は、ブラウザとメモ帳（テキストエディタ）があれば、Windows、MacOS、Linux、いずれもかまいません。

1.ZIPファイルをダウンロードし、解凍してください

ここをクリックして、zipファイルyour-first-experience-of-programming-main.zipをデスクトップにダウンロードし、zipファイルを右クリックして、「すべて展開」を選択してください。 (Macをお使いの場合、ZIPファイルの展開に問題がある場合は、こちらをクリックしたら解決できます)

デスクトップにyour-first-experience-of-programming-mainというフォルダが表示されて、ダブルクリックでこのフォルダを開くと、以下のような状態になっています。

2. ブラウザとメモ帳の両方で、my-game.htmlファイルを開く

「my-game.html」をダブルクリックすると、ブラウザで開くはずです。ない場合は、右クリックしてメニューから「プログラムから開く」を選択し、お使いのブラウザを選択してください。

ブラウザで「my-game.html」を開くと、ページ上に薄いグレーのボックスが表示されます。これがゲーム表示エリアで、ここに私たちの書いたミニゲームが表示されます。

次に、再び「my-game.html」を右クリックし、「プログラムから開く」でメモ帳を選択すると、開いたメモ帳の中にこれが見えます。

<!DOCTYPE html>
<html lang="en">
<head>@[gist]()

   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Game</title>
</head>
<body>
   <canvas id="app"></canvas>
   <script src="./index.js"></script>
   <script src="./pattern.js"></script>
   <script>
       //この行より前の内容は変更しないでください
       let width = 30
       let height = 18
       let mygame = new Game(width, height, 2)
       // 次の行にコードを書く
   
       // この行以降は変更しないでください
   </script>
</body>
</html>

OK！準備が終わった！

ヒント：コードの後半でうまくいかない場合、ここに戻って上記のコードを再コピーすると、問題が解決できます。【やらなくてもいいが、コーディング体験を最適化できること】実際には、メモ帳でもコードを書くことはできますが、使い勝手が悪いかもしれません。面倒なことでも我慢できる方は、http://www.sublimetext.com/3 からsublime textをダウンロードして、メモ帳の代わりに使うこともできます。 (他の使いやすいエディタがあれば、それもいい）

はじまり

次の目標は、冒頭に出てくるミニゲームを作ることです。ここをクリックすると、ゲームを体験することができます。

このゲームを体験すると、小さな人を操って歩いたりジャンプしたりすることで、薄いグレーのエリアは自由に動けるが、壁や床（濃いグレーの部分）を越えないことが発見します。

このゲームをブロックで作った集合と考えた場合、集合体に必ず含まれる最も基本的なブロックは何でしょうか？

操られる人
人には越えられない壁
自由に動ける空気

では、前のコードを見ながら、ここに注目しましょう。

let width = 30
let height = 18
let mygame = new Game(width, height, 2)
 // 次の行にコードを書いてください

注目すべきのは、この4行のうち、最初の3行がすべて同じ形式です。

すなわち

let AAA=BBB

この意味も非常に簡単で、文字通り「AAAイコールBBB」という意味です。

例えば

let width = 30
変数width を 30　とする

let height = 18
height を　18　とする

let mygame = new Game(width, height, 2)
mygame　を new Game(width, height, 2)　とする

これはどういう意味？あなたが等号の右側にあるものに名前をつけて、その名前を等号の左側にあるものにし、その名前で等号の右側にあるものを召喚できるということです。

let width = 30
let height = 18
let mygame = new Game(width, height, 2)

new Game(width, height, 2)のコード列で、widthは30、heightは18を表します

すなわち
new Game(30, 18, 2)に相当します

例えば、let width = 30 の場合はwidthという名前を30につけた、あるいはwidthを30に紐づけたと理解できるでしょう。

つまり、右の数字は「入れ替える」ことができます。30に紐づける必要がなければ、「width = 42」というコードでwidthを42につけることができます。この時点で30は名前width を失い、42はwidthという新しい名前を獲得し、widthからすれば42という新しい「エンティティ」を持つことになります。コーディングでは、第二種の考え方が必要です。

次に4行目をご覧ください。

// 次の行にコードを書いてください

この行はコードではなく、あってもなくてもコードに影響を与えないメモです。削除してもいいし、そのままでもいいです。忘れてはならないのは、このメモを新しい行で続けたい場合は、行頭を//で始めることです。

簡単でしょう？この小さなルールを理解した上で、本題に入りましょう。

前述したように、このミニゲームがブロックの集合から作られると考えるが、私たちのコードでそんなブロックの集合体とは？これです👇

let mygame = new Game(width, height, 2)

この意味は、幅30ブロック、高さ18ブロック（2の意味は後で説明します）のインタフェスを持つ新しいゲームを作り、それに「mygame」という名前を付けることです。つまり、mygameが提供するブロックのいくつかを使って、このインタフェス上にミニゲームを構築することができます。

先ほどの「人」「壁」「空気」という必ず持つべきブロックの種類を再確認しておきましょう。

そして、以下のコードで、それぞれ人間型のブロック、壁型のブロック、空気型のブロックを作ります。

let human = mygame.create.human() // 制御可能な人の人間型ブロックを作成
let wall = mygame.create.wall() // 人が通過できない壁型のブロックを作成
let air = mygame.create.air() // 人が自由に通過できる空気型ブロックを作成

よし、じゃ試してみよう！【次の行にコードを書いてください】の下の行にこれをタイプします。

let human = mygame.create.human()

このように、インタフェスに小さな人を作り出したのです。 ctrl＋sを押して保存し、ページをリフレッシュすると効果が表示されます。

ctrl＋sの押し方：キーボードのctrlキーのいずれかを押したまま、sキーを1回押して、そして離します。

ゲーム画面の左下に小さな緑の四角が表示されますが、人の形をしていません。これを人型にするために、次の行にこれを入力します。

human.style = pattern.human

保存してリフレッシュすると、次のようになります。

先ほどの2行のコードを振り返ってみましょう。

let human = mygame.create.human()
human.style = pattern.human

第１行コードの意味が分かるでしょう。「mygame.create.human()」に「human」という名前をつけています。

また、「mygame.create.human()」はどんな意味のでしょうか？今でも文字通り、「mygameで人間を作る」という意味です。

最後の英語括弧「()」は「実行」を意味します。「人を作る」はアクションなので、このアクションを実行させるために最後に()を使用する必要があります。

第２行のコードも文字通りです。

human.style = pattern.human
人 の スタイル は（画面での）「human」というパターン

styleがhumanの属性であるから、属性を適切なもの（値）に変更することで、そのブロックに影響を与えます。この例では、style属性は別のパターンに変更することができ、pattern.humanを選んで、デフォルトのhuman（緑の四角）の外観を、横柄なランニングマンの形に変えました。

これで小人は自由に動き回れます! キーボードのa、d、wで、小人の歩く方向やジャンプする方向を操作できます。

この記事はMengruさんの原作から転載されたものであり、Mengruさんが転載の過程で助けてくれたことにとても感謝しています。原作のURL:https://fp.mengru.space