ryanmr/index.html

## index.html
<!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>
	<!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>