Canvas に図形を描画し、矢印キーで移動させる
Canvas に図形を描画し、矢印キーで移動させる
矢印キーを入力したら、clearRect(x, y, w, h) で描画をクリアし、移動した分を描画するというものです。
今回は、キーを入力したら再描画ですが、無限ループやsetInterval(setTimeout) で繰り返し描画するようにすればゲーム処理の基本になると思います。
6月なので使用する図形として、カエルを描画してみました。
サンプル
開くとカエルが描画されてますので、矢印キーで移動できます。
なお、モバイルでは動作しないと思います。
http://cartman0.github.io/Canvas_onkeydown_Sample/
コード
コード抜粋
キー値取得
document.onkeydown でキー入力のイベントを取得。event.keyCode で入力したキー値を取得できます。
今回使用したキーは矢印キーで、それぞれキー値は、←:37 ↑:38 →:39 ↓:40 となっています。
document.onkeydown = keydown;
function keydown(e){
//キー入力した際のデフォルト無効
e.preventDefault();
target = document.getElementById("message");
target.innerHTML = "キーが押されました KeyCode :" + e.keyCode;
// ←
if(e.keyCode===37){
if(x > -MAX_X/2 ){
x -= 1;
drawCaeru(x, y);
}
}else if(e.keyCode===38){
// ↑
if(y > -MAX_Y/2){
y -= 1;
drawCaeru(x, y);
}
}else if(e.keyCode===39){
// →
if(x < MAX_X/2){
x += 1;
drawCaeru(x, y);
}
}else if(e.keyCode===40){
// ↓
if(y < MAX_Y/2){
y += 1;
drawCaeru(x, y);
}
}
}
参考リンク:[JavaScript] キーボードの入力(KeyDown)を受け取る
曲線描画
arc は円弧なので、曲線の描画にbezierCurveTo(制御点cx1, 制御点cy1, 制御点cx2, 制御点cy2, 終了点x1, 終了点y2) を使用しました。カエルの口に使用しています。
参考リンク:bezierCurveTo() メソッド - Canvasリファレンス - HTML5.JP
getContext("2d").beginPath();
getContext("2d").moveTo(開始点x0, 開始点y0);
getContext("2d").bezierCurveTo(制御点cx1, 制御点cy1, 制御点cx2, 制御点cy2, 終了点x1, 終了点y2);
