JavaScript で学ぶプログラミング (1) エディタの準備

2024年2月26日 15:42

概要　この記事はプログラミング初心者を対象にした記事です。JavaScript でゲームをつくりながら，プログラミングの基礎を学ぶとともに，プログラミングをする際に必要となる数学的な知識についても理解を深めていきます。

潜水艦のアニメーションをつくろう

最初は簡単なものからはじめましょう。図１をみてください。潜水艦が海の中を右から左に動いて，画面の左端でぴたりととまります。

下の GIF アニメーションではカクカク潜水艦が動いていますが，実際には滑らかに動くものを作ります。

このアニメーションを作り始める前にエディタの準備と教材の準備をします。

JavaScript の勉強はまずはエディタがあれば十分です。わたしは Emacs を使っていますが，次のエディタで十分でしょう。

秀丸エディタがおすすめです。

mi がおすすめです。

上のコードをダウンロードします。

以下の画像ファイルもダウンロードして，上のファイルと同じディレクトリに入れてください。

ふたつとも，ダウンロードしたら，submarine_01.html をブラウザにドラッグしてみましょう。ブラウザというのは，googe chrome とか safari といった普段ネット検索などで使っているアプリのことです。

ドラッグすると，潜水艦が右から左へ移動するはずです。

次回からはどうやってこのような表示が実現されているのかみていきましょう。

これからの記事では，ドッタウンさんが作られた潜水艦と UFO の画像を使います。ドッタウンさんの作られるドット絵はとてもすてきだと思います。