パーソナルブログメモリ

個人的な簡易記録です。コンピュータ関連をメインでやってます。ようこそ!いらっしゃいませ。

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

2017年05月19日 | コンピュータ
PRGのマップを作ってみました。

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

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

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

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

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

<使い方>
htmlソースと2つの画像ファイルを同じフォルダーにおいて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
ジャンル:
ウェブログ
コメント   この記事についてブログを書く
この記事をはてなブックマークに追加
« Node.jsでファイルを振り分ける | トップ | 文京区をサイクリングして偶... »
最近の画像もっと見る

コメントを投稿

ブログ作成者から承認されるまでコメントは反映されません。

コメント利用規約に同意の上コメント投稿を行ってください。

数字4桁を入力し、投稿ボタンを押してください。

あわせて読む

トラックバック

この記事のトラックバック  Ping-URL
ブログ作成者から承認されるまでトラックバックは反映されません。