EncodeTheCode/minigolf_yippie_rev3.htm

## minigolf_yippie_rev3.htm
<!DOCTYPE html>
<html>
<head>
  <style>
    #screen { border: 1px solid #000; cursor: crosshair; }
    #coordinates { font-family: monospace; }
    .txt_blue { color: blue; }
    .txt_orange { color: orange; }
  </style>
</head>
<body>

<canvas id="screen"></canvas>
<div id="coordinates">Coordinates: (0, 0)</div>

<script>
// Canvas + UI setup
let cvs, ctx, coordinates;
const tilePath = "../gfx/tiles/";
const logoPath = "../gfx/logo/";
const ext = ".png";

const assets = {
  game_bg: tilePath + "game_bg" + ext,
  grass: tilePath + "grass" + ext,
  wall: tilePath + "wall" + ext,
  booster_r: tilePath + "booster_r" + ext,
  goal: tilePath + "goal" + ext,
  ball: tilePath + "ball" + ext,
  jippii: logoPath + "jippii" + ext
};

const images = {};

window.onload = () => {
  cvs = document.getElementById("screen");
  ctx = cvs.getContext("2d");
  coordinates = document.getElementById("coordinates");

  cvs.width = 800;
  cvs.height = 480;

  cvs.addEventListener("mousemove", updateCoordinates);
  cvs.addEventListener("mouseout", () => clearCoordinates(0, 0));
  cvs.addEventListener("click", () => alert("Coming soon..."));

  loadAllImages(assets, () => {
    drawScene();
  });
};

// Coordinate functions
function updateCoordinates(e) {
  const x = e.clientX;
  const y = e.clientY;
  coordinates.innerHTML = `Coordinates: (<span class="txt_blue">${x}</span>, <span class="txt_blue">${y}</span>)`;
}
function clearCoordinates(x, y) {
  coordinates.innerHTML = `Coordinates: (<span class="txt_orange">${x}</span>, <span class="txt_orange">${y}</span>)`;
}

// Image loader
function loadAllImages(assetList, callback) {
  let loaded = 0;
  const total = Object.keys(assetList).length;

  for (let key in assetList) {
    const img = new Image();
    img.src = assetList[key];
    img.onload = () => {
      images[key] = img;
      loaded++;
      if (loaded === total) callback();
    };
  }
}

// Drawing
function drawScene() {
  // Background
  const pattern = ctx.createPattern(images.game_bg, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 800, 480);

  // Top bar
  const grad = ctx.createLinearGradient(0, 0, 800, 0);
  grad.addColorStop(0, "rgb(22,22,22)");
  grad.addColorStop(1, "rgb(90,90,90)");
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, 800, 39);
  ctx.strokeStyle = "white";
  ctx.strokeRect(0, 0, 800, 40);

  ctx.fillStyle = "yellow";
  ctx.font = "12px sans-serif";
  ctx.fillText("(Alpha Version 0.0.0.1)", 688, 13);
  ctx.fillStyle = "white";
  ctx.font = "bold 24px sans-serif";
  ctx.fillText("Minigolf!", 66, 30);
  ctx.drawImage(images.jippii, 4, 2, 67, 36);

  // Game tiles
  ctx.drawImage(images.grass, 64, 96, 640, 320);
  ctx.drawImage(images.wall, 512, 128);
  ctx.drawImage(images.booster_r, 640, 160);
  ctx.drawImage(images.goal, 112, 384);
  ctx.drawImage(images.ball, 180, 196);
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#screen { border: 1px solid #000; cursor: crosshair; }
	#coordinates { font-family: monospace; }
	.txt_blue { color: blue; }
	.txt_orange { color: orange; }
	</style>
	</head>
	<body>

	<canvas id="screen"></canvas>
	<div id="coordinates">Coordinates: (0, 0)</div>

	<script>
	// Canvas + UI setup
	let cvs, ctx, coordinates;
	const tilePath = "../gfx/tiles/";
	const logoPath = "../gfx/logo/";
	const ext = ".png";

	const assets = {
	game_bg: tilePath + "game_bg" + ext,
	grass: tilePath + "grass" + ext,
	wall: tilePath + "wall" + ext,
	booster_r: tilePath + "booster_r" + ext,
	goal: tilePath + "goal" + ext,
	ball: tilePath + "ball" + ext,
	jippii: logoPath + "jippii" + ext
	};

	const images = {};

	window.onload = () => {
	cvs = document.getElementById("screen");
	ctx = cvs.getContext("2d");
	coordinates = document.getElementById("coordinates");

	cvs.width = 800;
	cvs.height = 480;

	cvs.addEventListener("mousemove", updateCoordinates);
	cvs.addEventListener("mouseout", () => clearCoordinates(0, 0));
	cvs.addEventListener("click", () => alert("Coming soon..."));

	loadAllImages(assets, () => {
	drawScene();
	});
	};

	// Coordinate functions
	function updateCoordinates(e) {
	const x = e.clientX;
	const y = e.clientY;
	coordinates.innerHTML = `Coordinates: (<span class="txt_blue">${x}</span>, <span class="txt_blue">${y}</span>)`;
	}
	function clearCoordinates(x, y) {
	coordinates.innerHTML = `Coordinates: (<span class="txt_orange">${x}</span>, <span class="txt_orange">${y}</span>)`;
	}

	// Image loader
	function loadAllImages(assetList, callback) {
	let loaded = 0;
	const total = Object.keys(assetList).length;

	for (let key in assetList) {
	const img = new Image();
	img.src = assetList[key];
	img.onload = () => {
	images[key] = img;
	loaded++;
	if (loaded === total) callback();
	};
	}
	}

	// Drawing
	function drawScene() {
	// Background
	const pattern = ctx.createPattern(images.game_bg, "repeat");
	ctx.fillStyle = pattern;
	ctx.fillRect(0, 0, 800, 480);

	// Top bar
	const grad = ctx.createLinearGradient(0, 0, 800, 0);
	grad.addColorStop(0, "rgb(22,22,22)");
	grad.addColorStop(1, "rgb(90,90,90)");
	ctx.fillStyle = grad;
	ctx.fillRect(0, 0, 800, 39);
	ctx.strokeStyle = "white";
	ctx.strokeRect(0, 0, 800, 40);

	ctx.fillStyle = "yellow";
	ctx.font = "12px sans-serif";
	ctx.fillText("(Alpha Version 0.0.0.1)", 688, 13);
	ctx.fillStyle = "white";
	ctx.font = "bold 24px sans-serif";
	ctx.fillText("Minigolf!", 66, 30);
	ctx.drawImage(images.jippii, 4, 2, 67, 36);

	// Game tiles
	ctx.drawImage(images.grass, 64, 96, 640, 320);
	ctx.drawImage(images.wall, 512, 128);
	ctx.drawImage(images.booster_r, 640, 160);
	ctx.drawImage(images.goal, 112, 384);
	ctx.drawImage(images.ball, 180, 196);
	}
	</script>

	</body>
	</html>