15分で作る？「スロットゲームモドキ」

たんたむ

HTML5+JavaScript+CSSでの「スロットゲームモドキ」を動画にしています。
新規作成から15分で完成を目指しているので、ゲームとしては成り立っていません。
※ 絵柄がそろっても何も起こりません。

 

動画で学ぶWebアプリ_15分で作る「スロットゲームモドキ」_YouTube

 

【 学習内容 】

動画で学ぶWebアプリ「15分で作るスロットゲームモドキ」
15分で作るスロットゲームモドキ。（サンプル）

ゲームとしては完成してませんが、ボタンとイメージを並べてスロットゲームの一部を作成します。
プログラミングが分かってくると、ゲームとして完成させることが出来ます。

・HTML5でレイアウト
・CSSでボタンのデザイン
・JavaScriptで画像の変更

【 使用イラスト 】

以下の画像を同一フォルダ（動画ではデスクトップ）に保存してください。
15分で作る「スロットゲームモドキ」_0015分で作る「スロットゲームモドキ」_0015分で作る「スロットゲームモドキ」_0215分で作る「スロットゲームモドキ」_0315分で作る「スロットゲームモドキ」_0415分で作る「スロットゲームモドキ」_05

1.新規作成

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ページタイトル</title>
</head>
<body>
こんにちは！
</body>
</html>

 

2.HTML5での画面作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
</head>
<body>
<p>
	<input type="button" value="・" >
	<input type="button" value="・" >
	<input type="button" value="・" >
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 

3.CSSでデザインする

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
</head>
<body>
<p>
	<input type="button" value="・" >
	<input type="button" value="・" >
	<input type="button" value="・" >
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 

4.画像の変更

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
</head>
<body>
<p>
	<input type="button" value="・" onClick="document.getElementById('img1').src = 'f1.png';">
	<input type="button" value="・" >
	<input type="button" value="・" >
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 

5.関数の利用

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
<script>
function setImage(id) {

	// 画像の変更
	document.getElementById(id).src = "f1.png";
}

</SCRIPT>
</head>
<body>
<p>
	<input type="button" value="・" onClick="setImage('img1')">
	<input type="button" value="・" onClick="setImage('img2')">
	<input type="button" value="・" onClick="setImage('img3')">
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>

 

6.ランダムでの画像の変更

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットゲーム</title>
<style>
p{
	text-align: center;
}
input {
	font-size:50px;
	margin: 0px 0px 20px 0px;
	padding: 0px 30px 0px 30px;
	border-radius:8px;
}
</style>
<script>
function setImage(id) {

	// ランダムで画像を変える
	var images =["f1.png","f2.png","f3.png","f4.png","f5.png"];
	var i = parseInt(Math.random() * 5);

	// 画像の変更
	document.getElementById(id).src = images[i];
}

</SCRIPT>
</head>
<body>
<p>
	<input type="button" value="・" onClick="setImage('img1')">
	<input type="button" value="・" onClick="setImage('img2')">
	<input type="button" value="・" onClick="setImage('img3')">
	<br>
	<img src="f0.png" id="img1">
	<img src="f0.png" id="img2">
	<img src="f0.png" id="img3">
</p>
</body>
</html>