Skip to content

Instantly share code, notes, and snippets.

@ryanmr

ryanmr/index.html

Last active Nov 6, 2020
Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div style="display: flex; justify-content: center">
<div style="padding: 1rem">
<canvas
width="480"
height="480"
style="display: block; border: 1px solid black"
>
</canvas>
</div>
<div style="padding: 1rem">
<h1>HP</h1>
<div id="hp"></div>
<hr />
<h1>Inventory</h1>
<div id="inventory"></div>
</div>
</div>
<img id="fighter" src="fighter.png" style="display: none" />
<img id="sword" src="sword.png" style="display: none" />
<script>
window.onload = function () {
var canvas = document.querySelector("canvas");
var inventory = document.querySelector("#inventory");
var fighterEl = document.querySelector("#fighter");
var swordEl = document.querySelector("#sword");
var hp = document.querySelector("#hp");
var ctx = canvas.getContext("2d");
function drawGreen() {
ctx.drawImage(fighterEl, x, y, 30, 30);
}
function drawBlack() {
// draw the black box
ctx.fillStyle = "black";
ctx.fillRect(x, y, blockSize, blockSize);
}
function drawRed() {
ctx.drawImage(swordEl, x, y, 30, 30);
}
function clear() {
ctx.clearRect(x, y, blockSize, blockSize);
}
function updateInventory() {
inventory.innerHTML = "";
theInventory.forEach(
(inv) => (inventory.innerHTML += "<p>you have a " + inv + "</p>")
);
}
function updateHP() {
hp.innerHTML = "";
hp.innerHTML = "<p>your hp is " + theHP + "</p>";
}
// prettier-ignore
var theMatrix = [
9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,
9,0,0,0,0,0,9,0,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,9,0,0,0,0,0,0,0,0,9,
9,9,9,9,0,9,9,0,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,9,0,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,9,0,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,9,9,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,9,0,0,0,0,0,0,0,0,9,
9,9,9,9,9,9,9,0,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,
9,0,0,0,0,0,0,0,0,0,0,0,8,0,0,9,
9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,
9,0,0,8,0,0,8,0,0,8,0,0,0,0,0,9,
9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,
9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9
];
var theInventory = [
// push stuff into the array with
// theInventory.push('sword')
];
var theHP = 100;
var x = 0;
var y = 0;
var blockSize = 30;
// draw the black grid wall
for (var i = 0; i <= 256; i++) {
if (theMatrix[i] === 9) {
drawBlack();
}
if (theMatrix[i] === 8) {
drawRed();
}
x = x + blockSize;
if (x == 480) {
x = 0;
y = y + blockSize;
}
}
// TODO: we need to figure out how to make the player's
// X/Y position be derived from the playerIndex
var playerIndex = 17;
x = 30;
y = 30;
drawGreen();
window.addEventListener("keydown", (event) => {
var code = event.code;
if (code === "ArrowDown") {
if (theMatrix[playerIndex + 16] !== 9) {
clear();
y = y + 30;
playerIndex = playerIndex + 16;
}
} else if (code === "ArrowUp") {
if (theMatrix[playerIndex - 16] !== 9) {
clear();
y = y - 30;
playerIndex = playerIndex - 16;
}
} else if (code === "ArrowLeft") {
if (theMatrix[playerIndex - 1] !== 9) {
clear();
x = x - 30;
playerIndex = playerIndex - 1;
}
} else if (code === "ArrowRight") {
if (theMatrix[playerIndex + 1] !== 9) {
clear();
x = x + 30;
playerIndex = playerIndex + 1;
}
}
// clamps the HP to 0
theHP = Math.max(0, theHP - 1);
// if it's a sword, add a sword to inventory, and remove it from the grid
if (theMatrix[playerIndex] === 8) {
theInventory.push("sword");
theMatrix[playerIndex] = 0;
}
updateInventory();
updateHP();
drawGreen();
});
updateInventory();
updateHP();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment