728x90
반응형
[JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 !!
아주 심플한 마우스로 미사일 피하기 게임 코드 입니다 ! 한번 만들어 보세요 ㅎ
예제코드
<!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>
<script src="game.js"></script>
</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;
}
});
// 게임 루프 함수
function gameLoop() {
// 게임 종료 시 게임 루프 중지
if (gameOver) {
return;
}
// 게임 상태 업데이트
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 & jQuery] 자바스크립트로 주민번호 뒷자리 마스킹 하는 방법 !!(별표처리) (0) | 2023.03.15 |
|---|---|
| [JavaScript] 자바스크립트로 가상키보드 구현하는 방법 !! (0) | 2023.03.12 |
| [JavaScript] 자바스크립트로 글자 나타나는 움직임 효과 내는 방법 !! (0) | 2023.03.10 |
| [JavaScript] 자바스크립트로 margin, padding 주는 방법 !! (style 주는 방법) (0) | 2023.03.08 |
| [JavaScript] 자바스크립트 join() 함수 사용하는 방법 !! (배열 연결하기) (0) | 2023.03.07 |
댓글