RPG作成#4

キャンバスの幅と高さをブラウザに合わせる。
2次元配列のループ数を増やして画面全体に画像を表示させる

"use strict";

const   FONT = "48px monospace";    //使用フォント

let     gFrame = 0;                 //内部カウンタ
let     gImgMap;                    //画像(マップ)

//タイマーイベント発生時の処理
function WmTimer()
{
    gFrame++;           //内部カウンタを加算
    const   ca = document.getElementById("main");   //mainキャンバスの要素を取得
    ca.width = window.innerWidth;                   //キャンバスの幅をブラウザの幅にする
    ca.height = window.innerHeight;                 //キャンバスの高さをブラウザの高さにする
    const   g = ca.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);
}

//ブラウザ起動イベント
window.onload = function(){
    gImgMap = new Image();          //オブジェクト化
    gImgMap.src = "img/map.png";    //マップ画像読み込み
    setInterval( function() { WmTimer() }, 33);       //33ms間隔で WmTimer() を呼び出すように指示 1000/33 = 30FPS 
}

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA