반응형
[JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 2 !! (재시작 버튼 및 난이도 조절)
기존에 만들었던 1탄에서 재시작버튼과 난이도조절 업데이트 했습니다 ㅎ
2023.03.11 - [Coding/JavaScript] - [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 !!
[JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 !!
[JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 !! 아주 심플한 마우스로 미사일 피하기 게임 코드 입니다 ! 한번 만들어 보세요 ㅎ 예제코드 결과값
seill.tistory.com
예제코드
<!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 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() {
// 게임 종료 시 게임 루프 중지
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.beginPath();
context.arc(player.x, player.y, player.radius, 0, 2 * Math.PI);
context.fillStyle = 'blue';
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>
결과값
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 4 !! (배경화면 추가 및 게임오버 화면 추가) (11) | 2023.12.27 |
|---|---|
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 3 !! (내 비행기 케릭터 추가하기) (0) | 2023.12.16 |
| [JavaScript] HTML에서 javascript를 활용하여 GET 방식으로 데이터 보내는 방법 !! (1) | 2023.12.07 |
| [JavaScript] 자바스크립트 문자열내에서 엔터(줄바꿈) 적용되게 하는법 !! (0) | 2023.11.27 |
| [JavaScript] ChatGPT API 를 활용하여 나만의 인공지능 비서만드는 방법2 !! (4) | 2023.11.24 |
댓글