안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제 캐릭터가 화면 밖으로 가출하지 못하게 막는 ‘경계선 충돌 마법’을 성공적으로 걸어보았죠? 오늘은 게임의 진짜 재미! 화면에 나타난 보물을 먹으면 숫자가 쑥쑥 올라가는 ‘아이템 충돌(Item Collection) 마법’을 배워보겠습니다!
1. 아이템 충돌의 원리: “두 사각형이 겹쳤나요?”
코딩에서 물체끼리 부딪혔는지 확인하는 가장 쉬운 방법은 두 물체의 영역(Bounding Box)이 겹치는지 계산하는 거예요. 주인공의 위치와 보물의 위치를 비교해서, 서로의 몸이 조금이라도 포개지면 “앗! 보물을 먹었다!”라고 판단하고 점수(Score) 변수에 1을 더해주는 것이죠.
2. 보물 생성과 점수 올리기 (코드)
랜덤한 위치에 반짝이는 보물을 만들고, 주인공이 닿을 때마다 점수가 올라가는 코드를 완성해 봅시다. 사용자님이 딸을 위해 만드시는 ‘EduPad’에 적용한다면, 수학 문제를 풀 때마다 보너스 코인을 먹는 미니 게임으로 변신할 수 있답니다!
<?php
// game_score.php: 보물 찾기 마법
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; background: #2c3e50; color: white; }
canvas { border: 5px solid #f1c40f; background: #34495e; }
.score-board { font-size: 24px; margin: 10px; color: #f1c40f; }
</style>
</head>
<body>
<div class="score-board">💰 내 점수: <span id="score">0</span></div>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let score = 0;
let player = { x: 50, y: 50, size: 30, speed: 10 };
let coin = { x: 200, y: 200, size: 20 }; // 반짝이는 보물
function checkCollision() {
// 1. 주인공과 보물이 겹치는지 마법으로 검사해요
if (player.x < coin.x + coin.size &&
player.x + player.size > coin.x &&
player.y < coin.y + coin.size &&
player.y + player.size > coin.y) {
// 2. 닿았다면! 점수 올리고 보물 위치를 랜덤하게 옮겨요
score += 10;
document.getElementById('score').innerText = score;
coin.x = Math.random() * (canvas.width - coin.size);
coin.y = Math.random() * (canvas.height - coin.size);
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 주인공 그리기
ctx.fillStyle = '#2ecc71';
ctx.fillRect(player.x, player.y, player.size, player.size);
// 보물 그리기
ctx.fillStyle = '#f1c40f';
ctx.beginPath();
ctx.arc(coin.x + 10, coin.y + 10, 10, 0, Math.PI * 2);
ctx.fill();
}
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') player.y -= player.speed;
if (e.key === 'ArrowDown') player.y += player.speed;
if (e.key === 'ArrowLeft') player.x -= player.speed;
if (e.key === 'ArrowRight') player.x += player.speed;
checkCollision();
draw();
});
draw();
</script>
</body>
</html>3. 왜 아이템 마법이 중요할까요?
목표가 생기면 게임이 훨씬 더 몰입감 있게 변하기 때문이에요!
1. 보상 피드백: 단순히 움직이는 것보다 점수가 올라가는 소리와 화면의 변화는 아이들에게 ‘내가 해냈다!’는 큰 즐거움을 줍니다. ‘Running-to-Donation’ 앱에서도 걸음 수가 기부금으로 변하는 순간의 기쁨과 같죠.
2. 알고리즘 연습: 두 사각형의 좌표를 비교하는 수식은 코딩에서 가장 많이 쓰이는 논리 중 하나예요. 게임을 통해 수학적 부등식을 아주 자연스럽게 배울 수 있답니다.
4. 아이들과 함께하는 ‘거실 보물 찾기’ 놀이
거실 여기저기에 사탕이나 장난감을 숨겨두고, 아이가 아빠의 화살표 명령(왼쪽! 오른쪽!)을 듣고 보물을 찾는 놀이를 해보세요. 보물을 만지는 순간 “충돌 성공! 10점 추가!”라고 외쳐주세요. “네가 보물을 만지는 행동이 코딩의 checkCollision 함수란다!”라고 설명해 주세요. 객체 간 상호작용의 개념을 몸으로 아주 재미있게 배우게 됩니다.
마치며: 이제 진짜 모험이 시작됐어요!
오늘 우리는 아이템을 먹고 점수를 획득하는 신나는 마법을 배웠습니다. 이제 우리 주인공에게는 보물을 모아야 한다는 멋진 임무가 생겼네요! 다음 시간에는 14기 웹 게임 시리즈의 대단원, ‘완성! 60초 안에 보물을 많이 먹어라! 통합 미니 게임’을 완성해 보겠습니다. 최고 점수를 경신할 준비 되셨나요? 내일 아침에 만나요! ✨
