lewdev/#README.md

## #README.md

      
    Raw
  

              #README.md
            
          
    🧙‍♂️ Calculating XP to Level for RPG Games

I was curious on how level was determined for games and I found an awesome article about it by Jake Lee.
But one important thing was not explained in this article, how is it implemented in JavaScript?!
He has provided implementations in a Google Sheet
and Github Gist though. So that may be your preferred method.
The XP and Level formulas in JavaScript

A simple format of the formulas:
XP = (level / x) ** y

level = x * Math.pow(xp, 1 / y)

The JavaScript implementation:
const getXp = (level, x, y) => Math.round((level / x) ** y);

const getLevel = (xp, x, y) => x * Math.pow(xp, 1 / y);

The x and y values explained by Jake


x affecting the amount of XP (lower values = more XP required per level), and
y being how quickly the required xp per level should increase (higher values = larger gaps between levels)

My XP Calculating app

I created a simple app to see the pace your XP calculating formula. You can add addition x and y values to compare them with. (see index.html)

  
## index.html
<!doctype>
<head>
  <meta charset=utf8>
  <title>Calculating XP to Level for RPG Games</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221.045em%22 font-size=%2272%22>🧙‍♂️</text></svg>">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>.table th, .table td { text-align: right }</style>
</head>
<body>
<div class="container my-3">
  <h1>🧙‍♂️ Calculating XP to Level for RPG Games</h1>

  <p>Add or modify a line with <code>x, y</code> values in "Inputs" to see progress up to 99 levels.
    <details>
      <p><code>x</code> affecting the amount of XP (lower values = more XP required per level), and</p>

      <p><code>y</code> being how quickly the required xp per level should increase (higher values = larger gaps between levels)</p>
    </details>
  </p>

  <details open=true>
    <summary>Inputs</summary>
  <textarea id=input rows=3 onchange=render() class="form-control my-2">0.07, 2
0.3, 2
0.07, 3</textarea>
  </details>

  <div class="font-italic">*XP values are rounded.</div>
  <table id=o class="table table-striped table-hover table-bordered"></table>
</div>

<script>
const getXp = (level, x, y) => (level / x) ** y;

const getLevel = (xp, x, y) => x * Math.pow(xp, 1 / y);

const getFirst99Levels = (x, y) => Array(99).fill().map((_, i) => getXp(i + 1, x, y));

const render = () => {
  const examples = input.value.split`\n`.map(a => a && a.split(/,\ */));
  o.innerHTML = `<thead>
    <th>Level</th>
    ${examples.map(([x, y]) => `<th>${x}, ${y}</th><th>Diff</th>`).join``}
  </thead>

  <tbody>
    ${Array(99).fill().map((_, i) => `<tr>
      <td class="text-center">${i + 1}</td>
      ${examples.map(([x, y]) => `
        <td>${Math.round(getXp(i + 1, x, y)).toLocaleString()}</td>
        <td class="text-primary">${Math.round(getXp(i + 1, x, y) - getXp(i, x, y)).toLocaleString()}</td>
      `).join``}
    </tr>`).join``}
  </tbody>`;
};
render();
</script>
</body>
	<!doctype>
	<head>
	<meta charset=utf8>
	<title>Calculating XP to Level for RPG Games</title>
	<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221.045em%22 font-size=%2272%22>🧙‍♂️</text></svg>">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>.table th, .table td { text-align: right }</style>
	</head>
	<body>
	<div class="container my-3">
	<h1>🧙‍♂️ Calculating XP to Level for RPG Games</h1>

	<p>Add or modify a line with <code>x, y</code> values in "Inputs" to see progress up to 99 levels.
	<details>
	<p><code>x</code> affecting the amount of XP (lower values = more XP required per level), and</p>

	<p><code>y</code> being how quickly the required xp per level should increase (higher values = larger gaps between levels)</p>
	</details>
	</p>

	<details open=true>
	<summary>Inputs</summary>
	<textarea id=input rows=3 onchange=render() class="form-control my-2">0.07, 2
	0.3, 2
	0.07, 3</textarea>
	</details>

	<div class="font-italic">*XP values are rounded.</div>
	<table id=o class="table table-striped table-hover table-bordered"></table>
	</div>

	<script>
	const getXp = (level, x, y) => (level / x) ** y;

	const getLevel = (xp, x, y) => x * Math.pow(xp, 1 / y);

	const getFirst99Levels = (x, y) => Array(99).fill().map((_, i) => getXp(i + 1, x, y));

	const render = () => {
	const examples = input.value.split`\n`.map(a => a && a.split(/,\ */));
	o.innerHTML = `<thead>
	<th>Level</th>
	${examples.map(([x, y]) => `<th>${x}, ${y}</th><th>Diff</th>`).join``}
	</thead>

	<tbody>
	${Array(99).fill().map((_, i) => `<tr>
	<td class="text-center">${i + 1}</td>
	${examples.map(([x, y]) => `
	<td>${Math.round(getXp(i + 1, x, y)).toLocaleString()}</td>
	<td class="text-primary">${Math.round(getXp(i + 1, x, y) - getXp(i, x, y)).toLocaleString()}</td>
	`).join``}
	</tr>`).join``}
	</tbody>`;
	};
	render();
	</script>
	</body>