やっぱりJavaScript - タートルグラフィックを自分で作ってみよう！-2

2024年6月22日 05:05

前回ではスクリプトを書いて自作して動かすことができました。JSBinを使って手軽にやりましたが、自分のパソコンでネット環境なしで作ることもできるのでその紹介もしておきます。どんなパソコンでもパソコンの中に入っているものでできますので覚えてしまえば簡単です。

Macだとテキストエディット

Windowsだとメモ帳

このエディタを使って文字を書いて使えるようにします。文字は決まりごとを守って書いて行くのですが、形式が決まっている部分も多いのでコピペで使い回して大丈夫です。

テキストエディタで新規ファイルを作って、

基本のHTMLは以下でOK!

<!DOCTYPE html>
<html lang="ja-JP">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページのタイトル</title>
</head>
<body>
  
// ここにコードを書く

</body>
</html>

あとは<body> の中にスクリプトを入れれば完成です。

<script>
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = canvas.height = 400;
canvas.style.border = "solid 2px";
var ctx = canvas.getContext('2d');

var x = y = a = 0;

function goto(pox,poy){
  x = pox;
  y = poy;
}

function fd(step) {
ctx.beginPath(); ctx.moveTo(200+x, 200-y);
x += step * Math.sin(a * Math.PI / 180.0);
y += step * Math.cos(a * Math.PI / 180.0);
ctx.lineTo(200+x, 200-y); ctx.stroke();
}

function rt(angle) { a += angle; }

// ここに作りたい図形などの命令を書きます。例えば以下とすると。




</script>

保存して実行すると

という感じで、自分でHTMLファイルを作ってそれで実行させることもできます。JavaScriptで自分で環境を作ることができてしまいます。

スクリプトの入力の時にテキストエディタで開いて編集しないといけないというのが少しめんどくさいですけど、インターネットが繋がっていなくてもいつでもできるので便利ではないでしょうか。

インターネット環境が整っていればJSBinでいろんなことができますし、以下のサイトではJavaScriptでタートルグラフィックが簡単にできるように作られています。

Pythonで使われることが多いタートルグラフィックですが簡易敵であればJavaScriptで比較的簡単にできてしまいます。

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