ゲームを開発している際には、パラメータが、特定の範囲内に収まるように調整することが多いです。たとえば、HPが「0」から「99」までの範囲と決まっている場合があるとします。そうした際は、最小値と最大値の値を指定して、数値を変換できる関数があると便利です。
こうした処理を、短いコードで簡潔に書くことができる関数を用意して、私はゲーム開発で使い回しています。そうした関数を、ここでは紹介します。
関数の引数の順番については、各プログラミング言語で、組み込み関数において一定の方針があります。ここでは、そうした方針を無視して、人間が分かりやすい引数の順番にしています。
「minMax(最小値, 入力数値, 最大値)」という順番にすることで、コードを見た際に、直感的にどういったパラメータ範囲なのかが分かります。
この引数の順番は、各自にとって、分かりやすさが違う部分だと思います。人によっては、「最小値, 最大値, 入力値」の順の方が分かりやすいという人もいると思います。そうした人は、自分用に改造して使うとよいでしょう。
ファイル構成は以下の通りです。>>ダウンロード
- sample/minMax.js (※)
- sample/index.html
- sample/main.css
- sample/main.js
- sample/node_sample.js（Node.jsのサンプル）
※ 初期化用関数「init」の処理については「Webブラウザ/Node.js 互換関数」をご覧下さい。
サンプル動作
sample/minMax.js
'use strict';
(function() {
const _t = init('com.crocro.util');
// minMax | 最小最大
_t.minMax = function(min, n, max) {
return Math.max(min, Math.min(n, max));
};
// 初期化用関数
function init(p) {
try {return module.exports = {}} catch(e) {}
return ((o, p) => {
p.split('.').forEach(k => o = o[k]||(o[k]={}));
return o})(window, p);
};
})();解説
ここでは「Math.max」と「Math.min」を使って、最小値～最大値の範囲内に数値を収めています。ここは、「if文」で書いてもよいでしょう。
とても簡単な処理ですが、ゲームでは頻出します。ゲームでは、限られた画面で効率的にデータを表示するために、数値の桁数が定められていることが多いです。そうした表示の前処理として、こうした関数が活躍します。
また、HPやMPといった、上限と下限が決められていたり、レベルで最大値が定められていたりするたパラメータの処理にも、こうした関数は活躍します。
地味な処理ですが、関数化しておくと生産性が上がり、コードの可読性も向上します。
minMax | 最小最大
最小値と最大値を指定して、値がその範囲内に収まるように戻り値を戻します。@param {Number} min - 最小値。
この値よりも小さい場合は、この値を戻します。
@param {Number} n - 数値。
最小値と最大値の間に収めたい数値です。
@param {Number} max - 最大値。
この値よりも大きい場合は、この値を戻します。
@return 最小値と最大値の範囲内に収めた数値を戻します。
サンプル
// Webブラウザ
const minMax = com.crocro.util.minMax;
for (let i = -2; i < 7; i ++) {
console.log(minMax(0, i, 5));
}
// 0
// 0
// 0
// 1
// 2
// 3
// 4
// 5
// 5
// Node.js
const minMax = require('./minMax.js').minMax;
for (let i = -2; i < 7; i ++) {
console.log(minMax(0, i, 5));
}
// 0
// 0
// 0
// 1
// 2
// 3
// 4
// 5
// 5sample/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>最小最大 - JavaScript実用サンプルコード解説付き</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="minMax.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<textarea id="src"></textarea>
<button id="exec">実行</button>
<textarea id="dst" style="height: 10em;"></textarea>
</body>
</html>sample/main.js
'use strict';
$(function() {
// 変数の初期化
const $src = $('#src');
const $dst = $('#dst');
const $exec = $('#exec');
const $reset = $('#reset');
// 値のセット
$src.val(String.raw`
const minMax = com.crocro.util.minMax;
for (let i = -2; i < 7; i ++) {
console.log(minMax(0, i, 5));
}
`.trim());
// コンソール ログのラップ
const log = console.log;
console.log = function() {
for (let i = 0; i < arguments.length; i ++) {
$dst.append(arguments[i] + ' ');
}
$dst.append('\n');
log.apply(console, arguments);
};
// クリック時の処理
$exec.click(() => {
$dst.empty();
eval($src.val());
});
});sample/main.css
html,
body {
margin: 0;
padding: 0;
}
textarea,
button {
box-sizing: border-box;
width: 100%;
vertical-align:bottom;
}
textarea {
height: 5em;
}sample/node_sample.js
// モジュールの読み込み
const minMax = require('./minMax.js').minMax;
// 実行
for (let i = -2; i < 7; i ++) {
console.log(minMax(0, i, 5));
}紹介
