Click here for free DL of the app version that can save data.

No:3318

2328

←

Prev Next

→

I want to make a game where the character (you can..ALL
Developer User3684｜Date and time 23/6/24 13:02:48
Build time 43.533 sec｜Game capacity 4.327KB｜

Script

Elige tu personaje

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mi juego</title>
	<style>
		body {
			background-color: #c2c2d6;
		}
		.container {
			margin: 0 auto;
			width: 90%;
			max-width: 960px;
			text-align: center;
		}
		.character {
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: #ffb3b3;
			border-radius: 50%;
			margin: 20px;
			cursor: pointer;
		}
		.blue-black {
			background-color: #3f51b5;
		}
		.white-brown {
			background-color: #dedede;
		}
		.penguin {
			background-image: url('🐧');
			background-size: cover;
		}
		.unicorn {
			background-image: url('🦄');
			background-size: cover;
		}
		.obstacle {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 50px;
			height: 50px;
			background-color: #f44336;
			border-radius: 50%;
			animation: obstacle-animation 1s linear infinite;
		}
		@keyframes obstacle-animation {
			0% {
				transform: translateY(0);
			}
			50% {
				transform: translateY(10px);
			}
			100% {
				transform: translateY(0);
			}
		}
		.hidden {
			display: none;
		}
		.boss {
			display: none;
			position: absolute;
			top: 150px;
			left: 50%;
			transform: translateX(-50%);
			width: 150px;
			height: 150px;
			background-color: #ff9800;
			border-radius: 50%;
		}
		.win {
			display: none;
			margin-top: 50px;
			font-size: 32px;
			color: #4caf50;
			text-shadow: 1px 1px 0px #fff;
		}
	</style>
</head>
<body>
	<div class="container">
		<div id="characterSelect">
			<h1>Elige tu personaje</h1>
			<div class="character" id="blue-black"></div>
			<div class="character white-brown"></div>
			<div class="character penguin"></div>
			<div class="character unicorn"></div>
		</div>
		<div id="game" class="hidden">
			<h1>Nivel 1</h1>
			<div id="obstacle1" class="obstacle"></div>
			<div id="obstacle2" class="obstacle"></div>
			<div id="obstacle3" class="obstacle"></div>
			<div id="boss" class="boss"></div>
			<div id="win" class="win">¡Has ganado una foto!</div>
		</div>
	</div>

characters.forEach(char => {
			char.addEventListener('click', function() {
				character = this;
				characterName = character.classList[1];
				startGame(characterName);
			});
		});

// Iniciar juego
		function startGame(name) {
			document.getElementById('characterSelect').classList.add('hidden');
			document.getElementById('game').classList.remove('hidden');
			document.body.style.backgroundImage = "url('https://media.giphy.com/media/26AHGtBbnn9TcQdqk/giphy.gif')";
			document.body.style.backgroundSize = "cover";

// Animación de obstáculos
			const obstacles = document.querySelectorAll('.obstacle');
			setInterval(() => {
				obstacles.forEach(obstacle => {
					if (obstacle.style.display == 'none') {
						obstacle.style.display = 'block';
						obstacle.style.top = `${Math.floor(Math.random() * 300) + 100}px`;
						obstacle.style.left = `${Math.floor(Math.random() * 700) + 100}px`;
					}
				});
			}, 1000);

// Animación de jefe final
			const boss = document.getElementById('boss');
			setTimeout(() => {
				boss.style.display = 'block';
			}, 5000);
			boss.addEventListener('click', function() {
				document.getElementById('win').style.display = 'block';
				this.style.display = 'none';
			});

// Controles de personaje
			const characterEl = document.querySelector(`.${name}`);
			characterEl.style.display = 'block';
			let characterX = 0;
			let characterY = 0;
			let characterSpeed = 10;