FRIENDS学習(エピソード1-1-1)

このページでは、Webブラウザゲームの作り方を解説します。

そもそもWebブラウザゲームとは何か？
こういうやつです↓

インターネットを見ていると、ホームページ上でできるゲームがありますよね？
ダウンロードとか無しでできるやつです。
それのことです。
広告と一緒に付いているようなゲームが多いですね。
ゲームを少ししたら広告が表示されてくるものもありますね。

ちなみに上の画像は私が作ったWebブラウザゲームです。
私が作ったゲームは以下にリンクを付けておきます。
このページを読んだ後に試してみてください。

このページを読んでくれているあなたは、少しでもWebブラウザゲームを作りたいと思っているはずですので、さっそく作り方を解説します。
このページは導入ですので、どんな感じで作っていくのか、全体像を説明します。
いきなり小難しい専門用語が出てくると、余計わからなくなりますので。

目次

1. Visual Studio Codeをインストールする
2. プログラムを書く
3. ウェブサイトにアップする

目次

1. Visual Studio Codeをインストールする
2. プログラムを書く
3. ウェブサイトにアップする

Visual Studio Codeをインストールする

まずはVisual Studio Codeというアプリをインストールします。
↓のマークのやつですが、知っていますか？
アドレスも付けておきます。
検索すればすぐ出てきますけどね。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

このアプリはプログラムを書くために使用します。
実際このアプリをインストールしなくても、メモ帳や秀丸やサクラエディタなどのテキストツールでもよいのですが、絶対これの方が使いやすいのでインストールした方がよいです。
インストール手順などは別ページで解説します。
今回は導入ですので概要のみです。

プログラムを書く

これが本題ですね。
プログラムを書いて、ゲームを作ります。
どんな言語を使うのか？

html, css, javascriptの3つです。
何だそれ？そりゃ難しそうだな、無理だ、と思った方。
全く問題ありません(*^^)v
簡単です。
私はプログラミングのプロではありません。
はっきり言って素人です。
私が説明する内容は、プロの方から見ればまるで素人だとすぐにわかることでしょう。

しかし、そんな私でも作ることができました。
私はプログラミングの学校に通っていません。
学習用の教材も見たことがありません。
インターネットで調べながら作りたいものを作っただけです。
だから費用は全くかかっていません。
調べるのに時間はかかったけど・・・(+_+)

なので、簡単に解説できますので、すぐにできるようになると思います。
別ページで解説します。

ちなみに、
htmlというのは、ホームページを作るときに使うやつです。
画面のどこにどんな文字や画像が表示させるかを設定するためのものです。

cssというのは、表示する文字のサイズや色やスペースのサイズなどを設定するために使うものです。

javascriptは、どんな状態になったらどうする、という処理を書くものです。
これが一番プログラミングっぽいかな。
例えば、ボールを地面に落としたら、ゲームオーバーと表示させる、とかです。

ウェブサイトにアップする

ウェブサイトにアップしなくても、自分のPCだけで遊ぶことはできます。
作ったファイルを他のPCで開けば、別のPCでも遊ぶことができます。
とにかくそれだけでよい人はこの対応は不要です。

でもせっかくなので、ウェブサイトにアップして、インターネットでたくさんの人に遊んでもらいたいですよね？
初めは恥ずかしいかもしれませんが。
その覚悟がある方は、自分のウェブサイトを作る必要があります。
ウェブサイトを作るためには、レンタルサーバーを借りる必要があります。
レンタルサーバーには無料のものと有料のものがあります。
容量の問題や、急にサービスが終了するといったことがありますので、私は有料をお勧めしますが、最初は無料でもよいです。
というか、この項目はゲーム制作とは少し異なる内容ですので、一旦無視しても構いません。
とりあえずプログラムの作成まででゲームは作れますので。



このページは導入ですので、これで以上です。
詳細は別ページで解説します。

私が作ったゲームはこちら

Monica:
There’s nothing to tell. It’s just some guy I work with.

Joey:
Come on! You’re going out with a guy. There’s gotta be something wrong with him.

Chandler:
So does he have a hump and a hair piece?

Phoebe:
Wait. Does he eat chalk? Because I don’t want her to go through what I went through with Carl.

Monica:
Okay, everybody relax. This is not even a date. It’s just two people going out to dinner and not having sex.

Chandler:
Sounds like a date to me.
(後略)

FRIENDS 1-1 The One Where It All Began （マンハッタンの６人）より引用

【解説】

There’s はThere is の略です。
There+be動詞+・・・ の形で・・・がある、・・・がいるという意味を表します。
目的語や補語を含まないので、SＶ(第1文型)の一種と考えられています。
There is a pen.で、ペンがある、という意味になります。
nothingは代名詞で何も・・・ない、という意味であり、There is の後にnothingを入れると、何もないがある→何もない、という意味になります。
to tellはto 不定詞であり、言うことは何もない、という意味になります。

It’s は It is の略です。
guy は男、やつ、という名詞です。
someは形容詞でいくつかの、という意味がよく知られていますが、ここでは、ある・・・、という意味の形容詞です。
詳しいことを知らないときに、someを付けることで、ある人、ある男、という意味になります。
justは副詞で、ただ・・・だけ、・・・にすぎない、という意味です。

It’s just some guy who(m) I work with.
guyとIの間には、関係代名詞のwhoまたはwhomが省略されています。
先行詞が人の目的格の場合は、whoでもwhomでもどちらでもよいです。
It’s just some guyで、それはある男にすぎない、と文章が完成していますが、その後続けてIという主語になる言葉がきています。
一つの文の中で、主語は一つしか登場できませんので、何かおかしいと気づかなければいけません。
それはある男にすぎない私は・・・、だとおかしいですよね。
それはある男にすぎない、そして私は、などのようにandなどがないと、文章として変ですよね。

I work withは、私は・・・と一緒に働く、という意味ですが、withの後に何も書かれていません。
It’s just some guy I work with.という文は、以下の2つの文が元の形で、関係代名詞を使って合体したものです。
It’s just some guy.
I work with some guy.

I work with some guy. のsome guy を目的格の関係代名詞whoに変えて、前の文のsome guyの後にwhoを持っていきます。(whomでもよいです。)
It’s just some guy who(m) I work with.　となります。
目的格の関係代名詞はしばしば省略されます。
省略しても、省略していることがわかるためです。
It’s just some guyの文章の後のI work withがsome guyを修飾します。
それは私が一緒に働いているある男にすぎない、という訳になります。

Come onは、主語がないので命令形です。
onは副詞で、続けて、先に向かって、というような意味です。
come on で、さあ行こう、という意味もありますが、いい加減にして、おいおい、という意味もあります。
ここでは後者です。

go out with は、・・・と付き合う、という意味です。
進行形として使われています。
おまえは男と付き合っている、という意味です。(登場人物のJoeyは積極的な男性なので、おまえと訳しています。)

There’s はThere hasの略です。
Sにあたるsomethingが単数扱いの代名詞なので、haveではなくhasとなっています。
gottaはgot to の略です。
have got toで、have toと同じように、・・・しなければならない、・・・に違いないという意味を表します。
なので、There’sの後にgotやgottaがきたら、isではなくhasの略だと気づく必要があります。
彼には何か悪いものがあるに違いない、という意味になります。

So does he have a hump and a hair piece?
humpは名詞で”こぶ”、hair pieceは名詞で”かつら”
彼にはこぶがある？かつらかぶってる？という意味です。

Does he eat chalk?
彼はチョークを食べる？という意味です。

Because I don’t want her to go through what I went through with Carl.
wantは、SVO to doの形で、S(人)がＯ(人・物)に・・・してほしいと願っている、・・・であってほしいと思っている、という意味を表します。
don’tがあるため、してほしいと願っていない、してほしくないと願っている、という意味です。
go throughは、・・・を通過する、・・・を経験する、という意味です。
go throughの目的語は、what I went through with Carlです。
what I went through with Carlを彼女に経験してほしくない、という意味になります。
whatは、・・・すること(もの)、を表す関係代名詞です。
私がCarlと経験したこと、という意味になります。

Okay, everybody relax.
オッケー、皆リラックスして、という意味です。

This is not even a date.
evenは、・・・さえ、・・・すらという、副詞です。
これはデートですらない、という意味です。

It’s just two people going out to dinner and not having sex.
justは、・・・にすぎない、という副詞です。
go out は、出かけるという動詞です。
ディナーへでかける、という意味になります。

peopleの後がgoingという分詞になっており、peopleを修飾します。
ディナーへ出かける人々、という意味になります。
それはディナーへ出かけるだけの2人にすぎない、という意味になります。

and not having sexの、not havingは同じく分詞で、peopleを修飾します。
そしてセックスはしない2人だ、という意味になります。

Sounds like a date to me.
soundは、It soundsの形で、・・・のように聞こえる、・・・のように思われる、という意味になります。
sounds+形容詞、sounds like+名詞、の形で使われます。
to me は、私にとって、という意味です。
It sounds like ・・・to ～、の形で使われます。
口語では、明らかに意味のわかるItは省略されます。
私にはデートのように聞こえる、という訳になります。