help make this better and actually make it so it's on itch.io in the browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>God Game - Build Terrain</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
#game {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
display: none;
}
#canvas {
border: 1px solid #000;
background-color: #e0e0e0;
width: 100%;
height: 600px;
}
#controls {
margin-bottom: 10px;
}
#intro {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
}
#startButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#hearts {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.heart {
width: 30px;
height: 30px;
background-color: red;
margin: 0 5px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#gameOver {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
}
#restartButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="intro">
<h1>Welcome to God Game - Build Terrain</h1>
<p>In this game, you can create your own world by drawing terrain with different colors. Choose a color and start building!</p>
<button id="startButton">Start Game</button>
</div>
<div id="game">
<h1>God Game - Build Terrain</h1>
<div id="hearts">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<div id="controls">
<label for="color">Choose Terrain Color:</label>
<select id="color">
<option value="#000000">Black (Default)</option>
<option value="#808080">Gray (Stone)</option>
<option value="#008000">Green (Grass)</option>
<option value="#0000FF">Blue (Water)</option>
<option value="#A52A2A">Brown (Dirt)</option>
<option value="#FF0000">Red (Lava)</option>
<option value="#8B4513">Dark Brown (Obstacle)</option>
</select>
</div>
<canvas id="canvas" width="800" height="600"></canvas>
<button id="playButton" style="display: none;">Play as Character</button>
</div>
<div id="gameOver">
<h1>Game Over</h1>
<button id="restartButton">Restart Game</button>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('color');
const pixelSize = 10;
let drawing = false;
let currentColor = '#000000';
let playing = false;
let character = { x: 0, y: 0, size: 10 };
let terrain = {};
let health = 5;
document.getElementById('startButton').addEventListener('click', () => {
document.getElementById('intro').style.display = 'none';
document.getElementById('game').style.display = 'block';
});
document.getElementById('playButton').addEventListener('click', () => {
playing = true;
document.getElementById('controls').style.display = 'none';
document.getElementById('playButton').style.display = 'none';
drawCharacter();
});
document.getElementById('restartButton').addEventListener('click', () => {
document.getElementById('gameOver').style.display = 'none';
document.getElementById('intro').style.display = 'block';
resetGame();
});
colorPicker.addEventListener('change', (event) => {
currentColor = event.target.value;
});
canvas.addEventListener('mousedown', () => drawing = true);
canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mousemove', draw);
function draw(event) {
if (!drawing || playing) return;
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const x = Math.floor((event.clientX - rect.left) * scaleX / pixelSize) * pixelSize;
const y = Math.floor((event.clientY - rect.top) * scaleY / pixelSize) * pixelSize;
ctx.fillStyle = currentColor;
ctx.fillRect(x, y, pixelSize, pixelSize);
terrain[`${x},${y}`] = currentColor;
}
function drawCharacter() {
ctx.fillStyle = '#FF00FF'; // Character color
ctx.fillRect(character.x, character.y, character.size, character.size);
}
function clearCharacter() {
const terrainColor = terrain[`${character.x},${character.y}`] || '#e0e0e0';
ctx.fillStyle = terrainColor;
ctx.fillRect(character.x, character.y, character.size, character.size);
}
function updateHealth() {
const hearts = document.querySelectorAll('.heart');
hearts.forEach((heart, index) => {
heart.style.display = index < health ? 'block' : 'none';
});
}
function resetGame() {
health = 5;
updateHealth();
playing = false;
character = { x: 0, y: 0, size: 10 };
terrain = {};
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('controls').style.display = 'block';
document.getElementById('playButton').style.display = 'none';
}
window.addEventListener('keydown', (event) => {
if (!playing) return;
clearCharacter();
let newX = character.x;
let newY = character.y;
switch (event.key) {
case 'w':
newY = Math.max(0, character.y - pixelSize);
break;
case 's':
newY = Math.min(canvas.height - character.size, character.y + pixelSize);
break;
case 'a':
newX = Math.max(0, character.x - pixelSize);
break;
case 'd':
newX = Math.min(canvas.width - character.size, character.x + pixelSize);
break;
}
if (terrain[`${newX},${newY}`] !== '#8B4513') { // Check if the new position is not blocked
character.x = newX;
character.y = newY;
}
if (terrain[`${character.x},${character.y}`] === '#FF0000') {
health = Math.max(0, health - 1);
updateHealth();
if (health === 0) {
document.getElementById('gameOver').style.display = 'block';
}
}
drawCharacter();
});
// Show the play button after drawing
canvas.addEventListener('mouseup', () => {
if (!playing) {
document.getElementById('playButton').style.display = 'block';
}
});
updateHealth();
</script>
</body>
</html>
Comments
Log in with itch.io to leave a comment.
?