プログラミング初心者の僕が24時間で頑張った結果をお見せしたいと思います。
http://yohawing.com/exp/blockbreak.html こちらです。
JavascriptとHTML5のCanvasタグだけで、ブロック崩しを作ろうという試みの途中です。
全然できていない上に、ただ描いて動かしただけなのですが、これでも大きな飛躍の一歩です。
以下JSのソースです。
<script src="jquery.js"></script> <script src="jcanvas.js"></script> <script><!-- ここではJQueryとjCanvasというJSライブラリを使っています。 どちらもコーディングを楽にするライブラリです。 var dx = 200; //玉の初期x座標 var dy = 450; //玉の初期y座標 var sw = 300; //ステージの枠の幅 var sh = 500; //ステージの枠の高さ sw += 50 ;sh +=50; var absxy = 50; //ステージの絶対座標 var setx = 62.5; //箱のx座標 var sety = 100; //箱のy座標 var b = 1; var d = 1; マウスを動かすたびに座標が取得更新されます。これが結構厄介です。 $(function(){ $("canvas").mousemove(function(e){ //マウスの座標取得 var axis = "マウスの絶対座標("+ e.pageX +","+ e.pageY +")"; $("p").text(axis); }); }); var waku ={ //枠の描画 strokeStyle:"#000", strokeWidth: 5, strokeJoin: "miter", x1:[absxy], y1:[absxy], x2:[absxy], y2:[sh], x3:[sw],y3:[sh], x4:[sw],y4:[absxy], x5:[absxy]-3, y5:[absxy] }; ブロックをただ書いているだけです。SetIntervalで毎ミリメートルで更新されます。 $(function(){ setInterval(function row(){ do{ $("canvas").drawRect({ fillStyle:"#999", strokeStyle:"#f99", strokeWidth:3, x:setx, y:sety, width: 60,height:30, fromCenter: false }) setx += 70; }while (setx < sw -60) }; do{ row();sety += 40;setx =62.5; }while(sety < 300) } }); $(function(){ $("canvas").mousemove(function(e){ var mouseX = e.pageX - 400; $("canvas") .clearCanvas({ x: 0, y:495, width:1000,height:10, fromCenter:false }) .drawRect({ fillStyle: "#F00", x: [mouseX], y:500, width:50,height:5 }) }) }); ボールを描画して動かす関数です。 変数を関数の外に持っていくことで、やっと動きました。 $(function(){ setInterval(function move(){ $("canvas") .drawArc({ fillStyle:"#eee", x: [dx], y: [dy], radius: 7 }) .drawArc({ //ボールの描画 fillStyle: "#333", x: [dx], y: [dy], radius: 5 }) .drawLine(waku) if(dx < 55 || dx > 345){ b *= -1 dx += -b }else{ dx += -b } if(dy < 55 || dy > 545){ d *= -1 dy += d }else{ dy += d } },10); }); --></script>
なかなか、仕組みやルールを捉えるのが難しくて、24時間中手こずってました。
もっと効率良く学習したい気がします。
これからは、当たり判定という苦しい門が待っているはずなんですが、ここは諦めて別の作業に移りたいと思います。