プログラミング初心者の僕が２４時間で頑張った結果をお見せしたいと思います。
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; //玉の初期ｘ座標
var dy = 450; //玉の初期ｙ座標
var sw = 300; //ステージの枠の幅
var sh = 500; //ステージの枠の高さ
sw += 50 ;sh +=50;
var absxy = 50; //ステージの絶対座標
var setx = 62.5; //箱のx座標
var sety = 100; //箱のｙ座標
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>
なかなか、仕組みやルールを捉えるのが難しくて、２４時間中手こずってました。
もっと効率良く学習したい気がします。
これからは、当たり判定という苦しい門が待っているはずなんですが、ここは諦めて別の作業に移りたいと思います。