html 형식이라서 바로 적용 해서사용 하시면 될것 같네여
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>레트로 갤러그 - 20단계</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
font-family: Arial, sans-serif;
}
#gameContainer {
position: relative;
}
#gameCanvas {
border: 2px solid #333;
background-color: #000;
}
#gameInfo {
color: white;
position: absolute;
top: -30px;
left: 10px;
font-size: 20px;
width: 100%;
display: flex;
justify-content: space-between;
}
#controls {
color: white;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="gameInfo">
<span>점수: <span id="scoreValue">0</span></span>
<span>레벨: <span id="levelValue">1</span></span>
</div>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="controls">
조작: ← → 키로 이동, 스페이스바로 발사
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('scoreValue');
const levelElement = document.getElementById('levelValue');
// 게임 상태
let score = 0;
let level = 1;
let gameOver = false;
let levelCompleted = false;
// 플레이어 우주선
const player = {
x: canvas.width / 2,
y: canvas.height - 50,
width: 30,
height: 30,
speed: 5,
bullets: []
};
// 적 우주선들
let enemies = [];
const enemyWidth = 30;
const enemyHeight = 30;
const enemyPadding = 20;
// 키 입력 상태
const keys = {
left: false,
right: false,
space: false
};
// 레벨별 설정
function getLevelConfig(level) {
return {
enemyRows: Math.min(3 + Math.floor(level / 4), 6),
enemyCols: Math.min(6 + Math.floor(level / 3), 10),
enemySpeed: Math.min(1 + level * 0.5, 8),
enemyFireRate: Math.min(0.002 + level * 0.001, 0.01),
movePattern: level % 3 // 0: 좌우, 1: 사인파, 2: 지그재그
};
}
// 적 우주선 초기화
function initEnemies() {
enemies = [];
const config = getLevelConfig(level);
for (let row = 0; row < config.enemyRows; row++) {
for (let col = 0; col < config.enemyCols; col++) {
enemies.push({
x: col * (enemyWidth + enemyPadding) + 50,
y: row * (enemyHeight + enemyPadding) + 50,
initialX: col * (enemyWidth + enemyPadding) + 50,
initialY: row * (enemyHeight + enemyPadding) + 50,
width: enemyWidth,
height: enemyHeight,
alive: true,
moveOffset: 0,
bullets: []
});
}
}
}
// 적 우주선 움직임 업데이트
function updateEnemyPositions(time) {
const config = getLevelConfig(level);
enemies.forEach((enemy, index) => {
if (!enemy.alive) return;
switch(config.movePattern) {
case 0: // 좌우 이동
enemy.x = enemy.initialX + Math.sin(time * 0.002) * 50;
enemy.y = enemy.initialY + time * 0.02;
break;
case 1: // 사인파 이동
enemy.x = enemy.initialX + Math.sin(time * 0.003 + index * 0.2) * 70;
enemy.y = enemy.initialY + Math.cos(time * 0.002) * 30 + time * 0.02;
break;
case 2: // 지그재그 이동
enemy.x = enemy.initialX + ((time * 0.1 + index * 50) % 100) - 50;
enemy.y = enemy.initialY + time * 0.02;
break;
}
// 적 총알 발사
if (Math.random() < config.enemyFireRate) {
enemy.bullets.push({
x: enemy.x + enemy.width / 2,
y: enemy.y + enemy.height,
speed: 5
});
}
});
}
// 적 총알 업데이트
function updateEnemyBullets() {
enemies.forEach(enemy => {
enemy.bullets = enemy.bullets.filter(bullet => {
bullet.y += bullet.speed;
// 플레이어 충돌 체크
if (bullet.y >= player.y &&
bullet.y <= player.y + player.height &&
bullet.x >= player.x - player.width/2 &&
bullet.x <= player.x + player.width/2) {
gameOver = true;
return false;
}
return bullet.y < canvas.height;
});
});
}
// 플레이어 그리기
function drawPlayer() {
ctx.fillStyle = '#00ff00';
ctx.fillRect(player.x - player.width/2, player.y, player.width, player.height);
}
// 총알 그리기
function drawBullets() {
// 플레이어 총알
ctx.fillStyle = '#fff';
player.bullets.forEach(bullet => {
ctx.fillRect(bullet.x - 2, bullet.y, 4, 10);
});
// 적 총알
ctx.fillStyle = '#ff0';
enemies.forEach(enemy => {
enemy.bullets.forEach(bullet => {
ctx.fillRect(bullet.x - 2, bullet.y, 4, 10);
});
});
}
// 적 우주선 그리기
function drawEnemies() {
enemies.forEach(enemy => {
if (enemy.alive) {
ctx.fillStyle = `hsl(${360 * (level % 10) / 10}, 100%, 50%)`;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
}
});
}
// 충돌 감지
function checkCollisions() {
player.bullets.forEach((bullet, bulletIndex) => {
enemies.forEach(enemy => {
if (enemy.alive &&
bullet.x >= enemy.x &&
bullet.x <= enemy.x + enemy.width &&
bullet.y >= enemy.y &&
bullet.y <= enemy.y + enemy.height) {
enemy.alive = false;
player.bullets.splice(bulletIndex, 1);
score += 100 * level;
scoreElement.textContent = score;
}
});
});
}
// 레벨 완료 체크
function checkLevelComplete() {
if (enemies.every(enemy => !enemy.alive)) {
if (level < 20) {
level++;
levelElement.textContent = level;
initEnemies();
} else {
gameOver = true;
alert('축하합니다! 모든 레벨을 클리어했습니다!\n최종 점수: ' + score);
}
}
}
// 게임 업데이트
function update(time) {
if (gameOver) return;
// 플레이어 이동
if (keys.left && player.x > player.width/2) {
player.x -= player.speed;
}
if (keys.right && player.x < canvas.width - player.width/2) {
player.x += player.speed;
}
// 총알 업데이트
player.bullets.forEach((bullet, index) => {
bullet.y -= 7;
if (bullet.y < 0) {
player.bullets.splice(index, 1);
}
});
// 적 움직임 업데이트
updateEnemyPositions(time);
updateEnemyBullets();
// 충돌 체크
checkCollisions();
checkLevelComplete();
}
// 화면 그리기
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawBullets();
drawEnemies();
}
// 게임 루프
let lastTime = 0;
function gameLoop(timestamp) {
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
update(timestamp);
draw();
requestAnimationFrame(gameLoop);
}
// 키보드 이벤트
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') keys.left = true;
if (e.key === 'ArrowRight') keys.right = true;
if (e.key === ' ' && !keys.space) {
keys.space = true;
player.bullets.push({
x: player.x,
y: player.y
});
}
});
document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowLeft') keys.left = false;
if (e.key === 'ArrowRight') keys.right = false;
if (e.key === ' ') keys.space = false;
});
// 게임 시작
initEnemies();
gameLoop(0);
</script>
</body>
</html>
저장해서 바로 적용 하시면 된답니다 .
'정보' 카테고리의 다른 글
| 자동매매프로그램제작과정 (0) | 2025.01.13 |
|---|---|
| AI 자동 트레이딩 봇: 예제 코드 (0) | 2025.01.06 |
| 무료 AI 이미지제작 사이트 (2) | 2025.01.02 |
| 초보자부터 전문가까지 알아야 할 핵심 전략 (3) | 2024.12.30 |
| 대한민국 국군통수권의 이해 (5) | 2024.12.16 |