★ジャンル別雑文集&ホームページ作成
&JavaScriptゲーム★

雑文の小部屋ホームページアドレス
★当サイトは"JavaScript"を有効にして
ご利用いただくと便利です★
付録4.JavaScriptプログラミングサンプル

A.画像を出すサンプル
  1番目のグーをクリックすると別のグーが出る
  2番目のチョキにマウスを重ねると別のチョキが出る


<img src="images/guu.png" style="width:100px; height:100px" onclick="mySampleA1()">
<img src="images/cyoki.png" style="width:100px; height:100px" onmouseover="mySampleA2()">
<img id="pictA1" src="images/guu.png" style="width:100px; height:100px">
<img id="pictA2" src="images/cyoki.png" style="width:100px; height:100px">

<script>
document.getElementById("pictA1").style.visibility = "hidden";
document.getElementById("pictA2").style.visibility = "hidden";
function mySampleA1(){
document.getElementById("pictA1").style.visibility = "visible";
}
function mySampleA2(){
document.getElementById("pictA2").style.visibility = "visible";
}
</script>


B.画像を消すサンプル
  グーをクリックするとそのグーが消える
  チョキにマウスを重ねるとそのチョキが消える
  左側のパーにマウスを重ねた時だけ右側のパーが消える


<img id="pictB1" src="images/guu.png" style="width:100px; height:100px" onclick="mySampleB1()">
<img id="pictB2" src="images/cyoki.png" style="width:100px; height:100px" onmouseover="mySampleB2()">
<img src="images/paa.png" style="width:100px; height:100px" onmouseover="mySampleB3()" onmouseout="mySampleB4()">
<img id="pictB3" src="images/paa.png" style="width:100px; height:100px">

<script>
function mySampleB1(){
document.getElementById("pictB1").style.visibility = "hidden";
}
function mySampleB2(){
document.getElementById("pictB2").style.visibility = "hidden";
}
function mySampleB3(){
document.getElementById("pictB3").style.visibility = "hidden";
}
function mySampleB4(){
document.getElementById("pictB3").style.visibility = "visible";
}
</script>


C.画像を変えるサンプル
  1番目のグーをクリックするとそのグーがチョキに変わる
  2番目のチョキにマウスを重ねるとそのチョキがパーに変わる
  3番目のパーにマウスを重ねた時だけそのパーがグーに変わる


<img id="pictC1" src="images/guu.png" style="width:100px; height:100px" onclick="mySampleC1()">
<img id="pictC2" src="images/cyoki.png" style="width:100px; height:100px" onmouseover="mySampleC2()">
<img id="pictC3" src="images/paa.png" style="width:100px; height:100px" onmouseover="mySampleC3()" onmouseout="mySampleC4()">

<script>
function mySampleC1(){
document.getElementById("pictC1").src = "images/cyoki.png";
}
function mySampleC2(){
document.getElementById("pictC2").src = "images/paa.png";
}
function mySampleC3(){
document.getElementById("pictC3").src = "images/guu.png";
}
function mySampleC4(){
document.getElementById("pictC3").src = "images/paa.png";
}
</script>


D.画像を手動で動かすサンプル
  枠内をクリックするたびにボールが右に40px下に20pxずつ動く
  ただし上下左右の枠に達した場合はボールがそれ以上動かないようにする


<div style="position:relative; background-color:#ffffff; border:1px solid #000000; width:600px; height:200px" onclick="mySampleD()">
<img id="pictD" src="images/ball.gif" style="position:absolute; left:10px; top:10px; width:16px; height:16px">
</div>

<script>
myLeftD = parseInt(document.getElementById("pictD").style.left);
myTopD = parseInt(document.getElementById("pictD").style.top);
function mySampleD(){
myLeftD += 40;
myTopD += 20;
if(myLeftD<0){
myLeftD = 0;
}
if(myLeftD>584){
myLeftD = 584;
}
if(myTopD<0){
myTopD = 0;
}
if(myTopD>184){
myTopD = 184;
}
document.getElementById("pictD").style.left = myLeftD+"px";
document.getElementById("pictD").style.top = myTopD+"px";
}
</script>


E.画像を自動で動かすサンプル
  ボールを1回クリックすると50ミリ秒ごとに右に2px下に1pxずつ自動で動く
  ただし上下左右の枠に達した直後にボールが消えるようにする


<div style="position:relative; background-color:#ffffff; border:1px solid #000000; width:600px; height:200px">
<img id="pictE" src="images/ball.gif" style="position:absolute; left:10px; top:10px; width:16px; height:16px" onclick="mySampleE()">
</div>

<script>
myLeftE = parseInt(document.getElementById("pictE").style.left);
myTopE = parseInt(document.getElementById("pictE").style.top);
function mySampleE(){
if(myLeftE<0 || myLeftE>584 || myTopE<0 || myTopE>184){
document.getElementById("pictE").style.visibility = "hidden";
return;
}
myLeftE += 2;
myTopE += 1;
document.getElementById("pictE").style.left = myLeftE+"px";
document.getElementById("pictE").style.top = myTopE+"px";
setTimeout("mySampleE()",50);
}
</script>


F.画像を自動で動かし続けるサンプル
  ボールを1回クリックすると50ミリ秒ごとに右に2px下に1pxずつ自動で動く
  ただし上下左右の枠にぶつかるとボールが跳ね返るようにする


<div style="position:relative; background-color:#ffffff; border:1px solid #000000; width:600px; height:200px">
<img id="pictF" src="images/ball.gif" style="position:absolute; left:10px; top:10px; width:16px; height:16px" onclick="mySampleF()">
</div>

<script>
myLeftF = parseInt(document.getElementById("pictF").style.left);
myTopF = parseInt(document.getElementById("pictF").style.top);
moveXF = 2;
moveYF = 1;
function mySampleF(){
myLeftF += moveXF;
myTopF += moveYF;
if(myLeftF<0){
myLeftF = 0;
moveXF = -moveXF;
}
if(myLeftF>584){
myLeftF = 584;
moveXF = -moveXF;
}
if(myTopF<0){
myTopF = 0;
moveYF = -moveYF;
}
if(myTopF>184){
myTopF = 184;
moveYF = -moveYF;
}
document.getElementById("pictF").style.left = myLeftF+"px";
document.getElementById("pictF").style.top = myTopF+"px";
setTimeout("mySampleF()",50);
}
</script>


G.クロスフェードによる画像スライドショーのサンプル
  7秒ごとに画像がクロスフェードで切り替わる
  クロスフェードは50ミリ秒ごとに5/100ずつ変化する
  5枚の画像が順番通り切り替わり自動で無限ループする


<img id="pictG2" src="" style="position:absolute; left:80px; top:30px; width:200px; height:130px">
<img id="pictG1" src="" style="position:absolute; left:80px; top:30px; width:200px; height:130px">

<script>
PicturesG = [];
PicturesG[0] = "images/capture/game20.gif";
PicturesG[1] = "images/capture/game21.gif";
PicturesG[2] = "images/capture/game22.gif";
PicturesG[3] = "images/capture/game23.gif";
PicturesG[4] = "images/capture/game24.gif";
OpacityG1 = 100;
OpacityG2 = 0;
myNumG1 = 0;
myNumG2 = 1;
G1 = document.getElementById("pictG1");
G2 = document.getElementById("pictG2");
G1.src = PicturesG[myNumG1];
G2.src = PicturesG[myNumG2];
setTimeout("mySampleG()",1000*7);

function mySampleG(){
OpacityG1 -= 5;
OpacityG2 += 5;
G1.style.opacity = (OpacityG1/100);
G2.style.opacity = (OpacityG2/100);
if(OpacityG1==0){
myNumG1 = (myNumG1+1)%5;
myNumG2 = (myNumG2+1)%5;
G1.src = PicturesG[myNumG1];
G2.src = PicturesG[myNumG2];
OpacityG1 = 100;
OpacityG2 = 0;
G1.style.opacity = (OpacityG1/100);
G2.style.opacity = (OpacityG2/100);
setTimeout("mySampleG()",1000*7);
return;
}
setTimeout("mySampleG()",50);
}
</script>

☆jQuery等のライブラリを使わずピュアなJavaScriptだけで書いています。
☆初心者向けの勉強用サンプルにつき必要最低限の仕様となっています。
☆簡単な追加修正でランダム切り替えやリンク設定も可能です。
☆OpacityG2に関する5行は削除しても動作に影響はありません。
☆ブラウザによってはクロスフェードで切り替わらない場合があります。
 ただし以下の2行を該当の2箇所に追加すると解消する場合も多いです。
G1.style.filter = 'alpha(opacity='+OpacityG1+')';
G2.style.filter = 'alpha(opacity='+OpacityG2+')';


H.横スライドによる画像スライドショーのサンプル
  8秒ごとに画像が横スライドで切り替わる
  横スライドは25ミリ秒ごとに10/200pxずつ移動する
  7枚の画像が順番通り切り替わり自動で無限ループする
  さらにクリックでも画像を切り替えられるようにする


<div style="position:absolute; left:80px; top:30px; width:200px; height:130px; overflow:hidden">
<img id="pictH1" src="" style="position:absolute; left:-200px; top:0px; width:200px; height:130px">
<img id="pictH2" src="" style="position:absolute; left:0px; top:0px; width:200px; height:130px">
<img id="pictH3" src="" style="position:absolute; left:200px; top:0px; width:200px; height:130px">
</div>
<div style="position:absolute; left:55px; top:80px; cursor:pointer" onclick="mySampleH2()"><</div>
<div style="position:absolute; left:290px; top:80px; cursor:pointer" onclick="mySampleH1()">></div>

<script>
PicturesH = [];
PicturesH[0] = "images/capture/game13.gif";
PicturesH[1] = "images/capture/game14.gif";
PicturesH[2] = "images/capture/game15.gif";
PicturesH[3] = "images/capture/game16.gif";
PicturesH[4] = "images/capture/game17.gif";
PicturesH[5] = "images/capture/game18.gif";
PicturesH[6] = "images/capture/game19.gif";
myLeftH1 = -200;
myLeftH2 = 0;
myLeftH3 = 200;
myNumH1 = 6;
myNumH2 = 0;
myNumH3 = 1;
H1 = document.getElementById("pictH1");
H2 = document.getElementById("pictH2");
H3 = document.getElementById("pictH3");
H1.src = PicturesH[myNumH1];
H2.src = PicturesH[myNumH2];
H3.src = PicturesH[myNumH3];
myTimerH = setTimeout("mySampleH1()",1000*8);

function mySampleH1(){
clearTimeout(myTimerH);
myLeftH1 -= 10;
myLeftH2 -= 10;
myLeftH3 -= 10;
H1.style.left = myLeftH1+"px";
H2.style.left = myLeftH2+"px";
H3.style.left = myLeftH3+"px";
if(myLeftH2==-200){
myNumH1 = (myNumH1+1)%7;
myNumH2 = (myNumH2+1)%7;
myNumH3 = (myNumH3+1)%7;
H1.src = PicturesH[myNumH1];
H2.src = PicturesH[myNumH2];
H3.src = PicturesH[myNumH3];
myLeftH1 = -200;
myLeftH2 = 0;
myLeftH3 = 200;
H1.style.left = myLeftH1+"px";
H2.style.left = myLeftH2+"px";
H3.style.left = myLeftH3+"px";
myTimerH = setTimeout("mySampleH1()",1000*8);
return;
}
myTimerH = setTimeout("mySampleH1()",25);
}

function mySampleH2(){
clearTimeout(myTimerH);
myLeftH1 += 10;
myLeftH2 += 10;
myLeftH3 += 10;
H1.style.left = myLeftH1+"px";
H2.style.left = myLeftH2+"px";
H3.style.left = myLeftH3+"px";
if(myLeftH2==200){
myNumH1 = (myNumH1+6)%7;
myNumH2 = (myNumH2+6)%7;
myNumH3 = (myNumH3+6)%7;
H1.src = PicturesH[myNumH1];
H2.src = PicturesH[myNumH2];
H3.src = PicturesH[myNumH3];
myLeftH1 = -200;
myLeftH2 = 0;
myLeftH3 = 200;
H1.style.left = myLeftH1+"px";
H2.style.left = myLeftH2+"px";
H3.style.left = myLeftH3+"px";
myTimerH = setTimeout("mySampleH1()",1000*8);
return;
}
if(myLeftH2==0){
myTimerH = setTimeout("mySampleH1()",1000*8);
return;
}
myTimerH = setTimeout("mySampleH2()",25);
}
</script>

☆jQuery等のライブラリを使わずピュアなJavaScriptだけで書いています。
☆初心者向けの勉強用サンプルにつき必要最低限の仕様となっています。
☆簡単な追加修正でランダム切り替えやリンク設定も可能です。


★画像のパスの指定は各自で適切に変更しないと画像が表示されません。
★B~C以外はJavaScript部分を後に記述しないとエラーになります。
★D~Fはstyleのleftとtopの初期値をタグに直に書かないとエラーになります。
★D~Fはブラウザによっては枠線の太さ分のズレが生じる場合があります。
 ただし以下のようなDOCTYPE宣言を先頭に追加すると解消する場合も多いです。
<!DOCTYPE html>
★プログラミング初心者の方は「JSじゃんけんゲーム作り方」も併せてご覧下さい。
★もっと多くのコードを見たい方は「JavaScriptゲーム」を参考にして下さい。
皆様のご質問やご意見をお待ちしています。
下記バナー画像からメールが送信できます。
雑文の小部屋メールアドレス
JavaScriptゲームゲーム作り方JSサンプル
JSツール便利ツールリンク集
Copyright (C) 2012-2018 雑文の小部屋 All Rights Reserved