★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★
★当サイトは"JavaScript"を有効にして
ご利用いただくと便利です★
ご利用いただくと便利です★
付録４．JavaScriptプログラミングサンプル
Ａ．画像を出すサンプル
１番目のグーをクリックすると別のグーが出る
２番目のチョキにマウスを重ねると別のチョキが出る
Ｂ．画像を消すサンプル
グーをクリックするとそのグーが消える
チョキにマウスを重ねるとそのチョキが消える
左側のパーにマウスを重ねた時だけ右側のパーが消える
Ｃ．画像を変えるサンプル
１番目のグーをクリックするとそのグーがチョキに変わる
２番目のチョキにマウスを重ねるとそのチョキがパーに変わる
３番目のパーにマウスを重ねた時だけそのパーがグーに変わる
Ｄ．画像を手動で動かすサンプル
枠内をクリックするたびにボールが右に40px下に20pxずつ動く
ただし上下左右の枠に達した場合はボールがそれ以上動かないようにする
Ｅ．画像を自動で動かすサンプル
ボールを１回クリックすると50ミリ秒ごとに右に2px下に1pxずつ自動で動く
ただし上下左右の枠に達した直後にボールが消えるようにする
Ｆ．画像を自動で動かし続けるサンプル
ボールを１回クリックすると50ミリ秒ごとに右に2px下に1pxずつ自動で動く
ただし上下左右の枠にぶつかるとボールが跳ね返るようにする
Ｇ．クロスフェードによる画像スライドショーのサンプル
７秒ごとに画像がクロスフェードで切り替わる
クロスフェードは50ミリ秒ごとに5/100ずつ変化する
５枚の画像が順番通り切り替わり自動で無限ループする
![]()
![]()
Ｈ．横スライドによる画像スライドショーのサンプル
８秒ごとに画像が横スライドで切り替わる
横スライドは25ミリ秒ごとに10/200pxずつ移動する
７枚の画像が順番通り切り替わり自動で無限ループする
さらにクリックでも画像を切り替えられるようにする
★画像のパスの指定は各自で適切に変更しないと画像が表示されません。
★Ｂ～Ｃ以外はJavaScript部分を後に記述しないとエラーになります。
★Ｄ～Ｆはstyleのleftとtopの初期値をタグに直に書かないとエラーになります。
★Ｄ～Ｆはブラウザによっては枠線の太さ分のズレが生じる場合があります。
ただし以下のようなDOCTYPE宣言を先頭に追加すると解消する場合も多いです。
<!DOCTYPE html>
★プログラミング初心者の方は「JSじゃんけんゲーム作り方」も併せてご覧下さい。
★もっと多くのコードを見たい方は「JavaScriptゲーム」を参考にして下さい。
Ａ．画像を出すサンプル
１番目のグーをクリックすると別のグーが出る
２番目のチョキにマウスを重ねると別のチョキが出る
<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>
<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>
Ｂ．画像を消すサンプル
グーをクリックするとそのグーが消える
チョキにマウスを重ねるとそのチョキが消える
左側のパーにマウスを重ねた時だけ右側のパーが消える
<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>
<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>
Ｃ．画像を変えるサンプル
１番目のグーをクリックするとそのグーがチョキに変わる
２番目のチョキにマウスを重ねるとそのチョキがパーに変わる
３番目のパーにマウスを重ねた時だけそのパーがグーに変わる
<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>
<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>
Ｄ．画像を手動で動かすサンプル
枠内をクリックするたびにボールが右に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>
<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>
Ｅ．画像を自動で動かすサンプル
ボールを１回クリックすると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>
<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>
Ｆ．画像を自動で動かし続けるサンプル
ボールを１回クリックすると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>
<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>
Ｇ．クロスフェードによる画像スライドショーのサンプル
７秒ごとに画像がクロスフェードで切り替わる
クロスフェードは50ミリ秒ごとに5/100ずつ変化する
５枚の画像が順番通り切り替わり自動で無限ループする
<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に関する５行は削除しても動作に影響はありません。
☆ブラウザによってはクロスフェードで切り替わらない場合があります。
ただし以下の２行を該当の２箇所に追加すると解消する場合も多いです。
G1.style.filter = 'alpha(opacity='+OpacityG1+')';
G2.style.filter = 'alpha(opacity='+OpacityG2+')';
<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に関する５行は削除しても動作に影響はありません。
☆ブラウザによってはクロスフェードで切り替わらない場合があります。
ただし以下の２行を該当の２箇所に追加すると解消する場合も多いです。
G1.style.filter = 'alpha(opacity='+OpacityG1+')';
G2.style.filter = 'alpha(opacity='+OpacityG2+')';
Ｈ．横スライドによる画像スライドショーのサンプル
８秒ごとに画像が横スライドで切り替わる
横スライドは25ミリ秒ごとに10/200pxずつ移動する
７枚の画像が順番通り切り替わり自動で無限ループする
さらにクリックでも画像を切り替えられるようにする
＜
＞
<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だけで書いています。
☆初心者向けの勉強用サンプルにつき必要最低限の仕様となっています。
☆簡単な追加修正でランダム切り替えやリンク設定も可能です。
<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だけで書いています。
☆初心者向けの勉強用サンプルにつき必要最低限の仕様となっています。
☆簡単な追加修正でランダム切り替えやリンク設定も可能です。
★画像のパスの指定は各自で適切に変更しないと画像が表示されません。
★Ｂ～Ｃ以外はJavaScript部分を後に記述しないとエラーになります。
★Ｄ～Ｆはstyleのleftとtopの初期値をタグに直に書かないとエラーになります。
★Ｄ～Ｆはブラウザによっては枠線の太さ分のズレが生じる場合があります。
ただし以下のようなDOCTYPE宣言を先頭に追加すると解消する場合も多いです。
<!DOCTYPE html>
★プログラミング初心者の方は「JSじゃんけんゲーム作り方」も併せてご覧下さい。
★もっと多くのコードを見たい方は「JavaScriptゲーム」を参考にして下さい。
皆様のご質問やご意見をお待ちしています。
下記バナー画像からメールが送信できます。
下記バナー画像からメールが送信できます。
