IchigoJamで、コンピューターの本質とプログラミングの基本を学んだら、ネットにつながる自分のパソコンをゲットしたら、JavaScriptにチャレンジしてみましょう！
用意するツールは、Visual Studio Code(VSCode)とブラウザ(Chrome、Edge、Safari）だけ。
「kawakudari - ij-screen」
おなじみのゲームが動きます！
step0 HTMLはじめのいっぽ
<html>
<body>
Hello!
</body>
</html>
VSCodeで上記を記述し、ファイル形式HTML、index.html として保存。ブラウザで開くと「Hello!」とでます。ウェブ、作成、はじめのいっぽ達成！
step1 JavaScriptはじめのいっぽ
<html>
<body>
<script type="module">
alert("Hello!");
</script>
</body>
</html>
HelloとJavaScriptのプログラムを使って表示してみましょう！
おや、動かない？真っ白？というとき、どこか間違っています。ブラウザ上の画面上で、右クリック、検証を表示して、赤いエラーアイコンをクリックするとヒントが得られます。
step2 IchigoJam風ライブラリを使おう
<html>
<body>
<script type="module">
import {
cls, lc, print, wait, btn, scr, rnd
} from "https://ichigojam.github.io/ij-screen/ij.js";
window.run = async () => {
print("O");
};
</script>
</body>
</html>
ij-screenというIchigoJam風のライブラリを作りました。これを使って主人公「O」を左上に表示！
VSCodeでの保存のショートカットは「Ctrl+S」、ウィンドウの切り替えは「Alt+Tab」、ブラウザのリロードは「F5」や「command+R」が便利です。
C言語のinclude、Pythonのimportと違って、URLで直接ネット上のライブラリが使えるのがJavaScriptの便利ポイント！
step3 主人公と敵を表示しよう
<html>
<body>
<script type="module">
import {
cls, lc, print, wait, btn, scr, rnd
} from "https://ichigojam.github.io/ij-screen/ij.js";
window.run = async () => {
cls();
let x = 15;
lc(x, 5);
print("O");
lc(rnd(32), 23);
print("＊");
};
</script>
</body>
</html>
cls, lc, rnd とおなじみのコマンドを使って、リロードするたびに敵がランダムに出る感を味わいましょう。
step4 ゲーム完成！
<html>
<body>
<script type="module">
import {
cls, lc, print, wait, btn, scr, rnd
} from "https://ichigojam.github.io/ij-screen/ij.js";
window.run = async () => {
cls();
let x = 15;
for (;;) {
lc(x, 5);
print("O");
lc(rnd(32), 23);
print("＊");
await wait(3);
x = x - btn(28) + btn(29);
if (scr(x, 5)) {
break;
}
}
};
</script>
</body>
</html>
完成！F5などのブラウザリロードで何度でも遊べます。
IchigoJam版との違いをチェックしてみましょう。
現在対応しているコマンドは、かわくだりゲーム用の最小限。
いろいろ加えたい方、オープンソースなので、自由に改造してみましょう！
2024-04-26 Fri Night
