반응형
[JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 2 !!
전에는 마우스로 미사일을 피했는데 이번에는
키보드로 피하면서 미사일이 알파뱃으로 날라옵니다 ㅎㅎ
알파뱃 입력해서 미사일을 없애면서 피하는 게임입니다 :)
주석으로 게임관련 코드 설명해놨으니 취향에 맞게 커스텀하시면 됩니다 ㅎ
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="gameCanvas" width="500" height="500"></canvas>
</body>
</html>
<script>
// 게임 상태
let missiles = [];
let score = 0;
let lives = 3;
let difficulty = 3; // 난이도 (1: 쉬움, 2: 보통, 3: 어려움)
// 플레이어 위치
let playerX = 250;
let playerY = 450;
// 캔버스 설정
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 키보드 입력 처리
document.addEventListener('keydown', keyDownHandler);
function keyDownHandler(event) {
if (event.key === 'ArrowLeft') {
playerX -= 10;
} else if (event.key === 'ArrowRight') {
playerX += 10;
} else if (event.key === 'ArrowUp') {
playerY -= 10;
} else if (event.key === 'ArrowDown') {
playerY += 10;
} else if (event.keyCode >= 65 && event.keyCode <= 90) {
// 알파벳 키 입력 처리
let letter = event.key.toUpperCase();
for (let i = 0; i < missiles.length; i++) {
if (missiles[i].letter === letter) {
missiles.splice(i, 1);
score++;
break;
}
}
}
}
// 미사일 생성
function createMissile() {
let x = Math.random() * 500;
let y = 0;
let letter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
let size = Math.random() * 30 + 10; // 미사일 크기 (10 ~ 40)
missiles.push({x: x, y: y, letter: letter, size: size});
}
// 게임 업데이트
function updateGame() {
// 화면 지우기
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 플레이어 그리기
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(playerX, playerY, 20, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
// 미사일 그리기
ctx.fillStyle = 'red';
for (let i = 0; i < missiles.length; i++) {
let missile = missiles[i];
ctx.font = `${missile.size}px Arial`;
ctx.fillText(missile.letter, missile.x, missile.y);
missile.y += 5;
// 미사일이 플레이어에게 닿았는지 확인
if (missile.y > playerY - 20 && missile.y < playerY + 20 && missile.x > playerX - 20 && missile.x < playerX + 20) {
lives--;
missiles.splice(i, 1);
i--;
}
}
// 점수와 생명력 표시
ctx.font = '20px Arial';
ctx.fillText(`Score: ${score}`, 10, 20);
ctx.fillText(`Lives: ${lives}`, 10, 40);
// 미사일 생성
if (Math.random() < score / (1000 / difficulty) + 0.01) {
createMissile();
}
// 게임오버 체크
if (lives === 0) {
clearInterval(intervalId);
alert('Game Over!');
}
}
// 게임 시작
let intervalId = setInterval(updateGame, 20);
</script>결과값
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] ChatGPT API 를 활용하여 나만의 인공지능 비서만드는 방법2 !! (4) | 2023.11.24 |
|---|---|
| [JavaScript] 자바스크립를 활용하여 시간 지나면 자동 새로고침과 키보드 입력시 초기화 하는 방법 !! (0) | 2023.11.13 |
| [JavaScript] 자바스크립를 활용하여 숫자맞추기 게임 만들기 (up&down game) (0) | 2023.10.17 |
| [JavaScript] 글자 타이핑 하는 효과 내는 방법 !! (Typed.js 라이브러리 활용) (0) | 2023.08.05 |
| [JavaScript] 자바스크립를 활용하여 input 태그안에 value 넣는 방법 !! (0) | 2023.07.11 |
댓글