RPG作成#6

"use strict";

const   FONT    = "48px monospace"; //使用フォント
const   HEIGHT  = 120;              //仮想画面幅    
const   WIDTH   = 128;              //仮想画面高さ

let     gScreen;                    //仮想画面
let     gFrame = 0;                 //内部カウンタ
let     gImgMap;                    //画像（マップ）


function DrawMain(){
    const   g = gScreen.getContext("2d");                //仮想画面の2D描画コンテキストを取得
    
    for( let y = 0; y < 64; y++ ){
        for( let x = 0; x < 64; x++ ){
            g.drawImage( gImgMap, x * 32, y * 32 );
        }
    }
    
    g.font = FONT;                                  //文字フォントを設定
    g.fillText("Hello World" + gFrame, 0, 64);

}

function WmPaint(){
    DrawMain();
    
    const   ca = document.getElementById("main");   //mainキャンバスの要素を取得
    const   g = ca.getContext("2d");                //2D描画コンテキストを取得
    
    g.drawImage( gScreen, 0, 0 );                   //仮想画面のイメージを転送
}

function WmSize(){
    const   ca = document.getElementById("main");   //mainキャンバスの要素を取得
    ca.width = window.innerWidth;                   //キャンバスの幅をブラウザの幅にする
    ca.height = window.innerHeight;                 //キャンバスの高さをブラウザの高さにする
}

//タイマーイベント発生時の処理
function WmTimer()
{
    gFrame++;           //内部カウンタを加算 
    WmPaint();
}

//ブラウザ起動イベント
window.onload = function(){
    gImgMap = new Image();          //オブジェクト化

    gScreen = document.createElement("canvas"); //画僧画面を作成
    gScreen.width = WIDTH;                      //仮想画面の幅を設定
    gScreen.height = HEIGHT;                    //仮想画面の高さを設定

    WmSize();           //ウィンドウサイズの設定
    window.addEventListener("resize", function(){ WmSize(); }); //ブラウザサイズ変更時に呼び出される
    gImgMap.src = "img/map.png";    //マップ画像読み込み
    setInterval( function() { WmTimer() }, 33);       //33ms間隔で WmTimer() を呼び出すように指示 1000/33 = 30FPS 
}