EncodeTheCode/minigolf_yippie_rev5.htm

## minigolf_yippie_rev5.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>
// Global variables
var cvs = null, ctx = null, coordinates = null;

// Utility functions
function cvs_getCoordinates(e) {
  const x = e.clientX, y = e.clientY;
  coordinates.innerHTML = `Coordinates: (<span class="txt_blue">${x}</span>,<span class="txt_blue">${y}</span>)`;
}
function cvs_clrCoordinates(x, y) {
  coordinates.innerHTML = `Coordinates: (<span class="txt_orange">${x}</span>,<span class="txt_orange">${y}</span>)`;
}
function cvs_Cursor(c) {
  document.getElementById("screen").style.cursor = c === 1 ? "default" : "crosshair";
}

// Initialize on load
window.onload = function () {
  cvs = document.getElementById("screen");
  ctx = cvs.getContext("2d");
  coordinates = document.getElementById("coordinates");
  cvs.width = 800;
  cvs.height = 480;

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

  initializeGame();
};

function loadImage(src, onload) {
  const img = new Image();
  img.src = src;
  img.onload = () => {
    if (onload) onload(img);
  };
  return img;
}

function initializeGame() {
  const tile = "../gfx/tiles/";
  const logo = "../gfx/logo/";
  const e = ".png";

  // Background fill
  loadImage(tile + "game_bg" + e, (bg) => {
    const pat = ctx.createPattern(bg, "repeat");
    ctx.fillStyle = pat;
    ctx.fillRect(0, 0, 800, 480);
    drawBar();
    drawLevel();
  });

  function drawBar() {
    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.fillText("(Alpha Version 0.0.0.1)", 688, 13);
    ctx.fillStyle = "white";
    ctx.fillText("Minigolf!", 66, 30);

    loadImage(logo + "jippii" + e, (img) => ctx.drawImage(img, 4, 2, 67, 36));
  }

    function drawLevel() {
      loadImage(tile + "grass" + e, (img) => ctx.drawImage(img, 64, 96, 640, 320));
      loadImage(tile + "goal" + e, (img) => ctx.drawImage(img, 112, 384));
      loadImage(tile + "ball" + e, (img) => ctx.drawImage(img, 180, 196));
      loadImage(tile + "ball2" + e, (img) => ctx.drawImage(img, 96, 160));
      loadImage(tile + "ball_invis" + e, (img) => ctx.drawImage(img, 192, 160));
      loadImage(tile + "ball_bubble" + e, (img) => ctx.drawImage(img, 144, 224));

      loadImage(tile + "wall_corner1" + e, (img) => ctx.drawImage(img, 160, 320));
      loadImage(tile + "wall_circle" + e, (img) => {
        ctx.drawImage(img, 128, 352);
        ctx.drawImage(img, 128, 368);
        ctx.drawImage(img, 128, 384);
        ctx.drawImage(img, 112, 368);
        ctx.drawImage(img, 144, 368);
      });
      loadImage(tile + "wall" + e, (img) => {
        ctx.drawImage(img, 48, 80, 16, 352);
        ctx.drawImage(img, 64, 80, 656, 16);
        ctx.drawImage(img, 704, 96, 16, 336);
        ctx.drawImage(img, 64, 416, 656, 16);
        ctx.drawImage(img, 64, 320, 96, 16);
      });

      loadImage(tile + "water" + e, (img) => {
        ctx.drawImage(img, 208, 240, 16, 176);
        ctx.drawImage(img, 224, 224, 240, 192);
        ctx.drawImage(img, 464, 240, 16, 176);
      });
      loadImage(tile + "water_corner1" + e, (img) => ctx.drawImage(img, 208, 224));
      loadImage(tile + "water_corner2" + e, (img) => ctx.drawImage(img, 464, 224));

      loadImage(tile + "boost_up" + e, (img) => {
        for (let x = 64; x <= 192; x += 16) {
          ctx.drawImage(img, x, 256);
        }
      });
      loadImage(tile + "boost_down" + e, (img) => {
        for (let x = 64; x <= 192; x += 16) {
          ctx.drawImage(img, x, 288);
        }
      });
      loadImage(tile + "boost_left" + e, (img) => {
        for (let y = 96; y <= 208; y += 16) {
          ctx.drawImage(img, 400, y);
        }
      });
      loadImage(tile + "boost_right" + e, (img) => {
        for (let y = 96; y <= 208; y += 16) {
          ctx.drawImage(img, 432, y);
        }
      });
    }
}
</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>
	// Global variables
	var cvs = null, ctx = null, coordinates = null;

	// Utility functions
	function cvs_getCoordinates(e) {
	const x = e.clientX, y = e.clientY;
	coordinates.innerHTML = `Coordinates: (<span class="txt_blue">${x}</span>,<span class="txt_blue">${y}</span>)`;
	}
	function cvs_clrCoordinates(x, y) {
	coordinates.innerHTML = `Coordinates: (<span class="txt_orange">${x}</span>,<span class="txt_orange">${y}</span>)`;
	}
	function cvs_Cursor(c) {
	document.getElementById("screen").style.cursor = c === 1 ? "default" : "crosshair";
	}

	// Initialize on load
	window.onload = function () {
	cvs = document.getElementById("screen");
	ctx = cvs.getContext("2d");
	coordinates = document.getElementById("coordinates");
	cvs.width = 800;
	cvs.height = 480;

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

	initializeGame();
	};

	function loadImage(src, onload) {
	const img = new Image();
	img.src = src;
	img.onload = () => {
	if (onload) onload(img);
	};
	return img;
	}

	function initializeGame() {
	const tile = "../gfx/tiles/";
	const logo = "../gfx/logo/";
	const e = ".png";

	// Background fill
	loadImage(tile + "game_bg" + e, (bg) => {
	const pat = ctx.createPattern(bg, "repeat");
	ctx.fillStyle = pat;
	ctx.fillRect(0, 0, 800, 480);
	drawBar();
	drawLevel();
	});

	function drawBar() {
	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.fillText("(Alpha Version 0.0.0.1)", 688, 13);
	ctx.fillStyle = "white";
	ctx.fillText("Minigolf!", 66, 30);

	loadImage(logo + "jippii" + e, (img) => ctx.drawImage(img, 4, 2, 67, 36));
	}

	function drawLevel() {
	loadImage(tile + "grass" + e, (img) => ctx.drawImage(img, 64, 96, 640, 320));
	loadImage(tile + "goal" + e, (img) => ctx.drawImage(img, 112, 384));
	loadImage(tile + "ball" + e, (img) => ctx.drawImage(img, 180, 196));
	loadImage(tile + "ball2" + e, (img) => ctx.drawImage(img, 96, 160));
	loadImage(tile + "ball_invis" + e, (img) => ctx.drawImage(img, 192, 160));
	loadImage(tile + "ball_bubble" + e, (img) => ctx.drawImage(img, 144, 224));

	loadImage(tile + "wall_corner1" + e, (img) => ctx.drawImage(img, 160, 320));
	loadImage(tile + "wall_circle" + e, (img) => {
	ctx.drawImage(img, 128, 352);
	ctx.drawImage(img, 128, 368);
	ctx.drawImage(img, 128, 384);
	ctx.drawImage(img, 112, 368);
	ctx.drawImage(img, 144, 368);
	});
	loadImage(tile + "wall" + e, (img) => {
	ctx.drawImage(img, 48, 80, 16, 352);
	ctx.drawImage(img, 64, 80, 656, 16);
	ctx.drawImage(img, 704, 96, 16, 336);
	ctx.drawImage(img, 64, 416, 656, 16);
	ctx.drawImage(img, 64, 320, 96, 16);
	});

	loadImage(tile + "water" + e, (img) => {
	ctx.drawImage(img, 208, 240, 16, 176);
	ctx.drawImage(img, 224, 224, 240, 192);
	ctx.drawImage(img, 464, 240, 16, 176);
	});
	loadImage(tile + "water_corner1" + e, (img) => ctx.drawImage(img, 208, 224));
	loadImage(tile + "water_corner2" + e, (img) => ctx.drawImage(img, 464, 224));

	loadImage(tile + "boost_up" + e, (img) => {
	for (let x = 64; x <= 192; x += 16) {
	ctx.drawImage(img, x, 256);
	}
	});
	loadImage(tile + "boost_down" + e, (img) => {
	for (let x = 64; x <= 192; x += 16) {
	ctx.drawImage(img, x, 288);
	}
	});
	loadImage(tile + "boost_left" + e, (img) => {
	for (let y = 96; y <= 208; y += 16) {
	ctx.drawImage(img, 400, y);
	}
	});
	loadImage(tile + "boost_right" + e, (img) => {
	for (let y = 96; y <= 208; y += 16) {
	ctx.drawImage(img, 432, y);
	}
	});
	}
	}
	</script>
	</body>
	</html>