スポンサーリンク

お絵描き

HTMLファイル

JavaScriptは基本的にHTMLファイル内に記述します。HTMLファイルはご存じの通りブラウザでコンテンツを表示するためのファイルです。

HTMLファイルのテンプレートを下記に掲載します。これをエディターへ貼り付け、「test01.html」などの適当なファイル名にし保存してください。

canvas

作成したファイルをマウスでダブルクリックしてください。するとブラウザが開き次のような画面が中央に表示されます。

この黒い四角はHTMLの「canvas」タグで17行目で定義しています。

この「canvas」はJavaScriptで描画する領域を定義するタグです。つまりこの領域内に線や四角形などをJavaScriptで書くことができます。ゲームはこの機能を利用し構築していきます。

では線を書いてみましょう。JavaScriptの命令は19行目の<script>から21行目の</script>の間に記述します。

次のプログラムを<script>と</script>の間に貼り付け、ファイルを保存してください。

ブラウザの更新ボタンをクリックすると次のように線が書かれます。

どのような命令で線が書かれているか、次回からみていきます。

ここまでのソースコードを掲載します。

タイトルとURLをコピーしました