html5でRPGのマップを作ってみる

PRGのマップを作ってみました。

map.jpgの画像をもとに
tile2.jpgのタイルを貼って作成しています。
操作はawsdキーで上下左右に移動します。

map.jpgからタイルの情報を作成する際に画像のピクセル情報をcanvasに一度貼ってから
getImageDataで取得しています。
この関数firefoxでしか使えないようです。

chromeだと次の行をコメントアウトを外せばランダム画像ですが、スクロールはします。
//map[y][x] = Math.floor( Math.random() * 11 ) ;

firefoxでも画像読み込みのタイミングがずれるときがあるのか黄緑一色で表示させることもあります。なかなかうまく行かないものです。

IEは規格が大幅に違うので、試してないですが動かないでしょう。

＜使い方＞
htmlソースと２つの画像ファイルを同じフォルダーにおいてhtmlをfirefoxで開きます。
うまく行かない時は再読み込みしてみてください。

＜参考サイト＞
Canvas とピクセル操作
JavaScript プログラミング講座 キーボードの操作について

main.html

<canvas id="canvas1" width="1000" height="1000"></canvas>
<script>
  var canvas = document.getElementById('canvas1');
  var ctx = canvas.getContext('2d');
  var sx=0;
  var sy=0;
  var baseImage = new Image();
  baseImage.src = 'tile2.jpg';
  var mapImage = new Image();
  mapImage.src = 'map.jpg';

  var tileX=40;
  var tileY=40;

  var tr = new Array(25);
  var tg = new Array(25);
  var tb = new Array(25);
  var key_buffer = new Array();
  var map = new Array();
  init()
  setInterval("tilewrite()",20);

document.onkeydown = function (e){
  key_buffer[e.keyCode] = true;
};
document.onkeyup = function (e){
  key_buffer[e.keyCode] = false;
};
window.onblur = function (){
  key_buffer.length = 0;
};

function onKey(keyCode){
  if(key_buffer[keyCode])return true;
    return false;
}

function init(){
  var x;
  var y;
  ctx.drawImage(baseImage,0,0,80,80);
  var pixel=new Array(4);
  for(x = 0; x < 25; x++) {
    pixel = ctx.getImageData((x % 5)*16, (Math.floor(x / 5))*16, 1, 1).data;
    tr[x]=pixel[0];
    tg[x]=pixel[1];
    tb[x]=pixel[2];
  }
  ctx.drawImage(mapImage,0,0,1000,1000);
  map = new Array(1000);
  for(y = 0; y < 1000; y++) {
    map[y] = new Array(1000);
    for(x = 0; x < 1000; x++) {
      pixel = ctx.getImageData(x, y, 1, 1).data;
      var r=pixel[0];
      var g=pixel[1];
      var b=pixel[2];
      map[y][x] = getTileNo(r,g,b);
      //map[y][x] = Math.floor( Math.random() * 11 ) ;
   }
  }
  ctx.fillStyle = "rgb(0, 0, 0)";
  ctx.fillRect(0, 0, 1000, 1000);
}

function getTileNo(r,g,b){
  var i;
  var bn=0;
  var bs=1000;
  for(i = 0; i < 10; i++) {
    var s=Math.abs(r-tr[i])+Math.abs(g-tg[i])+Math.abs(b-tb[i]);
    if (bs>s){
      bs=s;
      bn=i;
    }
  }
  return bn;
}

function move(){
  if (onKey(65))sx=sx-1;//a
  if (onKey(68))sx=sx+1;//d
  if (onKey(87))sy=sy-1;//w
  if (onKey(83))sy=sy+1;//s
  if (sx<0)sx=0;
  if (sy<0)sy=0;
  if (sx>999-tileX)sx=200-tileX;
  if (sx>999-tileY)sx=200-tileY;
}

function tilewrite(){
  move();
  var size=16;
  var size2=(1000/tileX);
  for (var x = 0; x < tileX; x++) {
    for (var y = 0; y < tileY; y++) {
      var mapchar=map[sy+y][sx+x];
      var mx=mapchar % 5;
      var my=Math.floor(mapchar / 5);
      ctx.drawImage(baseImage, mx*size, my*size,size,size,x*(size2+1),y*(size2+1),size2,size2);
    }
  }
}
</script>

tile2.jpg


map.jpg