読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

Canvas に図形を描画し、矢印キーで移動させる

Canvas JavaScript

Canvas に図形を描画し、矢印キーで移動させる

矢印キーを入力したら、clearRect(x, y, w, h) で描画をクリアし、移動した分を描画するというものです。

今回は、キーを入力したら再描画ですが、無限ループやsetInterval(setTimeout) で繰り返し描画するようにすればゲーム処理の基本になると思います。

6月なので使用する図形として、カエルを描画してみました。

サンプル

開くとカエルが描画されてますので、矢印キーで移動できます。

なお、モバイルでは動作しないと思います。

http://cartman0.github.io/Canvas_onkeydown_Sample/

コード

Canvas にカエル(図形)を描画し、矢印キーで移動

コード抜粋

キー値取得

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);