千葉匠

プログラミング初心者3人で1からwebゲームを作った話

Created: 2025/11/28

はじめに

先日、サークル活動で、歌舞伎町で開催されたイベント「外連」に自作ゲームを展示しました。

ゲーム制作が初めてということもあり、かなり手こずりましたが、なんとか展示できるレベルにまで持って行けました。

GitHubに投稿したので是非

本記事では、ゲーム制作にあたって、どのような流れで制作したかや、感想と反省についてまとめています。

ゲーム作ってみたいという人は参考にしてください！

そのまえに

以前、サークルでWebToDoアプリを作るハッカソンをしました。

今回は、その経験を活かそうということで、Webゲームを作ろうという話になり、ゲームエンジンを使わず、HTMLとJS、CSSで作りました。

ハッカソンについて先輩が記事を書いてくれていましたので紹介します

制作の流れ

GitHub

まず、ゲームを製作するにあたって、ローカルでは難しいということで、リモートで作業を分担するために、GitHubを学びました。

以下参考にした動画です！
【わかりやすい！Git操作】初心者向けのGitの基本 〜 30分で入門！
【GitHub入門】初心者向け！GitHubでチーム開発するための基本操作を解説！

ゲーム構成

次に、コードを書き始める前に、どんなゲームを作るかを明確にするため、ゲームの構成を考えました。

ゲームのジャンルは、挑戦的な意味を込めて、アニメーションが伴うシューティングゲームに決定しました。

そのかわり、難しくなりすぎないよう、タイトル、プレイエリア、リザルトというシンプルな構成にしました。

コーディング

そして、やっとコーディングです。
メンバーで分担して進めていきました。

ここでは、実際に使って便利だった機能を紹介します。

cloneNode()

cloneNode()はDOMnodeを複製する時に使います。

js 
1
2
3
4
5

const existingNode = document.getElementById("node"); //htmlから取得
existingNode.className = "a";     // cssで指定

//trueで子要素まで全てコピー
const newNode = existingNode.cloneNode(true); //falseだと子要素を含めない

実際に使用した場面は、敵や味方の攻撃を実装するときで、異なる挙動を表現するために、クローンを使いました。

グローバル変数

グローバル変数とは、スコープ外で宣言された変数で、どのスコープでも使える変数です。

例えば次のようなものです。

js 
1
2
3
4
5
6

let a = 5;            //グローバル変数
while(true){
    let b = 2;        //ローカル変数
    a += b;
    if(a > 15)break;
}

aがグローバル変数です。どこでも使えます。

グローバル変数でないものをローカル変数と言います。ローカル変数はbです。
bは、このwhile文の外では使えません。

この時、変数宣言時にwindow.から始めることで、スコープ外でも使えるようになります。

js 
1
2
3
4
5
6
7
8

//全部のファイルを読み込んでから実行
document.addEventListener('DOMContentLoaded', () => {
    //スコープ内
    //let gameStart = true;   <- ローカル変数
    window.gameStart = true; //<- グローバル変数
});
//スコープ外でも使える
console.log(gameStart); //宣言時だけwindow.をつける

ファイル読み込みの順番でエラーになることを防ぐために、document.addEventListener('DOMContentLoaded', ()};
を使ったのですが、そうするとファイル間で変数の受け渡しができなくなってしまいました。

そこで、グローバル変数(window. variable)を使うことで、ファイルを跨いで変数をしようすることができました。

次のように書くと、関数もグローバルにすることができます。

js 
1
2
3

window.gameStart = function(){
    //ゲームスタート処理
}

グローバル変数を使いこなすと作業の幅が広がります。とても簡単なのでぜひ使ってみましょう。

WebStorage

WebStorageとは、Webブラウザにデータを保存する仕組みです。

sessionStorageとlocalStorageがあります。

sessionStorageは、セッションが切れる（ウィンドウを閉じる）とデータが消えます。

localStorageは、オリジン単位でデータを保存します。簡単にいうと、１端末の１ブラウザのみで共有されます。つまり、異なるブラウザ間ではデータは共有されません。
また、localStorageのデータは消えません。

それぞれの使い方は次のとおりです。

js 
1
2
3
4
5
6
7

//データの保存
sessionStorage.setItem("key", "value");
localStorage.setItem("key", "value");

//取り出し
const dataS = sessionStorage.getItem("key");
const dataL = localStorage.getItem("key");

keyが取り出したい時に使う名前で、
valueが保存したいデータです。

保存したデータはデベロッパーツールのアプリケーションから確認できます。

私たちは、スコアやクリアタイムの保存に使用しました。

typeof

typeofは変数が定義されているときとされていないときで処理を分けたい時に使います。

js 
1
2
3
4

//variable <- 定義されているかされていないかわからない変数
if(typeof variable !== "undefined"){
    //処理を書く
}

この時、変数が定義されていればif文の中の処理が実行されます。

私たちの作ったゲームは、エリアごとにHTMLを分けていて、HTMLごとに読み込むscriptファイルを分けています。
共通して使用するscriptファイルもあるので、そこでエラーが発生しないように、辻褄合わせとしてtypeofを使用していました。

感想・反省

感想

この活動自体は、新たな知識やプロジェクトの進め方など、多岐に渡りとても良いものとなりました。

この活動で学んだことや得た経験をまとめてみました

  • 情報共有とスケジュール管理の大切さを知った

  • JS、CSS、HTMLの使い方がわかった

  • コードの組み立て方が少しわかった

  • ゲームループの仕組みを理解した

この活動で１番の成果はゲームの作り方がわかったことです。

初めは何もわからなくても、やっているうちに勝手に技術が身についていくことを実感しました。

ゲーム作ったことないけど作ってみたいという人は、とりあえず何か作ってみましょう！

反省

その一方で、自分の無力さを痛感したとともに、多くの反省点が見えてきました。

反省点をまとめました

  • DOMとcanvasが混在していて、処理を書くのが難しかった

　　　　⇨　はじめにどちらで書くかを決めておく

  • フォルダやファイルがぐちゃぐちゃ

　　　　⇨　アーキテクチャを使う

  • コードがぐちゃぐちゃ

　　　　⇨　クラスや関数で整理する

  • メンバー間で情報の齟齬が起きた

　　　　⇨　情報伝達を明確にする

反省は多くありましたが、学びや経験値とも捉えられます。今後の制作に活かしていきたいです。

最後に

ゲーム作りは楽しい！

これからも色々作っていくことをここに宣言します！