<!DOCTYPE html>

<html>

<head>

<style>

#gameCanvas {

border: 1px solid black;

background-image:

url("https://ai.esmplus.com/yhkorea11/sellerhub/20230502/HOUSE.jpg");

background-size: cover;

}

#info {

position: absolute;

top: 10px;

left: 10px;

font-size: 20px;

}

#scoreboard {

position: absolute;

top: 50px;

left: 45%;

transform: translateX(-50%);

font-size: 50px;

}

#restartButton {

display: none;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

padding: 10px 20px;

font-size: 20px;

}

</style>

</head>

<body>

</div>

Your browser does not support the audio element.

</audio>

// 게임 초기화

var canvas = document.getElementById("gameCanvas");

var context = canvas.getContext("2d");

var maxObstacleSpeed = 6; // 장애물의 최대 이동 속도

var obstacleSpeedIncrease = 0.1; // 장애물의 이동 속도 증가량

// 이미지 로드

var bug1Image = new Image();

bug1Image.src =

"https://ai.esmplus.com/yhkorea11/sellerhub/20230517/png1.png";

var bug2Image = new Image();

bug2Image.src =

"https://ai.esmplus.com/yhkorea11/sellerhub/20230517/png2.png";

var bug3Image = new Image();

bug3Image.src =

"https://ai.esmplus.com/yhkorea11/sellerhub/20230517/png3.png";

var playerImage = new Image();

playerImage.src =

"https://ai.esmplus.com/yhkorea11/sellerhub/20230517/13.png";

var bulletImage = new Image();

bulletImage.src =

"https://ai.esmplus.com/yhkorea11/sellerhub/20230517/23.png";

// 플레이어 설정

var player = {

x: canvas.width / 2,

y: canvas.height - 30,

width: 100,

height: 100,

speed: 5,

dx: 0,

dy: 0,

energy: 10,

direction: "down" // 플레이어의 초기 총알 방향

};

// 점수 설정

var score = 0;

// 키보드 이벤트 처리

var keys = {};

document.addEventListener("keydown", function (event) {

keys[event.keyCode] = true;

});

document.addEventListener("keyup", function (event) {

delete keys[event.keyCode];

});

// 장애물 제거 효과음

var obstacleCollisionSound = new Audio();

obstacleCollisionSound.src = "obstacle_collision_sound.mp3"; // 효과음 파일

경로

// 총알 발사 시 효과음

var shootSound = new Audio();

shootSound.src = "shoot_sound.mp3"; // 총알 발사 효과음 파일 경로

function updatePlayerPosition() {

if (37 in keys) {

// 왼쪽 화살표 키

player.dx = -player.speed;

player.direction = "left"; // 플레이어의 총알 방향을 왼쪽으로 설정

} else if (39 in keys) {

// 오른쪽 화살표 키

player.dx = player.speed;

player.direction = "right"; // 플레이어의 총알 방향을 오른쪽으로 설정

} else {

player.dx = 0;

}

if (38 in keys) {

// 위쪽 화살표 키

player.dy = -player.speed;

player.direction = "up"; // 플레이어의 총알 방향을 위쪽으로 설정

} else if (40 in keys) {

// 아래쪽 화살표 키

player.dy = player.speed;

player.direction = "down"; // 플레이어의 총알 방향을 아래쪽으로 설정

} else {

player.dy = 0;

}

player.x += player.dx;

player.y += player.dy;

// 플레이어가 캔버스 영역을 벗어나지 않도록 제한

if (player.x < 0) {

player.x = 0;

} else if (player.x + player.width > canvas.width) {

player.x = canvas.width - player.width;

}

if (player.y < 0) {

player.y = 0;

} else if (player.y + player.height > canvas.height) {

player.y = canvas.height - player.height;

}

// 총알 설정

var bullets = [];

function shootBullet() {

var bullet = {

x: player.x + player.width / 2,

y: player.y,

width: 40,

height: 40,

speed: 5,

direction: player.direction // 플레이어의 총알 방향을 총알에 전달

};

bullets.push(bullet);

// 총알 발사 효과음 재생

shootSound.play();

}

// 장애물 설정

var obstacles = [];

var obstacleCollisionSound = new Audio();

obstacleCollisionSound.src = "obstacle_collision_sound.mp3"; // 장애물 제거

효과음 파일 경로

function createObstacle() {

var randomBug = Math.floor(Math.random() * 3) + 1; // 1: bug1, 2:

bug2, 3: bug3

var bugImage, bugWidth, bugHeight, bugSpeedX, bugSpeedY;

switch (randomBug) {

case 1:

bugImage = bug1Image;

bugWidth = Math.floor(Math.random() * (100 - 20 + 1)) + 20; //

장애물의 랜덤 가로 크기

bugHeight = bugWidth;

bugSpeedX = 3; // 장애물 1의 속도 (느린 속도)

bugSpeedY = 0;

break;

case 2:

bugImage = bug2Image;

bugWidth = Math.floor(Math.random() * (100 - 20 + 1)) + 20; //

장애물의 랜덤 가로 크기

bugHeight = bugWidth;

bugSpeedX = 4.5; // 장애물 2의 속도 (보통 속도)

bugSpeedY = 0;

break;

case 3:

bugImage = bug3Image;

bugWidth = Math.floor(Math.random() * (100 - 20 + 1)) + 20; //

장애물의 랜덤 가로 크기

bugHeight = bugWidth;

bugSpeedX = 6; // 장애물 3의 속도 (빠른 속도)

bugSpeedY = Math.random() * (6 - 3) + 3; // 위에서 아래로 이동

하는 속도 범위 (3에서 6 사이의 속도)

break;

}

var obstacleX, obstacleY;

var randomDirection = Math.floor(Math.random() * 4); // 0: 왼쪽에서 오

른쪽, 1: 오른쪽에서 왼쪽, 2: 아래에서 위로, 3: 위에서 아래로

switch (randomDirection) {

case 0:

obstacleX = -bugWidth;

obstacleY = Math.random() * (canvas.height - bugHeight);

break;

case 1:

obstacleX = canvas.width;

obstacleY = Math.random() * (canvas.height - bugHeight);

break;

case 2:

obstacleX = Math.random() * (canvas.width - bugWidth);

obstacleY = -bugHeight;

break;

case 3:

obstacleX = Math.random() * (canvas.width - bugWidth);

obstacleY = canvas.height;

break;

}

var obstacle = {

x: obstacleX,

y: obstacleY,

width: bugWidth,

height: bugHeight,

speedX: bugSpeedX,

speedY: bugSpeedY,

image: bugImage,

};

obstacles.push(obstacle);

}

function updateObstacles() {

for (var i = 0; i < obstacles.length; i++) {

var obstacle = obstacles[i];

obstacle.x += obstacle.speedX;

obstacle.y += obstacle.speedY;

// 장애물 그리기

context.drawImage(obstacle.image, obstacle.x, obstacle.y,

obstacle.width, obstacle.height);

// 플레이어와 장애물 충돌 검사

if (

player.x < obstacle.x + obstacle.width &&

player.x + player.width > obstacle.x &&

player.y < obstacle.y + obstacle.height &&

player.y + player.height > obstacle.y

) {

// 충돌 발생 시 플레이어 에너지 감소

player.energy -= 1;

document.getElementById("energy").textContent = "플레이어 에너지:

" + player.energy;

// 플레이어 에너지가 0 이하로 내려가면 게임 종료

if (player.energy <= 0) {

endGame();

}

// 총알과 장애물 충돌 검사

for (var j = 0; j < bullets.length; j++) {

var bullet = bullets[j];

if (

bullet.x < obstacle.x + obstacle.width &&

bullet.x + bullet.width > obstacle.x &&

bullet.y < obstacle.y + obstacle.height &&

bullet.y + bullet.height > obstacle.y

) {

// 총알과 장애물이 충돌하면 총알과 장애물 제거

bullets.splice(j, 1);

obstacles.splice(i, 1);

i--;

j--;

// 장애물 제거 효과음 재생

obstacleCollisionSound.play();

// 점수 증가

var obstacleScore = 0;

if (obstacle.image === bug1Image) {

obstacleScore = 5;

} else if (obstacle.image === bug2Image || obstacle.image

=== bug3Image) {

obstacleScore = 15;

}

score += obstacleScore;

document.getElementById("scoreboard").textContent = "점수: "

+ score;

}

// 화면 밖으로 나간 장애물 제거

if (

obstacle.x + obstacle.width < 0 ||

obstacle.x > canvas.width ||

obstacle.y + obstacle.height < 0 ||

obstacle.y > canvas.height

) {

obstacles.splice(i, 1);

i--;

}

// 게임 루프

var startTime = Date.now();

var gameLoopInterval;

function gameLoop() {

context.clearRect(0, 0, canvas.width, canvas.height);

// 플레이어 이동

updatePlayerPosition();

// 플레이어 그리기

context.drawImage(playerImage, player.x, player.y, player.width,

player.height);

// 총알 이동 및 그리기

for (var i = 0; i < bullets.length; i++) {

var bullet = bullets[i];

if (bullet.direction === "right") {

bullet.x += bullet.speed;

} else if (bullet.direction === "left") {

bullet.x -= bullet.speed;

} else if (bullet.direction === "up") {

bullet.y -= bullet.speed;

} else if (bullet.direction === "down") {

bullet.y += bullet.speed;

}

context.drawImage(bulletImage, bullet.x, bullet.y, bullet.width,

bullet.height);

// 화면 밖으로 나간 총알 제거

if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y >

canvas.height) {

bullets.splice(i, 1);

i--;

}

// 장애물 생성

if (Math.random() < 0.1) {

createObstacle();

}

// 장애물 이동 및 충돌 검사

updateObstacles();

// 경과 시간 계산

var elapsedTime = Math.floor((Date.now() - startTime) / 1000);

document.getElementById("time").textContent = "경과 시간: " +

elapsedTime;

// 게임 종료 조건 확인

if (player.energy <= 0) {

clearInterval(gameLoopInterval);

endGame();

} else {

// 게임 루프 반복

gameLoopInterval = requestAnimationFrame(gameLoop);

}

// 게임 시작

function startGame() {

// 플레이어 초기 위치 설정

player.x = canvas.width / 2;

player.y = canvas.height - 30;

// 게임 루프 시작

gameLoop();

}

// 게임 종료

function endGame() {

// 게임 종료 처리

clearInterval(gameLoopInterval);

alert("Game Over!");

document.getElementById("restartButton").style.display = "inline";

}

// 게임 다시 시작

function restartGame() {

// 초기화

player.energy = 10;

score = 0;

bullets = [];

obstacles = [];

startTime = Date.now();

// UI 초기화

document.getElementById("energy").textContent = "플레이어 에너지: " +

player.energy;

document.getElementById("scoreboard").textContent = "점수: " + score;

document.getElementById("time").textContent = "경과 시간: 0";

document.getElementById("restartButton").style.display = "none";

// 게임 시작

startGame();

}

// 키보드 이벤트 처리

document.addEventListener("keydown", function (event) {

if (event.keyCode === 32) {

// 스페이스바를 누르면 총알 발사

shootBullet();

}

});

// 게임 시작

startGame();

</script>

</body>

</html>