はじめに
ここではプログラムの学習をします
今はやりのＨＴＭＬ５でゲームを作る課程を勉強します
作るゲームは神経衰弱です
コンピュータ言語入門 ＷＥＢ ＨＴＭＬ５の学習-3
canvasに画像ＧＩＦを読み込み表示する。
card（画像が入っている）フォルダーとこのHTMLを同じ場所に置く
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
//Imageオブジェクトを生成して、画像ファイルを先読みしておく
cardimg= new Array(16);
cardimg[1] = new Image();
cardimg[2] = new Image();
cardimg[3] = new Image();
cardimg[4] = new Image();
cardimg[5] = new Image();
cardimg[6] = new Image();
cardimg[7] = new Image();
cardimg[8] = new Image();
cardimg[9] = new Image();
cardimg[10] = new Image();
cardimg[11] = new Image();
cardimg[12] = new Image();
cardimg[13] = new Image();
cardimg[14] = new Image();
cardimg[1].src = "./card/1_he.gif";
cardimg[2].src = "./card/2_he.gif";
cardimg[3].src = "./card/3_he.gif";
cardimg[4].src = "./card/4_he.gif";
cardimg[5].src = "./card/5_he.gif";
cardimg[6].src = "./card/6_he.gif";
cardimg[7].src = "./card/7_he.gif";
cardimg[8].src = "./card/8_he.gif";
cardimg[9].src = "./card/9_he.gif";
cardimg[10].src = "./card/10_he.gif";
cardimg[11].src = "./card/11_he.gif";
cardimg[12].src = "./card/12_he.gif";
cardimg[13].src = "./card/13_he.gif";
cardimg[14].src = "./card/0_r2.gif";
var x;
a= new Array(16);
function disp() {
//描画コンテキストの取得
var canvas = document.getElementById('hart');
if (canvas.getContext) {
var context = canvas.getContext('2d');
//座標(10, 10)の位置にイメージを表示
for (x=1;x<=7;x++){
context.drawImage(cardimg[a[x]], 10+80*x-80, 10);
}
for (x=8;x<=13;x++){
context.drawImage(cardimg[a[x]], 10+80*(x-7)-80, 120);
}
}
}
function initgame() {
for(w = 1;w<=13;w++){
a[w] = w;
}
disp();
}
function startgame() {
for(w = 1;w<=13;w++){
a[w] = 0;
}
w = 1;
while (w <= 13){
x = Math.floor (Math.random () * 13) + 1;
if(a[x] == 0){ a[x] = w;
w++;
}
}
disp();
}
//-->
</script>
</head>
<body onLoad="startgame()">
<h2>Canvasで図形を描く</h2>
<canvas width="900" height="350" id="hart" style="background-color:green;">
<onLoad="startgame()">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>
|
サンプル3
ｗｉｎｄｏｗｓ 用のプログラムの学習
サンプル６
ｉｐｈｏｎｅ ｉｐａｄ ａｎｄｏｒｏｉｄ用の学習
サンプル７
サンプル８
