このページでは、Webブラウザゲームの作り方を解説します。
そもそもWebブラウザゲームとは何か？
こういうやつです↓
インターネットを見ていると、ホームページ上でできるゲームがありますよね？
ダウンロードとか無しでできるやつです。
それのことです。
広告と一緒に付いているようなゲームが多いですね。
ゲームを少ししたら広告が表示されてくるものもありますね。
ちなみに上の画像は私が作ったWebブラウザゲームです。
私が作ったゲームは以下にリンクを付けておきます。
このページを読んだ後に試してみてください。
このページを読んでくれているあなたは、少しでもWebブラウザゲームを作りたいと思っているはずですので、さっそく作り方を解説します。
このページは導入ですので、どんな感じで作っていくのか、全体像を説明します。
いきなり小難しい専門用語が出てくると、余計わからなくなりますので。
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でも遊ぶことができます。
とにかくそれだけでよい人はこの対応は不要です。
でもせっかくなので、ウェブサイトにアップして、インターネットでたくさんの人に遊んでもらいたいですよね？
初めは恥ずかしいかもしれませんが。
その覚悟がある方は、自分のウェブサイトを作る必要があります。
ウェブサイトを作るためには、レンタルサーバーを借りる必要があります。
レンタルサーバーには無料のものと有料のものがあります。
容量の問題や、急にサービスが終了するといったことがありますので、私は有料をお勧めしますが、最初は無料でもよいです。
というか、この項目はゲーム制作とは少し異なる内容ですので、一旦無視しても構いません。
とりあえずプログラムの作成まででゲームは作れますので。
このページは導入ですので、これで以上です。
詳細は別ページで解説します。
私が作ったゲームはこちら
put a dent in・・・
make a dent in・・・
どちらも、・・・をへこませる、・・・を減少させる、という意味です。
dentは動詞で、・・・をへこませる、・・・に不利な影響を与える、という意味です。
名詞では、へこみ、へこませること、を意味します。
put、makeの目的語として名詞のdentを使用すると、へこみや減少を置く・つくる、という意味から、へこませる、減少させる、という動詞と同じ意味になります。
以下の例文で解説します。
The global microchip shortage dragging on the auto industry has put barely a dent in production at Toyota, the world’s biggest automaker, thanks to lessons it learned after Japan’s 2011 tsunami disaster.(後略)
JapanToday 2021年5月13日記事 より引用
The global microchip shortageが主語です。
グローバル マイクロチップ不足、という意味です。
dragging on the auto industryで、主語を補足説明しています。
dragは、だらだらと長引く、という意味です。
draggingという分詞の形で、主語を補足説明します。
the autoは名詞で、自動車、を表します。
industryは名詞で、産業、を表します。
自動車産業でだらだらと長引くグローバル マイクロチップ不足、という意味になります。
has put barely a dent in production at Toyota,
hasは現在完了のhaveが、三人称単数現在でhasになったものです。
putは、過去形・過去分詞形ともにputです。
ここではhasの後ろなので、過去分詞として使われています。
has put a dent inの場合、・・・を減少させた、という意味になりますが、barelyという副詞が入っています。
barelyは、ほとんど・・・ない、という意味です。
productionは名詞で、生産、を表します。
トヨタの生産を、ほとんど減少させなかった、という意味になります。
thanks to lessons it learned after Japan’s 2011 tsunami disaster.
thanks to・・・は、・・・のおかげで、という意味です。
toは前置詞なので、直後には名詞がきます。
lessonsは、lessonの複数形です。
授業、レッスン、教訓、などを表します。
itは、トヨタを指します。
learnedは、learnの過去形です。
learnは、・・・を習得する、・・・を学ぶ、という意味です。
目的語がないので、以下のような関係代名詞の省略です。
lessons (which) it learned
それが(トヨタが)学んだ教訓のおかげで、という意味になります。
afterは、・・・の後で、という意味の前置詞です。
接続詞としても使用するため、afterの後は節(s v)がきてもよいです。
ここでは前置詞です。
disasterは名詞で、災害、を表します。
日本の2011年の津波災害の後、という意味になります。
********************************
本サイトは、英語学習者が必ず理解できるように全文解説をしています。
以下のように関連した記事を表示できますので、関連した英文を読み、英語のトレーニングをしてください。
このマークはカテゴリーです。
以下に、この記事のカテゴリーが表示されており、クリックすると、この記事と同じカテゴリーの関連記事が表示されます。
このマークはタグです。
以下にこの記事内で解説したポイントを表したタグが表示されており、クリックすると同じポイントを解説している関連記事が表示されます。
コメント