Help us understand the problem. What is going on with this article?

【初心者】JavaScriptで「コマ移動ゲーム(横移動のみ)」を作ってみた

最近、JavaScriptを勉強しています。
練習として、「コマ移動ゲーム(横移動のみ)」を作ってみました。
簡単なものですが、アウトプットが大切だと考えています。笑
JSでコマ移動ゲーム(横移動のみ).png

HTMLを記述する

index.html
<h1>コマ移動ゲーム(横移動のみ)</h1>
<p id="field"></p>
<input type="button" value="左" id="btn_left">
<input type="button" value="右" id="btn_right">
<input type="button" value="リセット" id="btn_reset">

<script src="main.js"></script>

タイトル、コマが移動するフィールド、3つのボタンという構成です。
フィールドの描画は、JavaScriptにお任せしているので、要素の中身は空です。
JavaScriptの読み込みも忘れずにしています。

JavaScriptを記述する

main.js
const field = document.getElementById('field');
const btn_left = document.getElementById('btn_left');
const btn_right = document.getElementById('btn_right');
const btn_reset = document.getElementById('btn_reset');
const loopCount = 10;
let position = 0;

const fieldReset = (reset) => {
  if (reset) {
    position = 0;
  }

  field.textContent = '';
};

const draw = () => {
  for (let i = 0; i < loopCount; i++) {
    if (position === i) {
      field.textContent += '';
    } else {
      field.textContent += '';
    }
  }
};

draw();

btn_left.addEventListener('click', () => {
  fieldReset();

  if (position > 0) {
    position--;
  }

  draw();
});

btn_right.addEventListener('click', () => {
  fieldReset();

  if (position < loopCount - 1) {
    position++;
  }

  draw();
});

btn_reset.addEventListener('click', () => {
  fieldReset('reset');
  draw();
});

最初にフィールドとボタンのHTML要素を取得し、
フィールドの数とコマの位置を示す値を定義しています。
loopCount はフィールドの数(動ける範囲)なのですが、
ちょっと定数名が分かりにくいですね、反省します。

draw() について

const draw = () => {
  for (let i = 0; i < loopCount; i++) {
    if (position === i) {
      field.textContent += '';
    } else {
      field.textContent += '';
    }
  }
};

関数 draw は、フィールドを描画してくれます。
コマの位置のみ で、その他は で表現しています。
フィールドのHTML要素内の文字列を足していく、という形で実現しています。

fieldReset(reset) について

const fieldReset = (reset) => {
  if (reset) {
    position = 0;
  }

  field.textContent = '';
};

関数 fieldReset(reset) は、フィールドをリセットしてくれます。
引数に何かしら与えられた場合のみ、コマの位置もリセットしてくれます。
フィールドのHTML要素内の文字列を空にする、という形で実現しています。

3つのボタンについて

それぞれのボタンが押されたときの挙動を説明します。

  • 「左」:フィールドをリセットし、変数 position-1 して再描画
  • 「右」:フィールドをリセットし、変数 position+1 して再描画
  • 「リセット」:フィールドをリセットし、変数 position0 にして再描画

その他

getElementByIdaddEventListener 、アロー関数 () => { ~ }
などの、その他の基本的な知識については、僕の過去記事をどうぞ。
【初心者】JavaScript(ES6)の基礎を勉強した
【初心者】JavaScriptで「おみくじゲーム」を作ってみた

おわりに

「おみくじゲーム」に引き続き、JavaScriptでミニゲームを作ってみました。
簡単なものですが、アウトプットは楽しいですし、
Qiitaの記事を書くと個人的な復習にもなって、より深い理解につながりますね。

引き続き、アウトプット重視でプログラミング学習がんばります。
Twitter フォローしてくれたら喜びます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした