2025/4/13 作成
前置き
このページは、プログラミングで簡単なゲームを作って遊ぶためのページです。事前知識は必要ありません。ただ、開発環境として、Visual Studio Codeを使うので、無い方はダウンロードしてください。
なぜこのページを作ろうと思ったのかなのですが、プログラミングを気軽に楽しみたいからです。ただ、情報量は多く、頭の中だけで考えるとごちゃごちゃするので、こうしてプログラミングについてまとめようと思ったのです。ぜひ皆さんも真似して楽しみましょう。
プログラミングで遊ぶ準備
プログラミングで遊ぶには、まずはフォルダを作ります。フォルダの中に、コードファイルや画像を入れるという感じですね。ただ、簡単に遊びたいので、今回は画像を使いません。基本最初はフォルダを作ると覚えておきましょう。
フォルダを作るには、デスクトップなどで右クリックし、[新規作成]→[フォルダ]を選択します。フォルダ名は適当につけましょう。そして、そのフォルダをVisual Studio Code(通称:VSCode)にドラッグ&ドロップしましょう。そしたら、VSCodeでフォルダが開かれます。
次に、VSCodeのサイドバーの[エクスプローラー]で、新しいファイルを2つ作成し、それぞれ、「index.html」「main.js」という名前にしましょう。今回使う言語はJavaScriptです。この言語を選んだ理由は、実行環境のダウンロードがいらないし、簡単に扱える言語だからです。
「index.html」に、次の定型を書きましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プログラミングで遊ぶ</title>
<style>
body{
margin: 0;
overflow: hidden;
}
canvas{
display: block;
margin: 120px auto;
border: 1px solid;
}
</style>
</head>
<body>
<canvas width="640" height="480"></canvas>
<script src="main.js"></script>
</body>
</html>
ここまではプログラミング言語ではないので、細かく説明はしません。実際にファイルをダブルクリックで開いて表示を確認すると、中央にキャンバスの枠が表示されるはずです。
ここで一番大事なポイントは、キャンバスの幅と高さは<body>要素の中の<canvas>タグで決められているということです。この値を変えると自由にキャンバスの大きさを調整することができます。
次にやることは、JavaScriptでhtmlのcanvas要素を読み込んで、背景を塗ることです。ついでにゲームループも作ってしまいましょう。
実践
ここから、「main.js」ファイルにJavaScriptコードを書いていきます。
Comming Soon・・・