AI game creator

Click here for free DL of the app version that can save data.

No:38430

153

←

Prev Next

→

모기도 생명!
Developer User17053｜Date and time 24/1/24 21:51:14
Build time 19.404 sec｜Game capacity 3.289KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>모기도 생명!</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
  </body>
  <script>
    // 게임 요소들을 담을 캔버스 요소를 가져온다.
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// 게임 상태 변수들을 초기화한다.
    let playerX = canvas.width / 2; // 플레이어의 초기 위치 (가운데)
    let playerY = canvas.height - 50; // 플레이어의 초기 위치 (아래)
    let mosquitoX = Math.random() * (canvas.width - 50); // 모기의 초기 위치 (랜덤)
    let mosquitoY = 0; // 모기의 초기 위치 (가장 위)
    let score = 0; // 점수
    let isGameOver = false; // 게임 종료 여부

// 이벤트 리스너를 추가하여 스마트폰 터치를 입력으로 받는다.
    canvas.addEventListener('touchstart', handleTouchStart);
    canvas.addEventListener('touchmove', handleTouchMove);

// 터치 시작 위치를 저장하는 변수
    let touchStartX = 0;
    let touchStartY = 0;

// 터치 이벤트 처리 함수
    function handleTouchStart(event) {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
      event.preventDefault();
    }

function handleTouchMove(event) {
      if (isGameOver) {
        return;
      }
      
      const touchX = event.touches[0].clientX;
      const touchY = event.touches[0].clientY;

// 터치한 방향에 따라 플레이어를 이동한다.
      if (touchX > touchStartX + 10) {
        playerX += 5; // 오른쪽으로 이동
      } else if (touchX < touchStartX - 10) {
        playerX -= 5; // 왼쪽으로 이동
      }

touchStartX = touchX;
      touchStartY = touchY;

event.preventDefault();
    }

// 게임 루프 함수
    function gameLoop() {
      // 이전 프레임 지우기
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// 플레이어 그리기
      ctx.fillStyle = 'red';
      ctx.fillRect(playerX, playerY, 50, 50);

// 모기 그리기
      ctx.fillStyle = 'black';
      ctx.fillRect(mosquitoX, mosquitoY, 50, 50);

// 플레이어와 모기의 충돌 감지
      if (
        playerX < mosquitoX + 50 &&
        playerX + 50 > mosquitoX &&
        playerY < mosquitoY + 50 &&
        playerY + 50 > mosquitoY
      ) {
        // 충돌 시 점수 증가 및 모기의 위치 초기화
        score++;
        mosquitoX = Math.random() * (canvas.width - 50);
        mosquitoY = 0;
      }

// 점수 그리기
      ctx.fillStyle = 'white';
      ctx.font = '24px Arial';
      ctx.fillText('점수: ' + score, 10, 30);

// 모기 이동
      mosquitoY += 5;

// 모기가 화면 밖으로 나가면 게임 종료
      if (mosquitoY > canvas.height) {
        isGameOver = true;
        ctx.fillText('게임 종료', canvas.width / 2 - 60, canvas.height / 2);
        ctx.fillText('최종 점수: ' + score, canvas.width / 2 - 80, canvas.height / 2 + 30);
      } else {
        // 게임이 종료되지 않았으면 다음 프레임을 그린다.
        requestAnimationFrame(gameLoop);
      }
    }

// 게임 루프 시작
    gameLoop();
  </script>
</html>