Pocoyo's Adventure
About this app
Join Pocoyo and friends on an adventure through iSQUARE mall to reach Hong Kong Rocket Island.
Pocoyo's Adventure Congratulations! Welcome to Hong Kong Rocket Island 🚀 Game Credits: Pocoyo & Friends, SpongeBob, and many others...
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>Pocoyo's Adventure</title>
<meta name="description" content="Join Pocoyo and friends on an adventure through iSQUARE mall to reach Hong Kong Rocket Island.">
<meta name="keywords" content="Pocoyo, Adventure, Side-Scroller, Game, HTML5">
<style>
body, html { height: 100%; margin: 0; overflow: hidden; }
canvas { background: #ecf0f1; display: block; }
#credits { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
#credits h1 { font-size: 2em; color: #3498db; }
#credits p { color: #2c3e50; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="credits">
<h1>Congratulations!</h1>
<p>Welcome to Hong Kong Rocket Island 🚀</p>
<p>Game Credits: Pocoyo & Friends, SpongeBob, and many others...</p>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let player = {
x: 50,
y: canvas.height - 150,
width: 50,
height: 50,
color: '#3498db',
onRope: false,
onEscalator: false,
speed: 5
};
let keys = {
right: false,
left: false,
up: false,
down: false,
f: false
};
let floors = [
{ x: 0, y: canvas.height - 30, width: canvas.width, height: 30 }, // Ground floor
{ x: 0, y: canvas.height - 300, width: canvas.width, height: 30 }, // 3rd floor
{ x: canvas.width / 2 - 50, y: 0, width: 100, height: canvas.height }, // Drop to 3rd floor
{ x: 0, y: 100, width: canvas.width, height: 30 } // Rooftop
];
let ropes = [
{ x: floors[1].width / 2, y: floors[1].y, width: 5, height: floors[1].y - floors[0].y },
{ x: floors[0].width - 100, y: floors[0].y, width: 5, height: floors[0].y - floors[2].y }
];
let escalator = { x: 50, y: floors[1].y - 150, width: 30, height: 120 };
let portal = { x: floors[0].width - 50, y: floors[0].y - 50, width: 50, height: 50 };
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawFloors() {
floors.forEach(floor => {
ctx.fillStyle = '#34495e';
ctx.fillRect(floor.x, floor.y, floor.width, floor.height);
});
}
function drawRopes() {
ropes.forEach(rope => {
ctx.fillStyle = '#e67e22';
ctx.fillRect(rope.x, rope.y, rope.width, rope.height);
});
}
function drawEscalator() {
ctx.fillStyle = '#95a5a6';
ctx.fillRect(escalator.x, escalator.y, escalator.width, escalator.height);
}
function drawPortal() {
ctx.fillStyle = '#9b59b6';
ctx.fillRect(portal.x, portal.y, portal.width, portal.height);
}
function updatePlayer() {
if (keys.right) player.x += player.speed;
if (keys.left) player.x -= player.speed;
if (keys.up && !player.onRope) player.y -= player.speed * 2;
if (player.onRope) player.y += 1; // Simulate rope descent
if (player.onEscalator) player.x += 2; // Simulate escalator movement
// Collision with floors
floors.forEach(floor => {
if (player.x < floor.x + floor.width && player.x + player.width > floor.x &&
player.y < floor.y + floor.height && player.y + player.height > floor.y) {
player.y = floor.y - player.height;
}
});
// Collision with ropes
ropes.forEach(rope => {
if (player.x < rope.x + rope.width && player.x + player.width > rope.x &&
player.y < rope.y + rope.height && player.y + player.height > rope.y) {
player.onRope = true;
} else {
player.onRope = false;
}
});
// Collision with escalator
if (player.x < escalator.x + escalator.width && player.x + player.width > escalator.x &&
player.y < escalator.y + escalator.height && player.y + player.height > escalator.y) {
player.onEscalator = true;
} else {
player.onEscalator = false;
}
// Collision with portal
if (player.x < portal.x + portal.width && player.x + player.width > portal.x &&
player.y < portal.y + portal.height && player.y + player.height > portal.y) {
document.getElementById('credits').style.display = 'block';
canvas.style.display = 'none';
}
// Boundary checks
if (player.x <= 0) player.x = 0;
if (player.x >= canvas.width - player.width) player.x = canvas.width - player.width;
if (player.y <= 0) player.y = 0;
if (player.y >= canvas.height - player.height) player.y = canvas.height - player.height;
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFloors();
drawRopes();
drawEscalator();
drawPortal();
updatePlayer();
drawPlayer();
requestAnimationFrame(gameLoop);
}
document.addEventListener('keydown', function(e) {
switch (e.code) {
case 'ArrowRight': keys.right = true; break;
case 'ArrowLeft': keys.left = true; break;
case 'ArrowUp': keys.up = true; break;
case 'ArrowDown': keys.down = true; break;
case 'KeyF': keys.f = true; break;
}
});
document.addEventListener('keyup', function(e) {
switch (e.code) {
case 'ArrowRight': keys.right = false; break;
case 'ArrowLeft': keys.left = false; break;
case 'ArrowUp': keys.up = false; break;
case 'ArrowDown': keys.down = false; break;
case 'KeyF': keys.f = false; break;
}
});
gameLoop();
</script>
</body>
</html>
NEW APPS
These are apps made by the community!