シンプルゲームを作ると、プログラミング言語とその環境などがよく理解できる、ユゲタです。
今回からいよいよプログラミング作業を開始します。
ブラウザで作るゲームは、ホームページを作る作業と比較的にているので、
そういう基本的な作業をめんどくさいと感じる人は、テンプレートを作っておいて使い回すといいでしょう。
初期環境構築がテンプレートでできていると、その中のプログラムを集中して作ることができますよ。
今回はそのテンプレート部分になりえるファイル構築をやっておきます。
ファイル構築
まず今回必要なファイルを作っていきます。
<!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(){ ... })(); ファイル全体とこの記述でラップしています。
