今いるマップを取得
98行目を修正
"use strict";
const FONT = "12px monospace"; //使用フォント
const FONTSTYLE = "#ffffff"; //フォント色
const HEIGHT = 120; //仮想画面幅
const WIDTH = 128; //仮想画面高さ
const MAP_WIDTH = 32; //マップの幅
const MAP_HEIGHT = 32; //マップの高さ
const SMOOTH = 0; //描画保管処理
const TILECOLUMN = 4; //タイル列数
const TILEROW = 4; //タイル行数
const TILESIZE = 8; //タイルサイズ（ドット）
const CHRHEIGHT = 9; //キャラクターの高さ
const CHRWIDTH = 8; //キャラクターの幅
const WNDSTYLE = "rgba( 0, 0, 0, 0.75 )"; //ウィンドウの色
const gFileMap = "img/map.png"; //マップ画像
const gFilePlayer = "img/player.png"; //プレイヤー画像
let gScreen; //仮想画面
let gFrame = 0; //内部カウンタ
let gImgMap; //画像（マップ）
let gImgPlayer; //画像（プレイヤー）
let gPlayerX = 10; //プレイヤーX座標
let gPlayerY = 5; //プレイヤーY座標
let gWidth; //実画面の幅
let gHeight; //実画面の高さ
// マップ
const gMap = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 3, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 3, 3, 7, 7, 7, 7, 7, 7, 7, 7, 7, 6, 6, 3, 6, 3, 6, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 3, 3, 6, 6, 7, 7, 7, 2, 2, 2, 7, 7, 7, 7, 7, 7, 7, 6, 3, 0, 0, 0, 3, 3, 0, 6, 6, 6, 0, 0, 0,
0, 0, 3, 3, 6, 6, 6, 7, 7, 2, 2, 2, 7, 7, 2, 2, 2, 7, 7, 6, 3, 3, 3, 6, 6, 3, 6,13, 6, 0, 0, 0,
0, 3, 3,10,11, 3, 3, 6, 7, 7, 2, 2, 2, 2, 2, 2, 1, 1, 7, 6, 6, 6, 6, 6, 3, 0, 6, 6, 6, 0, 0, 0,
0, 0, 3, 3, 3, 0, 3, 3, 3, 7, 7, 2, 2, 2, 2, 7, 7, 1, 1, 6, 6, 6, 6, 3, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 7, 7, 7, 7, 2, 7, 6, 3, 1, 3, 6, 6, 6, 3, 0, 0, 0, 3, 3, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 6, 6, 7, 2, 7, 6, 3, 1, 3, 3, 6, 6, 3, 0, 0, 0, 3, 3, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 6, 7, 7, 7, 6, 3, 1, 1, 3, 3, 6, 3, 3, 0, 0, 3, 3, 3, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 6, 6, 7, 7, 7, 6, 3, 1, 1, 3, 3, 6, 3, 3, 0, 3,12, 3, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 6, 6, 6, 7, 7, 6, 3, 1, 1, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 6, 6, 6, 6, 3, 1, 1, 1, 1, 3, 3, 3, 3, 3, 3, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 6, 6, 3, 3, 3, 3, 1, 1, 3, 3, 3, 1, 1, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 4, 5, 3, 3, 3, 6, 6, 6, 3, 3, 3, 1, 1, 1, 1, 1, 3, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 8, 9, 3, 3, 3, 6, 6, 6, 6, 3, 3, 3, 3, 3, 3, 1, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 6, 6, 6, 3, 3, 3, 3, 3, 3, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 6, 6, 6, 6, 3, 3, 3, 3, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 6, 6, 6, 6, 3, 3, 3, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 6, 6, 6, 3, 3, 3, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 6, 6, 6, 3, 6, 6, 6, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 6, 6, 3, 6, 6, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 6, 6, 3, 6, 6, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 6, 3, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 6, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,14, 6, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 7, 0, 0, 0, 0, 0, 0, 0, 0,
7,15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 0, 0, 0, 0, 0,
7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7,
];
function DrawMain(){
const g = gScreen.getContext("2d"); //仮想画面の2D描画コンテキストを取得
//仮想画面にマップチップを転送
for( let dy = -7; dy <= 7; dy++ ){
let y = dy + 7;
let py = ( gPlayerY + dy + MAP_HEIGHT ) % MAP_HEIGHT;
for( let dx = -8; dx <= 8; dx++ ){
let x = dx + 8;
let px = ( gPlayerX + dx + MAP_WIDTH ) % MAP_WIDTH;
//プレイヤーの座標に応じてマップチップを表示する（スクロール）
//TILESIXE / 2を引くとキャラクターが真ん中に来る
DrawTile(g, x * TILESIZE - TILESIZE / 2, y * TILESIZE,
gMap[ py * MAP_WIDTH + px ]);
}
}
//赤い十字線を表示
g.fillStyle = "#ff0000";
g.fillRect( 0, HEIGHT / 2 -1, WIDTH, 2);
g.fillRect( WIDTH / 2 - 1, 0, 2, HEIGHT );
//プレイヤーの描画
g.drawImage( gImgPlayer,
0, 0, CHRWIDTH, CHRHEIGHT,
WIDTH / 2 - CHRWIDTH / 2, HEIGHT / 2 - CHRHEIGHT + TILESIZE / 2, CHRWIDTH, CHRHEIGHT);
g.fillStyle = WNDSTYLE; //ウィンドウの色
g.fillRect( 20, 103, 105, 15 );
g.font = FONT; //文字フォントを設定
g.fillStyle = FONTSTYLE; //文字色
g.fillText("x=" + gPlayerX + " y=" + gPlayerY + " m=" + gMap[ gPlayerY * MAP_WIDTH + gPlayerX ], 25, 115);
}
function DrawTile(g, x, y, idx){
const ix = (idx % TILECOLUMN) * TILESIZE;
const iy = Math.floor(idx / TILECOLUMN) * TILESIZE;
g.drawImage( gImgMap, ix, iy, TILESIZE, TILESIZE, x, y, TILESIZE, TILESIZE );
}
function LoadImage(){
gImgMap = new Image(); //オブジェクト化
gImgMap.src = gFileMap; //マップ画像読み込み
gImgPlayer = new Image(); //オブジェクト化
gImgPlayer.src = gFilePlayer; //プレイヤー画像読み込み
}
function WmPaint(){ //毎フレーム処理される
DrawMain();
const ca = document.getElementById("main"); //mainキャンバスの要素を取得
const g = ca.getContext("2d"); //2D描画コンテキストを取得
g.drawImage( gScreen, 0, 0, gScreen.width, gScreen.height, 0, 0, gWidth, gHeight ); //仮想画面のイメージをメインキャンバスに転送
}
//ブラウザサイズ変更イベント
function WmSize(){
const ca = document.getElementById("main"); //mainキャンバスの要素を取得
ca.width = window.innerWidth; //キャンバスの幅をブラウザの幅にする
ca.height = window.innerHeight; //キャンバスの高さをブラウザの高さにする
/**Start 拡大したときにドット絵がクッキリする ****ここから******/
const g = ca.getContext("2d"); //2D描画コンテキストを取得
g.imageSmoothingEnabled = g.msImageSmoothingEnabled = SMOOTH; //保管処理
/**End **************************************ここまで******/
//実画面サイズを計測。ドットのアスペクト比を維持したままでの最大サイズを計測する。
gWidth = ca.width
gHeight = ca.height;
//アスペクト比の計算（比の方程式より） W:H = gW:gH の式で gH = ？ の式にするとそうなる
if( gWidth / WIDTH < gHeight / HEIGHT ){
gHeight = gWidth * HEIGHT / WIDTH;
}else{
gWidth = gHeight * WIDTH / HEIGHT;
}
}
//タイマーイベント発生時の処理
function WmTimer()
{
gFrame++; //内部カウンタを加算
WmPaint();
}
//キー入力（DOWN）イベント
window.onkeydown = function(e){
let c = e.keyCode;
if(c == 37) gPlayerX--; //左
if(c == 38) gPlayerY--; //上
if(c == 39) gPlayerX++; //右
if(c == 40) gPlayerY++; //下
//マップループ処理
gPlayerX += MAP_WIDTH;
gPlayerX %= MAP_WIDTH;
gPlayerY += MAP_HEIGHT;
gPlayerY %= MAP_HEIGHT;
}
//ブラウザ起動イベント
window.onload = function(){
LoadImage();
gScreen = document.createElement("canvas"); //画僧画面を作成
gScreen.width = WIDTH; //仮想画面の幅を設定
gScreen.height = HEIGHT; //仮想画面の高さを設定
WmSize(); //ウィンドウサイズの設定
window.addEventListener("resize", function(){ WmSize(); }); //ブラウザサイズ変更時に呼び出される
setInterval( function() { WmTimer() }, 33); //33ms間隔で WmTimer() を呼び出すように指示 1000/33 = 30FPS
}