5分で動くパラパラアニメ

5分で動くパラパラアニメ

JavaScriptでの「パラパラアニメ作成」を動画にしています。
新規作成から5分で完成を目指しているので、簡略させてもらってます。

 

title_Webアプリ_動画リスト

5分で動くパラパラアニメ_YouTube

 
title_Webアプリ_学習内容

動画で学べるJavaScript「5分で動くパラパラアニメ」
5分で動くパラパラアニメ(サンプル)
※ スマートフォンでも動きます。

 

JavaScriptでパラパラアニメを表示します。

タイマー機能を使って、ページが読み込まれたら自動でアニメをスタートさせます。

 

以下の命令を使用します。

・onLoad

・setInterval

・getElementById

 
title_Webアプリ_使用素材

5分で動くパラパラアニメ_015分で動くパラパラアニメ_フリー素材_02

 
title_Webアプリ_ソース
 

1.新規作成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
</head>
<body>
<img src="0.png" id="img1">
</body>
</html>

2.画像の変更(クリック処理)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
    <script>
	function parapara(){
		document.getElementById('img1').src= "1.png";
	}
    </script>
</head>
<body>
<img src="0.png" id="img1" onClick="parapara()">
</body>
</html>

3.画像の変更(パラパラアニメ)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
    <script>
	var c = 0;
	function parapara(){
		c++;
		var no = c % 2;
		document.getElementById('img1').src= no + ".png";
	}
    </script>
</head>
<body>
<img src="0.png" id="img1" onClick="parapara()">
</body>
</html>

4.タイマー処理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>5分で動くパラパラアニメ</title>
    <script>
	var c = 0;
	function parapara(){
		c++;
		var no = c % 2;
		document.getElementById('img1').src= no + ".png";
	}
	function startAnima() {
		setInterval("parapara()",600);
	}
    </script>
</head>
<body onLoad="startAnima()">
<img src="0.png" id="img1" >
</body>
</html>
15分で作る?「スロットゲームモドキ」

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>

 

JavaScriptで背景画像を変えてみよう

JavaScriptで背景画像を変えてみよう

HTML5+JavaScript+CSSでの「背景画像の変更」を動画にしています。
新規作成から15分で完成を目指しているので、簡略させてもらってます。

 

 

動画で学ぶWebアプリ_背景画像の変更

【 動画リスト 】

前半:新規作成 ( 約9分 )
http://youtu.be/Gr0tEO3Luio

後半:画像の変更 ( 約7分 )
http://youtu.be/9NAAb68J1bM

 

【 使用イラスト 】

動画で学ぶWebアプリ_素材ネコ動画で学ぶWebアプリ_素材トリ動画で学ぶWebアプリ_素材猿動画で学ぶWebアプリ_素材スライム

 

【 学習内容 】

JavaScriptで背景画像を変えてみようボタンクリックで背景画像を変更する。(サンプル)
※ スマートフォンでも動きます。

1.新規作成
– HTMLについて
– 文字コードについて

2.ボタンの表示 (HTML)
– ボタンについて

3.文字サイズの変更 ( CSS )
– CSSとは
– フォントサイズの変更

4.画像の表示 (JavaScript)
– クリック処理
– 画像の表示

 


1.新規作成

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

 


2.ボタンの表示 ( HTML )

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" >
	<input type="button" value="トリ" >

</body>
</html>

 


3.文字サイズの変更 ( CSS )

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
	<style>
		/* フォントサイズの変更 */
		input {
        		font-size:40px;
		}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" >
	<input type="button" value="トリ" >

</body>
</html>

 


4.画像の表示 (JavaScript)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
	<style>
		/* フォントサイズの変更 */
		input {
        		font-size:40px;
		}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" onClick="document.body.style.backgroundImage = 'url(cat.png)';">
	<input type="button" value="トリ" onClick="document.body.style.backgroundImage = 'url(bird.png)';">

</body>
</html>

 

【 クリック処理 補足 】

onClick JavaScriptで背景色を変えてみよう

JavaScriptで背景色を変えてみよう

JavaScriptで背景色を変えてみよう

HTML5+JavaScript+CSSでの「背景色の変更」を動画にしています。
新規作成から15分で完成を目指しているので、色々簡略させてもらってます。

title_Webアプリ_動画リスト

Webアプリ講座【JavaScriptで背景色を変えてみよう 】

 

1/6 準備編 [6:33]
– htmlファイルの作成
http://youtu.be/jocVEcOb-9Q

2/6 新規作成 [5:09]
– HTMLについて
– 文字コードについて
http://youtu.be/XLSFjm0F5tM

3/6 ボタンの表示 (HTML) [3:47]
– ボタンについて
http://youtu.be/2JKmHivoJs4

4/6.背景色の変更 (JavaScript) [4:13]
– クリック処理
– 背景色の変更
http://youtu.be/hgvRbw3ceBY

5/6 背景色の変更 (JavaScript) [3:12]
– 16進数について
http://youtu.be/lkZoty4u5tU

6/6 フォントサイズの変更 (CSS)  [3:01]
– フォントサイズの変更
http://youtu.be/X1ixmmEvIMo

 

 
title_Webアプリ_学習内容

JavaScriptで背景色を変えてみよう_サンプル2

ボタンクリックで背景背景色を変更する。(サンプル)
※ スマートフォンでも動きます。

1.新規作成
– HTMLについて
– 文字コードについて

2.ボタンの表示 (HTML)
– ボタンについて

3.背景色の変更 (JavaScript)
– クリック処理
– 背景色の変更
– 16進数について

4.フォントサイズの変更 (CSS)
– CSSとは
– フォントサイズの変更

 
title_Webアプリ_ソース

1.新規作成

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

 


2.ボタンの表示 (HTML)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" >
	<input type="button" value="青" >

</body>
</html>

 


3-1.背景色の変更 (JavaScript)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" onClick="document.bgColor = 'red';">
	<input type="button" value="青" onClick="document.bgColor = 'blue';">

</body>
</html>

 

 

【 クリック処理 補足 】

onClick-JavaScriptで背景色を変えてみよう

 

 

 


3-2.16進数での指定

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" onClick="document.bgColor = 'red';">
	<input type="button" value="青" onClick="document.bgColor = 'blue';">
 	<input type="button" value="深緑" onClick="document.bgColor = '#006400';">

</body>
</html>

 


4.フォントサイズの変更 (CSS)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景色を変えてみよう</title>

	<style>
	/* フォントサイズの変更 */
	input {
		font-size:40px;
	}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="赤" onClick="document.bgColor = 'red';">
	<input type="button" value="青" onClick="document.bgColor = 'blue';">
 	<input type="button" value="深緑" onClick="document.bgColor = '#006400';">

</body>
</html>