Skip to content

Instantly share code, notes, and snippets.

@fernandoacorreia

fernandoacorreia/index.html

Created November 18, 2018 02:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fernandoacorreia/d4412ec0051a93b0f2159ee18fbba738 to your computer and use it in GitHub Desktop.
Save fernandoacorreia/d4412ec0051a93b0f2159ee18fbba738 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/lomaquh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<pre id="view"></pre>
<script id="jsbin-javascript">
'use strict';
var viewElement = document.getElementById("view");
var energy = 10;
var playerX = 1;
var playerY = 1;
var won = false;
var map = [['+', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '+'], ['|', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '>'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['+', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '+']];
function lineView(lineCopy) {
var view = '';
for (var i = 0; i < lineCopy.length; i++) {
view += lineCopy[i];
}
return view;
}
function mapView(mapCopy) {
var view = '';
for (var i = 0; i < mapCopy.length; i++) {
view += lineView(mapCopy[i]) + '\n';
}
return view;
}
function energyView() {
var view = 'Energy: ';
for (var i = 0; i < energy; i++) {
view += '#';
}
return view;
}
function statusView() {
if (won) {
return 'You win!';
} else if (energy < 1) {
return "You're dead!";
} else {
return energyView();
}
}
function fullView(mapCopy) {
var view = statusView() + '\n' + mapView(mapCopy);
return view;
}
function copyLine(original) {
var copy = [];
for (var i = 0; i < original.length; i++) {
copy.push(original[i]);
}
return copy;
}
function copyMap(original) {
var copy = [];
for (var i = 0; i < original.length; i++) {
copy.push(copyLine(original[i]));
}
return copy;
}
function playerView() {
if (energy > 0) {
return 'O';
} else {
return 'x';
}
}
function updateView() {
var mapCopy = copyMap(map);
mapCopy[playerY][playerX] = playerView();
viewElement.innerHTML = fullView(mapCopy);
}
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
attemptMove(playerX, playerY - 1);
} else if (e.keyCode == '40') {
attemptMove(playerX, playerY + 1);
} else if (e.keyCode == '37') {
attemptMove(playerX - 1, playerY);
} else if (e.keyCode == '39') {
attemptMove(playerX + 1, playerY);
}
updateView();
}
function attemptMove(newX, newY) {
if (!won && hasEnergy() && isValidTarget(newX, newY)) {
playerX = newX;
playerY = newY;
updateStatus();
}
}
function hasEnergy() {
return energy > 0;
}
function isValidTarget(newX, newY) {
var newLocation = map[newY][newX];
return newLocation !== '+' && newLocation !== '-' && newLocation !== '|';
}
function updateStatus() {
if (map[playerY][playerX] === '>') {
won = true;
} else {
updateEnergy();
}
}
function updateEnergy() {
if (map[playerY][playerX] === '*') {
energy += 5;
map[playerY][playerX] = '.';
} else {
energy -= 1;
}
}
document.onkeydown = checkKey;
updateView();
</script>
<script id="jsbin-source-javascript" type="text/javascript">var viewElement = document.getElementById("view");
var energy = 10;
var playerX = 1;
var playerY = 1;
var won = false;
var map = [
['+', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '+'],
['|', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'],
['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '|'],
['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'],
['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '|'],
['|', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '>'],
['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'],
['|', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'],
['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '|'],
['|', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'],
['+', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '+'],
];
function lineView(lineCopy) {
var view = '';
for (var i = 0; i < lineCopy.length; i++) {
view += lineCopy[i];
}
return view;
}
function mapView(mapCopy) {
var view = '';
for (var i = 0; i < mapCopy.length; i++) {
view += lineView(mapCopy[i]) + '\n';
}
return view;
}
function energyView() {
var view = 'Energy: '
for (var i = 0; i < energy; i++) {
view += '#'
}
return view
}
function statusView() {
if (won) {
return 'You win!';
} else if (energy < 1) {
return "You're dead!";
} else {
return energyView();
}
}
function fullView(mapCopy) {
const view = `${statusView()}
${mapView(mapCopy)}`;
return view;
}
function copyLine(original) {
var copy = [];
for (var i = 0; i < original.length; i++) {
copy.push(original[i]);
}
return copy;
}
function copyMap(original) {
var copy = [];
for (var i = 0; i < original.length; i++) {
copy.push(copyLine(original[i]));
}
return copy;
}
function playerView() {
if (energy > 0) {
return 'O';
} else {
return 'x';
}
}
function updateView() {
var mapCopy = copyMap(map);
mapCopy[playerY][playerX] = playerView();
viewElement.innerHTML = fullView(mapCopy);
}
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
attemptMove(playerX, playerY - 1);
}
else if (e.keyCode == '40') {
attemptMove(playerX, playerY + 1);
}
else if (e.keyCode == '37') {
attemptMove(playerX - 1, playerY);
}
else if (e.keyCode == '39') {
attemptMove(playerX + 1, playerY);
}
updateView();
}
function attemptMove(newX, newY) {
if (!won && hasEnergy() && isValidTarget(newX, newY)) {
playerX = newX;
playerY = newY;
updateStatus();
}
}
function hasEnergy() {
return energy > 0;
}
function isValidTarget(newX, newY) {
const newLocation = map[newY][newX];
return (newLocation !== '+' && newLocation !== '-' && newLocation !== '|');
}
function updateStatus() {
if (map[playerY][playerX] === '>') {
won = true;
} else {
updateEnergy();
}
}
function updateEnergy() {
if (map[playerY][playerX] === '*') {
energy += 5;
map[playerY][playerX] = '.';
} else {
energy -= 1;
}
}
document.onkeydown = checkKey;
updateView();
</script></body>
</html>
Raw
jsbin.lomaquh.js
'use strict';
var viewElement = document.getElementById("view");
var energy = 10;
var playerX = 1;
var playerY = 1;
var won = false;
var map = [['+', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '+'], ['|', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '>'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '|'], ['|', '.', '.', '.', '.', '.', '.', '.', '*', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '.', '|'], ['+', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '+']];
function lineView(lineCopy) {
var view = '';
for (var i = 0; i < lineCopy.length; i++) {
view += lineCopy[i];
}
return view;
}
function mapView(mapCopy) {
var view = '';
for (var i = 0; i < mapCopy.length; i++) {
view += lineView(mapCopy[i]) + '\n';
}
return view;
}
function energyView() {
var view = 'Energy: ';
for (var i = 0; i < energy; i++) {
view += '#';
}
return view;
}
function statusView() {
if (won) {
return 'You win!';
} else if (energy < 1) {
return "You're dead!";
} else {
return energyView();
}
}
function fullView(mapCopy) {
var view = statusView() + '\n' + mapView(mapCopy);
return view;
}
function copyLine(original) {
var copy = [];
for (var i = 0; i < original.length; i++) {
copy.push(original[i]);
}
return copy;
}
function copyMap(original) {
var copy = [];
for (var i = 0; i < original.length; i++) {
copy.push(copyLine(original[i]));
}
return copy;
}
function playerView() {
if (energy > 0) {
return 'O';
} else {
return 'x';
}
}
function updateView() {
var mapCopy = copyMap(map);
mapCopy[playerY][playerX] = playerView();
viewElement.innerHTML = fullView(mapCopy);
}
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
attemptMove(playerX, playerY - 1);
} else if (e.keyCode == '40') {
attemptMove(playerX, playerY + 1);
} else if (e.keyCode == '37') {
attemptMove(playerX - 1, playerY);
} else if (e.keyCode == '39') {
attemptMove(playerX + 1, playerY);
}
updateView();
}
function attemptMove(newX, newY) {
if (!won && hasEnergy() && isValidTarget(newX, newY)) {
playerX = newX;
playerY = newY;
updateStatus();
}
}
function hasEnergy() {
return energy > 0;
}
function isValidTarget(newX, newY) {
var newLocation = map[newY][newX];
return newLocation !== '+' && newLocation !== '-' && newLocation !== '|';
}
function updateStatus() {
if (map[playerY][playerX] === '>') {
won = true;
} else {
updateEnergy();
}
}
function updateEnergy() {
if (map[playerY][playerX] === '*') {
energy += 5;
map[playerY][playerX] = '.';
} else {
energy -= 1;
}
}
document.onkeydown = checkKey;
updateView();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment