JavaScriptについてわかったこと

2024年5月17日 18:09

HTMLが土台となって作れる。YOUTUBE動画を参考に作成。（ほとんどパクリ）　HTMLから次のレベル、動きをつくれた！

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="main.js"></script>

</head>
<body style="margin:0px;overflow:hidden">
    
<canvas id="main"></canvas>
</body>
</html>

これがHTMLファイル
たぶんこういう意味だろうとおもったのを書いていく
lang="ja"
日本語のサイトですよ～
htmlの基本
<html>
<head></head>
<body></body>
</html>
要素bodyかheadの中にJavaScriptはいれる。
別にjsファイルを作ってよみこむか、直接かきこむ
上記のように今回は別のｊｓファイルをよみこむ。
<script type="text/javascript" src="main.js"></script>

const FONT   ="30px monospace";

let gFrame = 0;
let gImgMap;



function WmTimer()
{ 
    gFrame++;
    const  ca = document.getElementById( "main" );
    ca.width = window.innerWidth;
    ca.height = window.innerHeight;
    const  g = ca.getContext( "2d" );
    

    for( let y= 0; y<50; y++){
        for(let x = 0;x <50; x++){
            g.drawImage( gImgMap, x*100,y*100);
        }

    }
    g.font= FONT;
    g.fillText("あぴゃぴゃ",gFrame,gFrame);
 }

    window.onload = function()
    {
    gImgMap = new Image(); gImgMap.src="wave.jpg";
    setInterval( function(){WmTimer() },60);
}

const　定数の定義　FONT 文字サイズとフォントの種類を決めた
let で変数の定義　gImgMap 、fFrame初期値０
関数WmTimerの定義
　ｇFrame＋＋＝ｇFrame＋１の意味１，２，３，４，…続く
　定数ca　HTMLファイルのId＝mainの場所に記述
　ca.width = window.innerWidth;
　ca.height = window.innerHeight;
　caキャンパスの大きさはウィンドウの範囲内
　
　const g　定数ｇ　２ｄ（２次元）の内容をよみこむ

for( let y= 0; y<1000; y++){ for(let x = 0;x <1000; x++){ g.drawImage( gImgMap, x*10,y*10); }
ｙに０から＋１ずつしていって、ｙ＝50　つまり50個の画像まで画像を縦にならべる
次の処理にすすむ
ｘ＝０から　ｘに１ずつたしていって、ｘ＝50　つまり５０個の画像まで画像を縦にならべる
次の処理にすすむ
定数ｇに画像をかくｇImgMapという画像　それを元の画像ファイルの横ｘ（この時点で１０００になっている）の１００％の大きさで、縦ｙ（同じくこの時点で１０００になっている）の１００％の大きさ

まとめると元の画像ファイルを横５０個、縦５０個四方にならべる
５０×５０のマス

g.font　ｇの要素のフォントを最初に定義した定数FONTのフォントを使う
g.fillText　ｇの要素に文字を書きいれる　あぴゃぴゃという文字列
動きはｇFrameの変数の動きにｘ座標、ｙ座標ともなる　

window.onload = function()
{
gImgMap = new Image();gImgMap.src="wave.jpg";
setInterval( function(){WmTimer() },60);
}

表示する画像をよみこむ
wave.jpgという画像ファイル（同じフォルダ内にいれている）
setInterval　処理間隔の設定
６０の間隔でWmTimerの関数をよびだす

これによって、文字が動いているように見える

右ななめしたにあぴゃぴゃが動いていく

この記事が気に入ったらサポートをしてみませんか？