このページでは、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でも遊ぶことができます。
とにかくそれだけでよい人はこの対応は不要です。
でもせっかくなので、ウェブサイトにアップして、インターネットでたくさんの人に遊んでもらいたいですよね?
初めは恥ずかしいかもしれませんが。
その覚悟がある方は、自分のウェブサイトを作る必要があります。
ウェブサイトを作るためには、レンタルサーバーを借りる必要があります。
レンタルサーバーには無料のものと有料のものがあります。
容量の問題や、急にサービスが終了するといったことがありますので、私は有料をお勧めしますが、最初は無料でもよいです。
というか、この項目はゲーム制作とは少し異なる内容ですので、一旦無視しても構いません。
とりあえずプログラムの作成まででゲームは作れますので。
このページは導入ですので、これで以上です。
詳細は別ページで解説します。
私が作ったゲームはこちら
英語学習に必要なことは、多聴 、多読、多数の実践英会話・英作文です。
わからないことを放置せずに、理解しながらこれらを実行することで、聞ける・読める・アウトプットできるようになります。
まさにトレーニングです。
理解するためには、単語の意味・使い方、熟語の意味・使い方、文法を覚える必要があります。
私は昔、単語帳で単語の暗記に励みました。
効率のよい方法をいろいろ調べて、単語帳を何周も繰り返すという方法を選択しました。
同じ単語をその場で何度も覚えようとするのではなく、1日の中で、1週間の中で何回も同じ単語に出会うことで定着させるという方法です。
この方法は正しいやり方だと思います。
確かに単語を覚えることができました。
しかし、英語のニュースや、問題集の文章を読む中でその単語に出会った際、意味がわかりませんでした。
単語には複数の意味があるので、その意味は知らなかったということがありました。
単語は前置詞などとの組み合わせでも意味が変わります。
1つの単語でも文章の中の位置によって、名詞になったり動詞になったり形容詞になったりします。
全ての意味を覚えるのではなく、コアイメージを掴めばよい、とよく言われていますが、
そのイメージを掴むには、やっぱり文章を読まないといけないと後からわかりました。
これが多読だと思います。
一方、文法について、
私は昔、文法書を最初のページから理解しようとしました。
調査した勉強方法では、とりあえずさらっと全体を読み、大枠を理解しましょうとよく言われていました。
これが本当につまらない勉強だと思いました。
何か無理やり勉強させられている感じ。
この文法って実際に使うのかなぁと思いながら、低いモチベーションで読んでいました。
結果、挫折しました。
できる人もいるとは思いますが、私には無理でした。
そこで編み出した勉強方法は、とりあえず英語のニュースを読む、とりあえず問題集の英文を読む、です。
わからないことに直面した際に、調べて攻略する、です。
これを実践する中で、中学生で習う頻出の”分詞”を知らずに今まで英文を読めるつもりでいたのかと恥ずかしい思いをする、というようなことが多々ありました。
一人で恥ずかしいだけなので、問題ないですけど(笑)
そもそも文法書はシンプルな形で説明しますよね?
その場合は理解できるんですが、長文の複雑な状態になった瞬間に理解不能になりませんか?
基礎を身に付けてから応用というのが基本スタイルなので当然といえば当然ですが。
応用編の解説は、なぜか上級者向けの解説になっていることが多くて、実践で理解したい初心者の私には、非常に困難でした。
なので、私の記事では、実践的な英文を全文解説します。
英語学習者の方が、必ず理解できるようにします。
そうすることで、挫折しないようにします。
一度理解したつもりでも、後から見ると忘れていたり、実は理解できていなかったと気づくことがありますので、忘れたころに同じ記事をまた読んでください。
********************************
本サイトは、英語学習者が必ず理解できるように全文解説をしています。
以下のように関連した記事を表示できますので、関連した英文を読み、英語のトレーニングをしてください。![]()
このマークはカテゴリーです。
以下に、この記事のカテゴリーが表示されており、クリックすると、この記事と同じカテゴリーの関連記事が表示されます。![]()
このマークはタグです。
以下にこの記事内で解説したポイントを表したタグが表示されており、クリックすると同じポイントを解説している関連記事が表示されます。


コメント