EncodeTheCode/minigolf_yippie_rev4.htm

## minigolf_yippie_rev4.htm
<!DOCTYPE html>
<html>
<body>
<canvas id="screen" width="800" height="480"></canvas>
<script>
// Global variables
let cvs = null;
let ctx = null;

// Tile and logo directories
const tilePath = "../gfx/tiles/";
const logoPath = "../gfx/logo/";
const extension = ".png";

// Game setup
window.onload = function () {
    setupCanvas();
    initializeGame();
};

// Setup canvas context
function setupCanvas() {
    cvs = document.getElementById("screen");
    ctx = cvs.getContext("2d");
    cvs.width = 800;
    cvs.height = 480;
}

// Preload and cache images
function preloadImages(sources, callback) {
    const images = {};
    let loadedCount = 0;

    sources.forEach((src) => {
        const img = new Image();
        img.src = `${tilePath}${src}${extension}`;
        img.onload = () => {
            images[src] = img;
            loadedCount++;
            if (loadedCount === sources.length) callback(images);
        };
    });
}

// Initialize game elements
function initializeGame() {
    preloadImages(
        ["game_bg", "wall_corner1", "wall_circle", "wall", "water", "water_corner1", "water_corner2", "boost_up", "boost_down", "boost_left", "boost_right", "goal", "ball", "ball2", "ball_invis", "ball_bubble", "jippii"],
        (images) => {
            startGame(images);
        }
    );
}

// Game loop
function startGame(images) {
    drawBackground(images["game_bg"]);
    drawBar(images["jippii"]);
    drawLevel1(images);
    setInterval(() => { drawLevel1(images); }, 3000);
}

// Draw game background
function drawBackground(gameBg) {
    const pattern = ctx.createPattern(gameBg, "repeat");
    ctx.rect(0, 0, cvs.width, cvs.height);
    ctx.fillStyle = pattern;
    ctx.fill();
}

// Draw the top bar with logo
function drawBar(logoImg) {
    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 = 'rgb(255,255,255)';
    ctx.strokeRect(0, 0, 800, 40);

    ctx.drawImage(logoImg, 4, 2, 67, 36);

    ctx.fillStyle = 'rgb(255,255,75)';
    ctx.fillText("(Alpha Version 0.0.0.1)", 688, 13);

    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillText("Minigolf!", 66, 30);
}

// Draw level 1
function drawLevel1(images) {
    drawTile(images["grass"], 64, 96, 640, 320);
    drawTile(images["wall_corner1"], 160, 320);
    drawWall(images["wall"]);
    drawWater(images);
    drawBoosts(images);
    drawGoal(images["goal"]);
    drawBalls(images);
}

// Draw individual tile with given position and size
function drawTile(img, x, y, width = img.width, height = img.height) {
    ctx.drawImage(img, x, y, width, height);
}

// Draw walls
function drawWall(wallImg) {
    // Drawing multiple walls
    drawTile(wallImg, 48, 80, 16, 352);
    drawTile(wallImg, 64, 80, 656, 16);
    drawTile(wallImg, 704, 96, 16, 336);
    drawTile(wallImg, 64, 416, 656, 16);
    drawTile(wallImg, 64, 320, 96, 16);
}

// Draw water tiles
function drawWater(images) {
    drawTile(images["water"], 208, 240, 16, 176);
    drawTile(images["water"], 224, 224, 240, 192);
    drawTile(images["water"], 464, 240, 16, 176);
    drawTile(images["water_corner1"], 208, 224);
    drawTile(images["water_corner2"], 464, 224);
}

// Draw boost tiles
function drawBoosts(images) {
    // Draw multiple boost tiles for each direction
    for (let i = 0; i < 10; i++) {
        drawTile(images["boost_up"], 64 + i * 16, 256);
        drawTile(images["boost_down"], 64 + i * 16, 288);
        drawTile(images["boost_left"], 400, 96 + i * 16);
        drawTile(images["boost_right"], 432, 96 + i * 16);
    }
}

// Draw goal
function drawGoal(goalImg) {
    drawTile(goalImg, 112, 384);
}

// Draw balls
function drawBalls(images) {
    drawTile(images["ball"], 180, 196);
    drawTile(images["ball2"], 96, 160);
    drawTile(images["ball_invis"], 192, 160);
    drawTile(images["ball_bubble"], 144, 224);
}

// Handle mouse events
function mouseEvents() {
    cvs.addEventListener("click", () => {
        alert("Coming soon...");
    }, false);
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<canvas id="screen" width="800" height="480"></canvas>
	<script>
	// Global variables
	let cvs = null;
	let ctx = null;

	// Tile and logo directories
	const tilePath = "../gfx/tiles/";
	const logoPath = "../gfx/logo/";
	const extension = ".png";

	// Game setup
	window.onload = function () {
	setupCanvas();
	initializeGame();
	};

	// Setup canvas context
	function setupCanvas() {
	cvs = document.getElementById("screen");
	ctx = cvs.getContext("2d");
	cvs.width = 800;
	cvs.height = 480;
	}

	// Preload and cache images
	function preloadImages(sources, callback) {
	const images = {};
	let loadedCount = 0;

	sources.forEach((src) => {
	const img = new Image();
	img.src = `${tilePath}${src}${extension}`;
	img.onload = () => {
	images[src] = img;
	loadedCount++;
	if (loadedCount === sources.length) callback(images);
	};
	});
	}

	// Initialize game elements
	function initializeGame() {
	preloadImages(
	["game_bg", "wall_corner1", "wall_circle", "wall", "water", "water_corner1", "water_corner2", "boost_up", "boost_down", "boost_left", "boost_right", "goal", "ball", "ball2", "ball_invis", "ball_bubble", "jippii"],
	(images) => {
	startGame(images);
	}
	);
	}

	// Game loop
	function startGame(images) {
	drawBackground(images["game_bg"]);
	drawBar(images["jippii"]);
	drawLevel1(images);
	setInterval(() => { drawLevel1(images); }, 3000);
	}

	// Draw game background
	function drawBackground(gameBg) {
	const pattern = ctx.createPattern(gameBg, "repeat");
	ctx.rect(0, 0, cvs.width, cvs.height);
	ctx.fillStyle = pattern;
	ctx.fill();
	}

	// Draw the top bar with logo
	function drawBar(logoImg) {
	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 = 'rgb(255,255,255)';
	ctx.strokeRect(0, 0, 800, 40);

	ctx.drawImage(logoImg, 4, 2, 67, 36);

	ctx.fillStyle = 'rgb(255,255,75)';
	ctx.fillText("(Alpha Version 0.0.0.1)", 688, 13);

	ctx.fillStyle = 'rgb(255,255,255)';
	ctx.fillText("Minigolf!", 66, 30);
	}

	// Draw level 1
	function drawLevel1(images) {
	drawTile(images["grass"], 64, 96, 640, 320);
	drawTile(images["wall_corner1"], 160, 320);
	drawWall(images["wall"]);
	drawWater(images);
	drawBoosts(images);
	drawGoal(images["goal"]);
	drawBalls(images);
	}

	// Draw individual tile with given position and size
	function drawTile(img, x, y, width = img.width, height = img.height) {
	ctx.drawImage(img, x, y, width, height);
	}

	// Draw walls
	function drawWall(wallImg) {
	// Drawing multiple walls
	drawTile(wallImg, 48, 80, 16, 352);
	drawTile(wallImg, 64, 80, 656, 16);
	drawTile(wallImg, 704, 96, 16, 336);
	drawTile(wallImg, 64, 416, 656, 16);
	drawTile(wallImg, 64, 320, 96, 16);
	}

	// Draw water tiles
	function drawWater(images) {
	drawTile(images["water"], 208, 240, 16, 176);
	drawTile(images["water"], 224, 224, 240, 192);
	drawTile(images["water"], 464, 240, 16, 176);
	drawTile(images["water_corner1"], 208, 224);
	drawTile(images["water_corner2"], 464, 224);
	}

	// Draw boost tiles
	function drawBoosts(images) {
	// Draw multiple boost tiles for each direction
	for (let i = 0; i < 10; i++) {
	drawTile(images["boost_up"], 64 + i * 16, 256);
	drawTile(images["boost_down"], 64 + i * 16, 288);
	drawTile(images["boost_left"], 400, 96 + i * 16);
	drawTile(images["boost_right"], 432, 96 + i * 16);
	}
	}

	// Draw goal
	function drawGoal(goalImg) {
	drawTile(goalImg, 112, 384);
	}

	// Draw balls
	function drawBalls(images) {
	drawTile(images["ball"], 180, 196);
	drawTile(images["ball2"], 96, 160);
	drawTile(images["ball_invis"], 192, 160);
	drawTile(images["ball_bubble"], 144, 224);
	}

	// Handle mouse events
	function mouseEvents() {
	cvs.addEventListener("click", () => {
	alert("Coming soon...");
	}, false);
	}

	</script>
	</body>
	</html>