XHTML5+jQuery
１、jQueryで、XHTML5、SVG、CSS3を操作してみよう。
基本的には、jQueryの説明の時にやったことを応用するだけです。XHTML5では、当然svgタグも扱えますが、
少し注意しなければならないところもあります。
例として、SVGを操作してアニメーションを組んでみます。
往復運動させてみよう
例 jqhtml51.html
往復運動をするボールです。フラッグを使って、画面の右端（＝800px)左端（＝0px)まで来ると、フラッグのtrueとfalseを入れ替えます。これによって、x座標の増える量が、+から-に切り替わるようになってます。
アニメーションには、setIntervalを使います。
これは、setInterval(function(){},間隔時間）で、jQueryの中で実行するには、必ず$(function({}));のブロックの中で書きます。
setIntervalの中の関数は、間隔時間（ミリ秒）間隔で実行され、値が小さければ、それだけ沢山の回数実行されます。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(function(){
$("#add").click(function(){
var px=20;
var py=50;
var pr=20;
var sp=4;
var flgx=true;
var ti=setInterval(function(){
if(px > 800){
flgx =!flgx;
}else if(px<0){
flgx =!flgx;
}
if(flgx){
px+=sp;
}else{
px-=sp;
}
$("#mov").attr("cx",px);
$("#mov").attr("cy",py);
},10);
});
});
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="canv" width="800" height="500" style="border: 1px solid black;">
<circle cx="0" cy="0" r="20" fill="red" id="mov" />
</svg>
<form action="">
<input type="button" value="往復運動" id="add" />
</form>
</body>
</html>
問題１
以上のサンプルを
public_html/tomcat/html5/jqhtml51.html
として保存しなさい。
そして、往復運動している円を垂直運動するようにしなさい。円の色を青色に変えなさい。
円の半径を、大きくしたり、小さくしたりしなさい。
ボタンを押すたびに新しい図をつくり、それを斜め方向に移動。壁に当たると跳ね返る
少し手を加えて、x,y方向に移動し、もし画面の端まで来たら、壁に跳ね返るようなアニメーションにしてみましょう
あたらしい要素は
var ele = $(document.createElementNS("http://www.w3.org/2000/svg",'circle'));
で、図形の種類を指定して作り、それに、jQueryのattrメソッドで、属性の値を付けます。
最後に$("#canv").append()で、svgの領域に追加します。
壁にあたったかどうかは、x軸のフラッグとy軸のフラッグを用意し、４つの場合（x軸が超えている場合、y軸が超えている場合、両方が超えていない場合、両方が超えている場合）を考え、値の+と-を切り替える事で、動きの方向を変えています。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(function(){
var pid=0;
$("#add").click(function(){
var px=0;
var py=0;
var pr=20;
var sp=4;
var flgx=true;
var flgy=true;
var cl="";
cl="rgb(243,23,22)";
var ele = $(document.createElementNS("http://www.w3.org/2000/svg",'circle'));
ele.attr("id","p"+pid);
ele.attr("cx",px);
ele.attr("cy",py);
ele.attr("r",pr);
ele.attr("fill",cl);
var ti=setInterval(function(){
if(py > 500){
flgy =!flgy;
}else if(py<0){
flgy =!flgy;
}
if(px > 800){
flgx =!flgx;
}else if(px<0){
flgx =!flgx;
}
if(flgx && flgy){
px+=sp;
py+=sp;
}else if(!flgy && flgx){
px+=sp;
py-=sp;
}else if(flgy && !flgx){
px-=sp;
py+=sp;
}else if(!flgx && !flgy){
px-=sp;
py-=sp;
}
ele.attr("cx",px);
ele.attr("cy",py);
},10);
$("#canv").append(ele);
pid++;
});
});
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="canv" width="800" height="500" style="border: 1px solid black;"> </svg>
<form action="">
<input type="button" value="発射" id="add" />
</form>
</body>
</html>
問題２
以上のサンプルを
保存しなさい。
ボタンを切り替えると、違った色の円が動くようにしなさい。
<select id="col">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
などとし、$("#col").val()で値を取る事が出来るので、使ってください。
これを応用したゲーム
これを応用して、「ブロック返し」ゲームを作ってみた。
zキーと、xキーで、パッドを右左に移動。「発射」を押すと、玉がどんどん出てくる。
玉を打ち返せば１点入る。１０回失敗すれば、ゲーム終了となる。
キーボードを押した判定は、keypressで設定。キーコード120はxキーなので、その時svgのパッドのx座標を増やす。
$(document).keypress(function(event) {
if ( event.which == 120 ) {
kx+=10;
$("#pad").attr("x",kx);
if(kx>700){
kx=700;
}
}
}
当たり判定は、if(px==kx && py == ky-10)でやっている。玉のx座標とy座標-玉の大きさ、の位置にパッドがあれば、y座標をマイナスにすることで、方向を変える。この時、点数も１点追加。この時、スピードが偶数でないと、座標の交点はありえないので、玉がスルーしてしまう。
当たり判定が１つだと、とても厳しいので、１づつずらして１００個並べる。
★訂正 9/21
(この処理はとても無駄なのが分りますか？ 分る人は直してください）
for(i=0;i<100;i++){ if(px==kx + i && py == ky-10){ flgy =!flgy; score+=1; } }
ゲームが終わったら、
clearInterval(タイマーのID）で、タイマーを停止し、動きを止めてしまう。
empty()メソッドを発行して、画面全体をクリア。「You Lose」の文字を表示。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(function(){
var pid=0;
var kx=400;
var ky=450;
var score=0;
var lscore=100;
$(document).keypress(function(event) {
if ( event.which == 120 ) {
kx+=10;
$("#pad").attr("x",kx);
if(kx>700){
kx=700;
}
}
if ( event.which == 122 ) {
kx-=10;
$("#pad").attr("x",kx);
if(kx<0){
kx=0;
}
}
});
$("#add").click(function(){
var px=0;
var py=0;
var pr=20;
var sp=4;
var flgx=true;
var flgy=true;
var cl="red";
var ele = $(document.createElementNS("http://www.w3.org/2000/svg",'circle'));
ele.attr("id","p"+pid);
ele.attr("cx",px);
ele.attr("cy",py);
ele.attr("r",pr);
ele.attr("fill",cl);
var ti=setInterval(function(){
if(py > 550){
clearInterval(ti);
ele.remove();
lscore-=10;
}
if(lscore <=0){
$("#canv").empty();
var e = $(document.createElementNS("http://www.w3.org/2000/svg",'text'));
e.attr("x",400);
e.attr("y",250);
e.attr("font-size",36);
e.attr("fill","red");
e.append("You Lose");
$("#canv").append(e);
clearInterval(ti);
}
if(py<0){
flgy =!flgy;
}
if(px > 800){
flgx =!flgx;
}else if(px<0){
flgx =!flgx;
}
for(i=0;i<100;i++){
if(px==kx + i && py == ky-10){
flgy =!flgy;
score+=1;
}
}
if(flgx && flgy){
px+=sp;
py+=sp;
}else if(!flgy && flgx){
px+=sp;
py-=sp;
}else if(flgy && !flgx){
px-=sp;
py+=sp;
}else if(!flgx && !flgy){
px-=sp;
py-=sp;
}
ele.attr("cx",px+"px");
ele.attr("cy",py+"px");
$("#sc").html("<span style='color:red; font-size:24px'>"+score+"</span>");
},10);
$("#canv").append(ele);
pid++;
});
});
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="canv" width="800" height="500" style="border: 1px solid black;">
<rect x="400" y="450" fill="blue" width="100" height="10" id="pad"/>
</svg>
<form action="">
<input type="button" value="発射" id="add" />
<input type="submit" value="最初から" />
</form>
得点：<span id="sc"></span>点
</body>
</html>
問題3
以上のサンプルを
保存しなさい。（上のサンプルの中で、当たり判定の処理に無駄なことをやっているのが、分りますか？分る人は、「もっと軽い処理」に直してみてください）
玉の形、色、大きさを変えなさい。玉のスピードを変化させなさい。
分らない人は、直接数字を入れて、変化させてみる。
parseInt(Math.floor(Math.random()*数))
を使うと、ランダムな数が得られるので、
これを利用して、
玉の大きさ、色、最初に出る位置、スピードなどを変化させることが可能。
玉の発射角度、反射角度、玉の動き方（例えばsinカーブなどを使って軌道を曲げる）を変化させることが出来ますね。
出来る人は、玉を四角にしたり、線にしたり、いろいろ試して楽しいゲームに仕上げてください。
（ブロック崩しゲームに改造するのも良い）
また、このままでは携帯電話では使用出来ないので、canvasを使用して、書き換えても良いです（ただし、無理な人は、無理にやらないこと）
これは、とても高度な課題なので、出来た人には５０点あげます。
問題4
ゲームに効果音を付けることができます。
まず、XHTMLのなかに、<audio>タグで、例えば以下のように書きます。（音源はmp3に限られる）
<audio id="shot" src="se.mp3"></audio><audio id="shot2" src="se1.mp3"></audio>
jQueryのコードに、音を鳴らしたい位置で、
$("#shot")[0].play();
とすると、音が鳴ります。長い音源で、停止が必要なときは、
$("#shot")[0].stop();
で停止します。
ゲーム中で、音を鳴らしている場合、＋１０点あげます。音源は 発射音 打ち返す音 を使ってもよいし、好きなmp3を使ってもいいです。
public_html/tomcat/html5/jqhtml53.htmlに、追加してください。
（くれぐれも、他人の作品をコピーしたりしないように。コピーしたひとは大きな減点になります。出来ないなりに自分で作る事こそが大事で、自分でアプリケーションをどのように作ったか、説明出来ないようなアプリケーションは、作ること自体が無意味です。そこを良く理解してください。）