Webブラウザで簡単ゲームを作ってみよう: 壁打ちテニス編 #3「表示関連プログラム」

2021年10月9日

Javascript テクノロジー

eyecatch シンプルゲームを作ると、プログラミング言語とその環境などがよく理解できる、ユゲタです。 今回からいよいよプログラミング作業を開始します。 ブラウザで作るゲームは、ホームページを作る作業と比較的にているので、 そういう基本的な作業をめんどくさいと感じる人は、テンプレートを作っておいて使い回すといいでしょう。 初期環境構築がテンプレートでできていると、その中のプログラムを集中して作ることができますよ。 今回はそのテンプレート部分になりえるファイル構築をやっておきます。

ファイル構築

まず今回必要なファイルを作っていきます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>Mini-Tennis</title> <link rel="stylesheet" href="tennis.css"> <script src="tennis.js"></script> </head> <body> <h1>Mini-Tennis</h1> <div id="tennis"> <div id="racket"></div> <div id="ball"></div> </div> </body> </html> html,body{ width:100%; height:100%; padding:0; margin:0; outline:0; border:0; overflow:hidden; } h1{ text-align:center; width:90%; margin:10px auto; background-color:#eee; padding:5px; font-weight:bold; font-size:24px; } :root{ --color-draw:black; } #tennis{ width:90%; height:calc(90% - 50px); border-style:solid; border-color:var(--color-draw); border-width:5px 5px 0 5px; position:relative; margin-left:50%; transform:translate(-50%,0); background-color:#eee; } #racket{ width:50px; height:5px; background-color:var(--color-draw); position:absolute; bottom:20px; left:100px; } #ball{ width:10px; height:10px; border-radius:50%; background-color:var(--color-draw); position:absolute; top:50%; left:50%; } (function(){ function MAIN(){ } switch(document.readyState){ case "complete" : new MAIN();break; default : window.addEventListener("load" , (function(options){new MAIN()}).bind(this));break; } })();

表示キャプチャ

解説

HTMLとCSSで、ゲーム画面の基本部分を構築しておきました。 色や文字など、ご自身のモチベーションの上がるように変更してみるというのも、大事な作業なので、 是非バックグラウンド画像なども含めて、ゲーム画面をカスタマイズしてみてください。 ただし、ゲーム画面内がごちゃごちゃしないようにしないと、ボールなどが動き出した時に見えづらくなりますからね。 ゲームのユーザーインターフェイスを少しだけ体感できるかもしれませんね。 あと、少し長めのjavascriptプログラムに、ギョッとした人、ごめんなさい、ユゲタの基本的な構造で書いているので、 できればこれになれてもらうと、今後のJavascript人生が楽になると信じてついてきてください。 まず、ユゲタ式javascriptフォーマットは、基本的に無名関数で進めていくので、既存のwebサイトのグローバル変数や関数は極力汚さないというポリシーでやります。 なので、(funciton(){ ... })(); ファイル全体とこの記述でラップしています。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。