Coin Collector Adventure
About this app
Collect 78 coins in each of the 8 letter S shaped scenes to complete the game.
Coin Collector Adventure
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coin Collector Adventure</title>
<meta name="description" content="Collect 78 coins in each of the 8 letter S shaped scenes to complete the game.">
<meta name="keywords" content="coin collector, adventure game, platformer, web game, single page app">
<style>
body, html { height: 100%; margin: 0; overflow: hidden; }
canvas { background: #f0f0f0; display: block; margin: 0 auto; }
#gameCanvas { border: 1px solid black; }
</style>
<link href="https://fonts.googleapis.com/css2?family=Old+English+Text+MT&display=swap" rel="stylesheet">
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
const worldMap = {
coins: [],
collected: 0,
total: 78,
scenes: 8,
currentScene: 1
};
const player = {
x: 100,
y: 500,
width: 30,
height: 30,
speed: 5,
velocityY: 0,
jumpPower: -10,
onGround: false
};
const gravity = 0.5;
const friction = 0.8;
// Key controls
const keys = {
right: false,
left: false,
up: false
};
function generateCoins() {
const coinsPerScene = worldMap.total / worldMap.scenes;
for (let i = 0; i < coinsPerScene; i++) {
const x = Math.random() * (canvas.width - 10);
const y = Math.random() * (canvas.height - 10);
worldMap.coins.push({ x, y, collected: false });
}
}
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawCoins() {
ctx.fillStyle = 'gold';
worldMap.coins.forEach(coin => {
if (!coin.collected) {
ctx.beginPath();
ctx.arc(coin.x, coin.y, 5, 0, Math.PI * 2);
ctx.fill();
}
});
}
function updatePlayer() {
if (keys.right) player.x += player.speed;
if (keys.left) player.x -= player.speed;
player.velocityY += gravity;
player.y += player.velocityY;
player.velocityY *= friction;
// Check for ground
if (player.y + player.height > canvas.height) {
player.y = canvas.height - player.height;
player.onGround = true;
player.velocityY = 0;
}
if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
if (player.x < 0) player.x = 0;
// Collect coins
worldMap.coins.forEach(coin => {
if (!coin.collected && player.x < coin.x + 5 && player.x + player.width > coin.x && player.y < coin.y + 5 && player.y + player.height > coin.y) {
coin.collected = true;
worldMap.collected++;
}
});
// Next scene
if (worldMap.collected === worldMap.total) {
worldMap.currentScene++;
if (worldMap.currentScene > worldMap.scenes) {
alert('You have collected all the coins! Game completed!');
} else {
worldMap.coins = [];
worldMap.collected = 0;
generateCoins();
}
}
}
function jump() {
if (player.onGround) {
player.velocityY = player.jumpPower;
player.onGround = false;
}
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawCoins();
updatePlayer();
requestAnimationFrame(gameLoop);
}
window.addEventListener('keydown', function (e) {
if (e.code === 'ArrowRight') keys.right = true;
if (e.code === 'ArrowLeft') keys.left = true;
if (e.code === 'ArrowUp') jump();
});
window.addEventListener('keyup', function (e) {
if (e.code === 'ArrowRight') keys.right = false;
if (e.code === 'ArrowLeft') keys.left = false;
});
generateCoins();
gameLoop();
</script>
</body>
</html>
NEW APPS
These are apps made by the community!