← 前のページへ戻る

「スロットマシーン」の画面作り



所持金

当たり図柄


 HTMLで「スロットマシーン」の画面作りをします。(この状態では動作しません)
 HTMLは、ホームページ作成ソフトを利用する方が簡単です。

 ゲーム中に使用する画像は全て表示させるように工夫して下さい。
 ここでは、「当たり図柄」の表を表示することで、全ての画像を表示させています。

 HTMLは下記のようになります。参考にして下さい。

<HTML>
<HEAD>
<TITLE>スロットマシーン</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE border="1" bgcolor="#000000">
<TBODY>
<TR>
<TD bgcolor="#ffffff"><IMG src="image0.gif" width="100" height="100" border="0"></TD>
<TD bgcolor="#ffffff"><IMG src="image1.gif" width="100" height="100" border="0"></TD>
<TD bgcolor="#ffffff"><IMG src="image2.gif" width="100" height="100" border="0"></TD>
<TD align="center" valign="middle">
<FORM><FONT color="#ffffff"><BR>
所持金<BR>
</FONT><BR>
<INPUT size="10" type="text" style="font-size:18px" readonly></FORM>
</TD>
</TR>
<TR>
<TD align="center"><INPUT type="button" value="STOP" style="font-size:18px"></TD>
<TD align="center"><INPUT type="button" value="STOP" style="font-size:18px"></TD>
<TD align="center"><INPUT type="button" value="STOP" style="font-size:18px"></TD>
<TD align="center"><INPUT type="button" value="START" style="font-size:18px"></TD>
</TR>
</TBODY>
</TABLE>
<FORM><INPUT size="50" type="text" value=" しばらくお待ち下さい。" style="font-size:18px" readonly></FORM>
<TABLE border="1">
<TBODY>
<TR>
<TD colspan="5" align="center">当たり図柄</TD>
</TR>
<TR>
<TD><IMG src="image0.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image1.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image2.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image3.gif" width="50" height="50" border="0"></TD>
<TD><IMG src="image4.gif" width="50" height="50" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>
</HTML>