やってみたJavaScript(0003)：　リファクタリングと方向転換

2023年9月23日

やってみたJavaScript、今回は、リファクタリング？的なことを。

それと急に方向転換して、Life Gameを作ることにした。

test0003

https://www.hircos.work/test/test0003

とりあえずファイルをきれいに

とりあえず、CSSとJavaScriptを分けた。index.htmlがスッキリ！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>test0003</title>
  </head>
  <body>
    <h1>test0003</h1>
    <script src="script.js"></script>
    <canvas id="cvs1" width="1000" height="1000" ></canvas>
  </body>
</html>

外枠の替わりに背景色を

前回、canvasの外側に枠線をつけて失敗したので、canvasとbodyのところに背景色をつけることにした。

canvasに背景色を付ける方法がないみたいなので、canvasいっぱいに四角を描くという方法で色を付ける。

    var cvs = document.getElementById("cvs1");
    var ctx = cvs.getContext("2d");

    // background
    ctx.fillStyle = 'rgb( 255, 255, 255 )';
    ctx.fillRect( 0, 0, cvs.width, cvs.height );

.width/.heightでcanvasの縦横が取得できるので、その大きさめいっぱいの四角を最初に描くと背景色になるってことですね。

とりあえず枠線を描いた

あとはとりあえずLife Gameの実現に向けて、縦横の枠線を描いてみた。とりあえずまだ描いてみただけ。

いじょ。

広告

JavaScript,tec