반응형
[JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 4 !!
(배경화면 추가 및 게임오버 화면 추가)
안녕하세요 미사일 피하기 게임 4탄입니다.
이번에는 배경 사진을 넣는 것과 게임오버화면 추가하였습니다. ㅎ
아래 변경 사항이고, 예제코드 바로 사용하시면 됩니다 :)
예제코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미사일 피하기 게임</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<br>
<button id="restartButton">재시작</button>
<select id="difficulty">
<option value="easy">쉬움</option>
<option value="normal" selected>보통</option>
<option value="hard">어려움</option>
</select>
</body>
</html>
<script>
// 캔버스 요소 가져오기
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
// 배경 이미지 로드
let backgroundImage = new Image();
backgroundImage.src = 'https://blog.kakaocdn.net/dn/bqCDo5/btquourcoxx/RUh4DZE03vx0P9tP51PBjK/img.png'; // Replace with your image URL
// 플레이어 이미지 로드
let playerImage = new Image();
playerImage.src = 'https://cdn-icons-png.flaticon.com/512/619/619169.png'; // 여기에 비행기 이미지의 URL을 입력하세요
// 게임 상태 변수
let gameOver = false;
let score = 0;
let time = 0;
let player = {
x: canvas.width / 2,
y: canvas.height - 50,
radius: 20
};
let missiles = [];
// 키 이벤트 핸들러 등록
document.addEventListener('keydown', function(event) {
if (event.code === 'Escape') {
gameOver = true;
}
});
// 마우스 이벤트 핸들러 등록
canvas.addEventListener('mousemove', function(event) {
if (!gameOver) {
player.x = event.clientX - canvas.offsetLeft;
}
});
// 난이도 변수
let difficulty = "normal";
// 재시작 및 난이도 조절 함수 추가
document.getElementById('restartButton').addEventListener('click', function() {
gameOver = false;
score = 0;
time = 0;
missiles = [];
gameLoop();
});
document.getElementById('difficulty').addEventListener('change', function(event) {
difficulty = event.target.value;
});
// 게임 루프 함수
function gameLoop() {
// Set a solid color background
context.fillStyle = '#0000FF'; // Blue background
context.fillRect(0, 0, canvas.width, canvas.height);
// 게임 종료 시 게임 루프 중지
if (gameOver) {
return;
}
// 난이도에 따라 미사일 속도 조절
let speedMultiplier;
switch(difficulty) {
case "easy":
speedMultiplier = 1;
break;
case "hard":
speedMultiplier = 2;
break;
default:
speedMultiplier = 1.5;
}
for (let missile of missiles) {
missile.speed = 5 + (time / 500) * speedMultiplier;
}
// 난이도에 따른 미사일 갯수 조절
let missileCount;
switch(difficulty) {
case "easy":
missileCount = 1; // 쉬운 난이도에서는 미사일 갯수 적음
break;
case "hard":
missileCount = 3; // 어려운 난이도에서는 미사일 갯수 많음
break;
default:
missileCount = 2; // 보통 난이도
}
// 미사일 생성 로직
if (time % 50 === 0) {
for (let i = 0; i < missileCount; i++) {
missiles.push({
x: Math.random() * canvas.width,
y: 0,
radius: 10,
speed: 5 + time / 500
});
}
}
// 게임 상태 업데이트
time++;
if (time % 50 === 0) {
missiles.push({
x: Math.random() * canvas.width,
y: 0,
radius: 10,
speed: 5 + time / 500
});
}
for (let i = 0; i < missiles.length; i++) {
missiles[i].y += missiles[i].speed;
if (missiles[i].y > canvas.height) {
missiles.splice(i, 1);
i--;
} else {
let distance = Math.sqrt(Math.pow(player.x - missiles[i].x, 2) + Math.pow(player.y - missiles[i].y, 2));
// 충돌 검사
if (distance < player.radius + missiles[i].radius) {
gameOver = true;
}
}
}
score++;
// 게임 화면 그리기
context.clearRect(0, 0, canvas.width, canvas.height);
// 배경 그리기
context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
// 비행기 그리기
const targetWidth = 50; // 원하는 너비
const targetHeight = 50; // 원하는 높이
context.drawImage(playerImage, player.x - targetWidth / 2, player.y - targetHeight / 2, targetWidth, targetHeight);
context.beginPath();
context.fill();
for (let i = 0; i < missiles.length; i++) {
context.beginPath();
context.arc(missiles[i].x, missiles[i].y, missiles[i].radius, 0, 2 * Math.PI);
context.fillStyle = 'red';
context.fill();
}
context.fillStyle = 'black';
context.font = '24px Arial';
context.fillText('Score: ' + score, 10, 30);
// 다음 프레임 실행
requestAnimationFrame(gameLoop);
}
// 게임 루프 시작
requestAnimationFrame(gameLoop);
</script>
이전글
2023.12.16 - [Coding/JavaScript] - [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 3 !! (내 비행기 케릭터 추가하기)
2023.12.12 - [Coding/JavaScript] - [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 2 !! (재시작 버튼 및 난이도 조절)
2023.10.18 - [Coding/JavaScript] - [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 2 !!
2023.03.11 - [Coding/JavaScript] - [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 !!
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 wav 파일 실행하는 방법 !! (0) | 2024.01.04 |
|---|---|
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 5 !! (게임오버 사진추가 기능) (2) | 2023.12.31 |
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 3 !! (내 비행기 케릭터 추가하기) (0) | 2023.12.16 |
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 2 !! (재시작 버튼 및 난이도 조절) (15) | 2023.12.12 |
| [JavaScript] HTML에서 javascript를 활용하여 GET 방식으로 데이터 보내는 방법 !! (1) | 2023.12.07 |
댓글