Spaces:

kimhyunwoo
/

mango

Running

App Files Files Community

mango / index.html

kimhyunwoo

Update index.html

75f3231 verified 5 days ago

raw

history blame contribute delete

20.4 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>망고 합치기 게임</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #FFF3E0; /* 연한 망고색 배경 */
	font-family: 'Arial', sans-serif;
	overflow: hidden; /* 스크롤 방지 */
	touch-action: none; /* 모바일에서 불필요한 스크롤/줌 방지 */
	}

	#game-container {
	position: relative;
	border: 2px solid #FFA000; /* 진한 망고색 테두리 */
	background-color: #FFECB3; /* 게임 영역 배경 */
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 10px;
	overflow: hidden; /* 내부 요소가 넘치지 않도록 */
	}

	canvas {
	display: block;
	background-color: transparent; /* 캔버스 자체 배경은 투명하게 */
	}

	#ui-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	max-width: 400px; /* 게임 컨테이너 너비에 맞춤 */
	padding: 10px 0;
	color: #E65100; /* UI 텍스트 색상 */
	}

	#score-board, #next-mango-preview {
	font-size: 1.2em;
	font-weight: bold;
	}

	#game-over-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	font-size: 1.5em;
	display: none; /* 초기에는 숨김 */
	z-index: 100;
	}
	#game-over-message button {
	padding: 10px 20px;
	font-size: 0.8em;
	margin-top: 15px;
	background-color: #FFA000;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div id="ui-container">
	<div id="score-board">점수: 0</div>
	<div id="next-mango-preview">다음 망고: ?</div>
	</div>
	<div id="game-container">
	<canvas id="game-canvas"></canvas>
	<div id="game-over-message">
	게임 오버!<br>
	최종 점수: <span id="final-score">0</span>
	<button onclick="restartGame()">다시 시작</button>
	</div>
	</div>

	<script>
	// Matter.js 모듈
	const { Engine, Render, Runner, Bodies, Composite, Events, Mouse, MouseConstraint, Body } = Matter;

	// 게임 설정
	const gameContainer = document.getElementById('game-container');
	const canvas = document.getElementById('game-canvas');
	const scoreBoard = document.getElementById('score-board');
	const nextMangoPreview = document.getElementById('next-mango-preview');
	const gameOverMessage = document.getElementById('game-over-message');
	const finalScoreDisplay = document.getElementById('final-score');

	// 화면 크기에 맞게 캔버스 크기 동적 조절
	let canvasWidth = Math.min(window.innerWidth * 0.95, 400); // 화면 너비의 95% 또는 최대 400px
	let canvasHeight = Math.min(window.innerHeight * 0.7, 600); // 화면 높이의 70% 또는 최대 600px

	gameContainer.style.width = `${canvasWidth}px`;
	gameContainer.style.height = `${canvasHeight}px`;
	canvas.width = canvasWidth;
	canvas.height = canvasHeight;

	// 망고 종류 정의 (크기, 색상, 점수)
	const MANGO_TYPES = [
	{ radius: canvasWidth * 0.035, color: '#FFF9C4', score: 10, label: '애플망고 씨앗' }, // 매우 작음
	{ radius: canvasWidth * 0.045, color: '#FFF176', score: 20, label: '미니 망고' },
	{ radius: canvasWidth * 0.06, color: '#FFEE58', score: 40, label: '작은 망고' },
	{ radius: canvasWidth * 0.075, color: '#FFD54F', score: 80, label: '망고' },
	{ radius: canvasWidth * 0.09, color: '#FFC107', score: 160, label: '잘익은 망고' },
	{ radius: canvasWidth * 0.11, color: '#FFA000', score: 320, label: '특대 망고' },
	{ radius: canvasWidth * 0.13, color: '#FF8F00', score: 640, label: '점보 망고' },
	{ radius: canvasWidth * 0.15, color: '#FF6F00', score: 1280, label: '킹 망고' },
	{ radius: canvasWidth * 0.18, color: '#E65100', score: 2560, label: '골든 킹망고' } // 가장 큰 망고
	];

	let engine, render, runner;
	let currentDroppingMango = null;
	let nextMangoTypeIndex = 0;
	let score = 0;
	let gameOver = false;
	let canDrop = true; // 드랍 쿨타임
	const DROP_COOLDOWN = 300; // ms

	const gameOverLineY = canvasHeight * 0.15; // 이 선 위로 망고가 쌓이면 게임 오버

	function initGame() {
	gameOver = false;
	score = 0;
	updateScoreDisplay();
	gameOverMessage.style.display = 'none';
	canDrop = true;

	// Matter.js 엔진 생성
	engine = Engine.create();
	engine.world.gravity.y = 0.9; // 중력 설정

	// Matter.js 렌더러 생성
	render = Render.create({
	canvas: canvas,
	engine: engine,
	options: {
	width: canvasWidth,
	height: canvasHeight,
	wireframes: false, // 색상 채우기
	background: 'transparent' // game-container 배경색을 사용
	}
	});

	// 벽과 바닥 생성
	const wallOptions = { isStatic: true, render: { fillStyle: '#BCAAA4' } }; // 연갈색 벽
	Composite.add(engine.world, [
	Bodies.rectangle(canvasWidth / 2, canvasHeight + 25, canvasWidth, 50, wallOptions), // 바닥 (넉넉하게 아래로)
	Bodies.rectangle(-25, canvasHeight / 2, 50, canvasHeight, wallOptions), // 왼쪽 벽
	Bodies.rectangle(canvasWidth + 25, canvasHeight / 2, 50, canvasHeight, wallOptions) // 오른쪽 벽
	]);

	// 게임 오버 라인 (시각적 표시는 안함, 판정용)
	// Bodies.rectangle(canvasWidth / 2, gameOverLineY, canvasWidth, 2, { isStatic: true, isSensor: true, render: {fillStyle: 'red' }})

	// 다음 망고 준비
	prepareNextMango();
	updateNextMangoPreview();

	// 엔진 실행
	runner = Runner.create();
	Runner.run(runner, engine);
	Render.run(render);

	// 충돌 이벤트 리스너
	Events.on(engine, 'collisionStart', handleCollision);

	// 마우스/터치 이벤트
	gameContainer.addEventListener('click', handleDropInput);
	gameContainer.addEventListener('mousemove', handleMouseMove);
	gameContainer.addEventListener('touchmove', handleTouchMove, { passive: false }); // passive false로 스크롤 방지
	gameContainer.addEventListener('touchend', handleDropInput);


	// 게임 루프 (게임오버 체크 등)
	Events.on(engine, 'afterUpdate', checkGameOver);

	// 현재 떨어뜨릴 망고 생성
	spawnDroppingMango();
	}

	function spawnDroppingMango() {
	if (gameOver \|\| !canDrop) return;

	const mangoType = MANGO_TYPES[nextMangoTypeIndex];
	const x = Math.max(mangoType.radius, Math.min(canvasWidth - mangoType.radius, canvasWidth / 2)); // 중앙에서 시작

	currentDroppingMango = Bodies.circle(x, mangoType.radius * 1.5, mangoType.radius, {
	isStatic: true, // 떨어지기 전에는 고정
	restitution: 0.2,
	friction: 0.5,
	label: 'droppingMango',
	mangoIndex: nextMangoTypeIndex,
	render: {
	fillStyle: mangoType.color,
	strokeStyle: '#5D4037', // 망고 테두리
	lineWidth: 2
	}
	});
	Composite.add(engine.world, currentDroppingMango);

	prepareNextMango();
	updateNextMangoPreview();
	}

	function prepareNextMango() {
	// 처음 몇 개는 작은 망고 위주로
	if (Composite.allBodies(engine.world).filter(b => b.label === 'mango').length < 5) {
	nextMangoTypeIndex = Math.floor(Math.random() * 3); // 0, 1, 2 중 하나
	} else {
	nextMangoTypeIndex = Math.floor(Math.random() * 5); // 0, 1, 2, 3, 4 중 하나
	}
	}

	function updateNextMangoPreview() {
	if (gameOver) {
	nextMangoPreview.textContent = "다음 망고: -";
	return;
	}
	const nextType = MANGO_TYPES[nextMangoTypeIndex];
	// 이모지로 표현하거나, 색상 원으로 표현할 수도 있습니다.
	nextMangoPreview.innerHTML = `다음: <span style="color:${nextType.color}; font-size:1.2em;">●</span> ${nextType.label.split(' ')[0]}`;
	}

	function handleMouseMove(event) {
	if (gameOver \|\| !currentDroppingMango \|\| !currentDroppingMango.isStatic) return;
	const rect = canvas.getBoundingClientRect();
	let x = event.clientX - rect.left;
	const radius = MANGO_TYPES[currentDroppingMango.mangoIndex].radius;
	x = Math.max(radius, Math.min(canvasWidth - radius, x)); // 캔버스 경계 안으로 제한
	Body.setPosition(currentDroppingMango, { x: x, y: currentDroppingMango.position.y });
	}

	function handleTouchMove(event) {
	if (gameOver \|\| !currentDroppingMango \|\| !currentDroppingMango.isStatic) return;
	event.preventDefault(); // 스크롤 방지
	const rect = canvas.getBoundingClientRect();
	let x = event.touches[0].clientX - rect.left;
	const radius = MANGO_TYPES[currentDroppingMango.mangoIndex].radius;
	x = Math.max(radius, Math.min(canvasWidth - radius, x));
	Body.setPosition(currentDroppingMango, { x: x, y: currentDroppingMango.position.y });
	}

	function handleDropInput(event) {
	if (gameOver \|\| !currentDroppingMango \|\| !canDrop \|\| !currentDroppingMango.isStatic) return;

	Body.setStatic(currentDroppingMango, false); // 망고를 떨어뜨림
	currentDroppingMango.label = 'mango'; // 일반 망고로 레이블 변경

	currentDroppingMango = null;
	canDrop = false;

	// 다음 망고 스폰 쿨다운
	setTimeout(() => {
	canDrop = true;
	if (!gameOver) {
	spawnDroppingMango();
	}
	}, DROP_COOLDOWN);
	}

	function handleCollision({ pairs }) {
	if (gameOver) return;

	pairs.forEach(pair => {
	const bodyA = pair.bodyA;
	const bodyB = pair.bodyB;

	if (bodyA.label === 'mango' && bodyB.label === 'mango' &&
	bodyA.mangoIndex !== undefined && bodyB.mangoIndex !== undefined &&
	bodyA.mangoIndex === bodyB.mangoIndex) {

	// 같은 종류의 망고가 충돌하면
	const currentTypeIndex = bodyA.mangoIndex;
	if (currentTypeIndex < MANGO_TYPES.length - 1) {
	// 합쳐질 위치 (두 망고의 중간)
	const newPosition = {
	x: (bodyA.position.x + bodyB.position.x) / 2,
	y: (bodyA.position.y + bodyB.position.y) / 2
	};

	// 기존 망고 제거
	Composite.remove(engine.world, [bodyA, bodyB]);

	// 새 망고 생성
	const nextTypeIndex = currentTypeIndex + 1;
	const newMangoType = MANGO_TYPES[nextTypeIndex];
	const newMango = Bodies.circle(newPosition.x, newPosition.y, newMangoType.radius, {
	restitution: 0.2,
	friction: 0.5,
	label: 'mango',
	mangoIndex: nextTypeIndex,
	render: {
	fillStyle: newMangoType.color,
	strokeStyle: '#5D4037',
	lineWidth: 2
	}
	});
	Composite.add(engine.world, newMango);

	// 점수 추가
	score += newMangoType.score;
	updateScoreDisplay();

	// 합쳐질 때 작은 효과 (선택 사항)
	Body.scale(newMango, 1.1, 1.1); // 살짝 커졌다가
	setTimeout(() => Body.scale(newMango, 1/1.1, 1/1.1), 50); // 원래 크기로
	} else {
	// 가장 큰 망고끼리 합쳐지면 특별한 처리 (예: 보너스 점수)
	score += MANGO_TYPES[currentTypeIndex].score * 2; // 마지막 망고 합체 시 보너스
	updateScoreDisplay();
	// 여기서는 그냥 두지만, 원한다면 두 개를 제거할 수도 있음
	}
	}
	});
	}

	function updateScoreDisplay() {
	scoreBoard.textContent = `점수: ${score}`;
	}

	let gameOverCheckTimeout = null;

	function checkGameOver() {
	if (gameOver) return;

	const bodies = Composite.allBodies(engine.world);
	for (let body of bodies) {
	// 'droppingMango'는 아직 떨어지는 중이므로 제외, isStatic도 제외 (벽 등)
	if (body.label === 'mango' && !body.isStatic) {
	// 망고의 최상단이 게임 오버 라인보다 위에 있고, 속도가 거의 멈췄을 때
	if (body.position.y - MANGO_TYPES[body.mangoIndex].radius < gameOverLineY && Math.abs(body.velocity.y) < 0.1) {
	// 바로 게임오버 시키지 않고, 잠깐 유예 시간을 둠 (아슬아슬하게 걸치는 경우)
	if (!gameOverCheckTimeout) {
	gameOverCheckTimeout = setTimeout(() => {
	// 유예 시간 후에도 여전히 조건 만족 시 게임 오버
	if (body.position.y - MANGO_TYPES[body.mangoIndex].radius < gameOverLineY) {
	triggerGameOver();
	}
	gameOverCheckTimeout = null;
	}, 1500); // 1.5초 유예
	}
	return; // 하나라도 걸리면 일단 대기
	}
	}
	}
	// 게임오버 라인에 걸린 망고가 없으면 유예 타이머 취소
	if (gameOverCheckTimeout) {
	clearTimeout(gameOverCheckTimeout);
	gameOverCheckTimeout = null;
	}
	}

	function triggerGameOver() {
	if (gameOver) return; // 중복 호출 방지
	gameOver = true;
	canDrop = false; // 더 이상 드랍 불가

	finalScoreDisplay.textContent = score;
	gameOverMessage.style.display = 'block';

	// 현재 움직이는 망고가 있다면 제거
	if(currentDroppingMango) {
	Composite.remove(engine.world, currentDroppingMango);
	currentDroppingMango = null;
	}
	updateNextMangoPreview(); // 다음 망고 표시 없애기

	// Runner.stop(runner); // 물리엔진 멈추기 (선택)
	// Render.stop(render); // 렌더링 멈추기 (선택)
	console.log("게임 오버! 최종 점수:", score);
	}

	function restartGame() {
	// 기존 Matter.js 객체들 정리
	if (runner) Runner.stop(runner);
	if (render) Render.stop(render);
	if (engine) {
	Composite.clear(engine.world, false); // false는 벽 등 static body는 남기지 않음
	Engine.clear(engine);
	}
	// 이벤트 리스너도 제거해야 할 수 있으나, 여기서는 gameContainer를 통째로 쓰므로 괜찮을 수 있음
	// gameContainer.removeEventListener('click', handleDropInput);
	// ... (다른 리스너들도)

	// 게임 재시작
	initGame();
	}

	// 창 크기 변경 시 게임 다시 로드 (간단한 처리)
	// 좀 더 부드러운 리사이징을 원하면, Matter.js의 Render.setPixelRatio, Body.scale 등을 사용해야 함
	window.addEventListener('resize', () => {
	// 게임이 진행 중이었다면, 사용자에게 알리고 재시작 유도하는 것이 좋음
	// 여기서는 간단하게 새로고침 방식으로 처리하거나, restartGame() 호출
	// alert("화면 크기가 변경되어 게임을 재시작합니다.");
	// location.reload(); // 가장 간단한 방법

	// 혹은 동적으로 캔버스 크기만 조절 (더 복잡함)
	canvasWidth = Math.min(window.innerWidth * 0.95, 400);
	canvasHeight = Math.min(window.innerHeight * 0.7, 600);

	gameContainer.style.width = `${canvasWidth}px`;
	gameContainer.style.height = `${canvasHeight}px`;

	if (render) {
	render.canvas.width = canvasWidth;
	render.canvas.height = canvasHeight;
	render.options.width = canvasWidth;
	render.options.height = canvasHeight;

	// 벽 위치 업데이트
	const bodies = Composite.allBodies(engine.world);
	const ground = bodies.find(b => b.label === 'Rectangle Body' && b.position.y > canvasHeight - 50); // 대략적 바닥 찾기
	const leftWall = bodies.find(b => b.label === 'Rectangle Body' && b.position.x < 0);
	const rightWall = bodies.find(b => b.label === 'Rectangle Body' && b.position.x > canvasWidth - 50);

	if(ground) Body.setPosition(ground, { x: canvasWidth / 2, y: canvasHeight + 25 });
	if(leftWall) Body.setPosition(leftWall, { x: -25, y: canvasHeight / 2 });
	if(rightWall) Body.setPosition(rightWall, { x: canvasWidth + 25, y: canvasHeight / 2 });

	// 과일 크기도 비율에 맞게 재조정 필요
	// MANGO_TYPES의 radius를 canvasWidth 기준으로 다시 계산하고,
	// 현재 화면의 모든 망고들의 크기를 Body.scale로 조절해야 함. (이 부분은 생략함, 복잡도 증가)
	// 간단히 restartGame()을 호출하는 것이 더 나을 수 있음.
	}
	// 실제로는 더 복잡한 리사이즈 처리가 필요. 여기서는 간단히 UI만 맞춤.
	// 게임을 처음부터 다시 시작하는게 가장 안정적일 수 있음.
	});


	// 게임 시작
	initGame();
	</script>
	</body>
	</html>