へクス（ヘキサ）のマップ

(C)WorldWideSoftware

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>へクス（ヘキサ）のマップ</title>
 </head>
 <body>
  <canvas id="bg" width="480" height="480"></canvas><br>
  <a href="http://www.wwsft.com">(C)WorldWideSoftware</a><br>
【説明】六角形を組み合わせて構成されるへクスのマップのサンプルです。
カーソルキーでカーソルを移動し、移動したマス（二次元配列）にフラグを立てています。<br>
<strong>※このバージョンは見た目に判りやすいように、六角形でなく四角形で描いています。<br>
※このようなマップを構成する方法はいくつかありますが、このサンプルは二次元配列でマップを管理しています。</strong><br>
<a href="hexa00src.html">ソースコードの確認</a>

  <script>
  //描画面（キャンバス）の準備
  var cvs = document.getElementById("bg");
  var ctx = cvs.getContext("2d");
  ctx.lineWidth = 4;//線の太さ

  //キー入力
  var key = 0;
  onkeydown = function(ev) { key = ev.keyCode; }
  onkeyup = function(ev) { key = 0; }

  //定数
  var HEXA_W = 10;//横のマスの数　但し偶数行は横9マスとする
  var HEXA_H = 10;//縦のマスの数
  var HEXA_R = 48;//へクス間の画面上の距離（ドット数）

  //二次元配列でマップを管理する
  var hexa = [
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 9],//←9は入れないマス
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 9],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 9],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 9],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 9],
   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  ];

  //へクスのキャンバス上の座標
  //配列[y][x]の(x,y)の値を画面上の座標に変換する
  function hexaX(x, y) {
   var X = HEXA_R/2 + x*HEXA_R;
   if(y%2 == 0) X += HEXA_R/2;
   return X;
  }

  function hexaY(x, y) {
   var Y = HEXA_R/2 + y*HEXA_R;
   return Y;
  }

  //カーソル
  var cur_x = 0;
  var cur_y = 0;

  function moveCur() {//方向キーでカーソルを移動する
   var x = cur_x;
   var y = cur_y;
   if(key == 37) x--;
   if(key == 39) x++;
   if(key == 38) y--;
   if(key == 40) y++;
   if(0 <= x && x <= HEXA_W-1 && 0 <= y && y <=HEXA_H-1) {//移動可能な範囲
    if(hexa[y][x] < 9) {//入れるマス
     cur_x = x;
     cur_y = y;
     hexa[cur_y][cur_x] = 1;//移動した配列にフラグを立てる→描画の際に別の色にする
    }
   }
  }

  //メイン処理
  var tmr = 0;
  function mainProc() {
   var s, x, y, X, Y;
   tmr++;

   moveCur();//カーソルの移動

   //ヘキサの並んだＢＧを描く
   ctx.fillStyle = "black";
   ctx.fillRect(0, 0, 480, 480);
   for(y=0; y<HEXA_H; y++) {
    for(x=0; x<HEXA_W; x++) {
     if(hexa[y][x] < 9) {
      X = hexaX(x, y);
      Y = hexaY(x, y);
      ctx.strokeStyle = "gray";
      if(hexa[y][x] == 1) ctx.strokeStyle = "gold";//移動したマスは別の色にする
      ctx.strokeRect(X-20, Y-20, 40, 40);
     }
    }
   }

   //カーソルの表示
   X = hexaX(cur_x, cur_y);
   Y = hexaY(cur_x, cur_y);
   ctx.strokeStyle = "lime";
   s = 24+tmr%4;//カーソルのアニメーション
   ctx.strokeRect(X-s, Y-s, s*2, s*2);
  }

  setInterval(mainProc, 100);
  </script>
 </body>
</html>
←動作確認に戻る