とっかかりやすい初心者プログラミング – ババ抜き(3) – | 気ままなプログラマーフリーランス生活

こんばんは、ファルコンMです。

ババ抜きを作るシリーズの第3弾！

今日は、レイアウトについて

ババ抜きゲームをする

ソースコード

いきなりレイアウトです

下のような感じです。1つ前でレイアウトのイメージを作ったのですが、円状テーブル上にプレイヤー、コンピューターを並べるのは難しかった。なので、妥協して、縦1列に並べます。

php コードは以下のような感じ。といっても、html しか使ってないが。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="babanuki.js"></script>
<title>ババ抜き</title>
</head>
<body>
<div id="title" style="position: absolute; left: 10px; top: 10px"><b>ババ抜き</b></div>
<div id="message" style="position: absolute; left: 10px; top: 50px">開始を押してください。</div>
<button id="start" style="position: absolute; left: 10px; top: 100px">開始</button>
<br><br>
<div id="com1" style="position: absolute; left: 10px; top: 150px">プレイヤー</div>
<img src="trump.png" id="pic10" style="position: absolute; left: 200px; top: 150px; clip: rect(0px 51px 76px 0px);">
<div id="com1" style="position: absolute; left: 10px; top: 250px">コンピューター1</div>
<div id="com2" style="position: absolute; left: 10px; top: 350px">コンピューター2</div>
<div id="com3" style="position: absolute; left: 10px; top: 450px">コンピューター3</div>

</body>
</html>

すべて、絶対座標で設定している

タグの位置はすべて絶対座標で指定しています。ゲームの場合は、絶対座標が向いていると思われ。style=”position: absolute; left XXpx; top YYpx” という形で指定します。

画像の切り抜き

画像を毎回ダウンロードするのは処理が重くなるので、一つの画像(trump.png ) をダウンロードし、その画像を切り抜いて使うことで、ダウンロード回数を減らしている。trump.png は、トランプの全カードが書かれている。clip: rect(0px 51px 76px 0px); で指定している。rect は、右上のY座標、右上のX座標、左下のY座標、左下のX座標の順に引数を設定する。ちょっとわかりにくかった。

スラスラわかるHTML＆CSSのきほんサンプル実習 [ 狩野祐東 ]