Skip to content

Instantly share code, notes, and snippets.

@fernandoacorreia

fernandoacorreia/index.html

Last active November 17, 2018 19:45
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/c1ef798de2d49b839f1477c4fb9285e2 to your computer and use it in GitHub Desktop.
Save fernandoacorreia/c1ef798de2d49b839f1477c4fb9285e2 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript move around -- 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 score = 0;
var playerX = 1;
var playerY = 1;
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 fullView(mapCopy) {
var view = 'Score: ' + score + ' (' + playerX + ',' + playerY + ')\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 updateView() {
var mapCopy = copyMap(map);
mapCopy[playerY][playerX] = 'O';
viewElement.innerHTML = fullView(mapCopy);
}
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
attemptMoveUp();
} else if (e.keyCode == '40') {
attemptMoveDown();
} else if (e.keyCode == '37') {
attemptMoveLeft();
} else if (e.keyCode == '39') {
attemptMoveRight();
}
updateView();
}
function attemptMoveUp() {
if (playerY > 1) {
score = score + 1;
playerY -= 1;
}
}
function attemptMoveDown() {
if (playerY < map.length - 2) {
score = score + 1;
playerY += 1;
}
}
function attemptMoveLeft() {
if (playerX > 1) {
score = score + 1;
playerX -= 1;
}
}
function attemptMoveRight() {
if (playerX < map[0].length - 2) {
score = score + 1;
playerX += 1;
}
}
document.onkeydown = checkKey;
updateView();
</script>
<script id="jsbin-source-javascript" type="text/javascript">var viewElement = document.getElementById("view");
var score = 0;
var playerX = 1;
var playerY = 1;
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 fullView(mapCopy) {
const view = `Score: ${score} (${playerX},${playerY})
${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 updateView() {
var mapCopy = copyMap(map);
mapCopy[playerY][playerX] = 'O';
viewElement.innerHTML = fullView(mapCopy);
}
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
attemptMoveUp();
}
else if (e.keyCode == '40') {
attemptMoveDown()
}
else if (e.keyCode == '37') {
attemptMoveLeft()
}
else if (e.keyCode == '39') {
attemptMoveRight()
}
updateView();
}
function attemptMoveUp() {
if (playerY > 1) {
score = score + 1;
playerY -= 1;
}
}
function attemptMoveDown() {
if (playerY < map.length - 2) {
score = score + 1;
playerY += 1;
}
}
function attemptMoveLeft() {
if (playerX > 1) {
score = score + 1;
playerX -= 1;
}
}
function attemptMoveRight() {
if (playerX < map[0].length - 2) {
score = score + 1;
playerX += 1;
}
}
document.onkeydown = checkKey;
updateView();
</script></body>
</html>
Raw
jsbin.lomaquh.js
'use strict';
var viewElement = document.getElementById("view");
var score = 0;
var playerX = 1;
var playerY = 1;
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 fullView(mapCopy) {
var view = 'Score: ' + score + ' (' + playerX + ',' + playerY + ')\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 updateView() {
var mapCopy = copyMap(map);
mapCopy[playerY][playerX] = 'O';
viewElement.innerHTML = fullView(mapCopy);
}
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
attemptMoveUp();
} else if (e.keyCode == '40') {
attemptMoveDown();
} else if (e.keyCode == '37') {
attemptMoveLeft();
} else if (e.keyCode == '39') {
attemptMoveRight();
}
updateView();
}
function attemptMoveUp() {
if (playerY > 1) {
score = score + 1;
playerY -= 1;
}
}
function attemptMoveDown() {
if (playerY < map.length - 2) {
score = score + 1;
playerY += 1;
}
}
function attemptMoveLeft() {
if (playerX > 1) {
score = score + 1;
playerX -= 1;
}
}
function attemptMoveRight() {
if (playerX < map[0].length - 2) {
score = score + 1;
playerX += 1;
}
}
document.onkeydown = checkKey;
updateView();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment