> 웹 프론트엔드 > JS 튜토리얼 > 자동 점프 공룡 스크립트를 만드는 여정

자동 점프 공룡 스크립트를 만드는 여정

Susan Sarandon
풀어 주다: 2024-11-04 17:42:02
원래의
741명이 탐색했습니다.

The Journey of Creating an Auto-Jump Dino Script

잠이 안 왔어요. 어쩌면 아까 마셨던 커피 세 잔 때문이었을 수도 있고, 아니면 생각이 복잡해서였을 수도 있습니다. 그럼에도 불구하고 나는 안절부절 못하고 표류할 수 없다는 것을 깨달았습니다. 불면증과 싸우는 대신 코딩을 하기로 결정했습니다. 그리고 Chrome 오프라인 게임에서 공룡이 저절로 점프하게 만드는 스크립트를 만드는 것보다 그 에너지를 소비하는 더 좋은 방법이 있을까요?

이것은 작은 아이디어가 어떻게 몇 시간의 조정과 테스트를 거쳐 궁극적으로 T-Rex의 자동 점프 시스템이 완벽하게 작동하게 되었는지에 대한 이야기입니다.

시작: 간단한 아이디어

처음에는 가장 기본적인 개념부터 시작했어요. 나는 장애물이 범위 내에 있을 때마다 공룡이 자동으로 점프하기를 원했습니다. 그 당시에는 도전이 간단해 보였습니다. 약간의 생각 끝에 간단한 스크립트를 작성했습니다.

// Auto jump function
function autoJump() {
  const checkObstacle = setInterval(() => {
    const tRex = Runner.instance_.tRex;

    // Check if an obstacle is near
    const obstacles = Runner.instance_.horizon.obstacles;

    if (obstacles.length > 0) {
      const obstacle = obstacles[0];

      // If the obstacle is close and within jumpable range, make the Dino jump
      if (obstacle.xPos < 70 && obstacle.xPos > 20 && !tRex.jumping) {
        tRex.startJump();
      }
    }
  }, 10); // Check every 10ms
}

// Start auto jump
autoJump();
로그인 후 복사

이 첫 번째 버전으로 작업이 완료되었습니다. 공룡은 장애물을 감지하고 장애물에 접근할 때마다 자동으로 점프합니다. 그러나 아직 개선할 부분이 많았습니다. 로봇처럼 느껴지고 제한적이었습니다. 점프할 수 있었지만 웅크리거나 게임 속도가 공룡의 반응에 어떤 영향을 미치는지 고려하지 않았습니다. 좀 더 적응력 있고 역동적인 것을 원했습니다.

진화: 적응형 자동 점프 및 웅크리기

다음 몇 시간 동안 코드를 다듬고 게임 속도에 따른 적응형 점프와 같은 기능을 추가하고 익룡이 날아갈 때 웅크리는 메커니즘을 통합했습니다. 그 결과 실제 게임과 훨씬 더 조화롭게 느껴지는 스크립트가 탄생했습니다. 최종 버전에서는 공룡이 고정된 거리에 따라 반응할 뿐만 아니라 게임 자체의 속도에 맞춰 반응할 수 있게 되었습니다.

제가 생각해낸 내용은 다음과 같습니다.

// Create the button to toggle auto-jump
const toggleButton = createToggleButton();
document.body.appendChild(toggleButton);

let autoJumpActive = false; // Auto-jump initially inactive
let autoJumpInterval = null; // Store interval ID
let jumpCount = 0; // Count the number of jumps
let obstacleCount = 0; // Count the number of obstacles encountered
let isCrouching = false; // Track crouch state

// Function to create the toggle button
function createToggleButton() {
  const button = document.createElement('button');
  button.innerText = 'Activate Auto-Jump';
  styleToggleButton(button);
  button.addEventListener('click', toggleAutoJump);
  return button;
}

// Function to style the toggle button
function styleToggleButton(button) {
  button.style.position = 'fixed';
  button.style.top = '10px';
  button.style.left = '10px';
  button.style.padding = '10px';
  button.style.zIndex = '1000';
  button.style.backgroundColor = '#4CAF50';
  button.style.color = '#fff';
  button.style.border = 'none';
  button.style.cursor = 'pointer';
}

// Function to simulate a key press
function simulateKeyPress(keyCode, key) {
  const event = new KeyboardEvent('keydown', {
    keyCode: keyCode,
    code: key,
    key: key,
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event);
}

// Function to simulate a key release
function simulateKeyRelease(keyCode, key) {
  const event = new KeyboardEvent('keyup', {
    keyCode: keyCode,
    code: key,
    key: key,
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event);
}

// Function to calculate adaptive distances for jumping and crouching based on speed
function calculateAdaptiveDistance(baseDistance) {
  const speed = Runner.instance_.currentSpeed;
  return baseDistance + speed * 3; // Adjust the multiplier as needed for more precision
}

// Function to start auto-jumping and crouching
function startAutoJump() {
  autoJumpInterval = setInterval(() => {
    const tRex = Runner.instance_.tRex;
    const obstacles = Runner.instance_.horizon.obstacles;
    const speed = Runner.instance_.currentSpeed; // Get the current speed of the game

    if (obstacles.length > 0) {
      const obstacle = obstacles[0];
      const distanceToObstacle = obstacle.xPos - tRex.xPos; // Distance from Dino to the obstacle

      // Dynamically calculate the adaptive jump and crouch distances based on game speed
      const jumpDistance = calculateAdaptiveDistance(100); // Base distance is 100, adjusted by speed
      const crouchDistance = calculateAdaptiveDistance(50); // Base crouch distance is 50
      const safeDistance = 40; // Minimum safe distance to avoid jumping too early

      // Check if the Dino needs to jump or crouch
      if (distanceToObstacle < jumpDistance && distanceToObstacle > safeDistance) {
        if (!tRex.jumping && !isCrouching) { // Ensure Dino is not crouching or jumping
          jumpCount++; // Increment jump count
          simulateKeyPress(32, ' '); // Simulate jump (spacebar)
        }
      } else if (distanceToObstacle <= crouchDistance && distanceToObstacle > safeDistance && !tRex.jumping) {
        // Only crouch if the Dino is not jumping
        simulateKeyPress(40, 'ArrowDown'); // Simulate crouch (down arrow)
        isCrouching = true; // Set crouch state to true
      } else if (obstacle.typeConfig.type === 'PTERODACTYL' && obstacle.yPos < 70) {
        // Crouch if the obstacle is a Pterodactyl flying high
        simulateKeyPress(40, 'ArrowDown'); // Simulate crouch (down arrow)
        isCrouching = true; // Set crouch state to true
      }

      // Release crouch when the obstacle is passed (Dino's xPos is greater than obstacle's xPos)
      if (tRex.xPos > obstacle.xPos && isCrouching) {
        simulateKeyRelease(40, 'ArrowDown'); // Release crouch (down arrow)
        isCrouching = false; // Reset crouch state
      }
    }

    // Update obstacle count
    obstacleCount = Runner.instance_.horizon.obstacles.length;

  }, 50); // Reduced interval time to 50ms for more frequent checks
}

// Function to stop auto-jumping
function stopAutoJump() {
  clearInterval(autoJumpInterval);
  autoJumpActive = false; // Reset auto-jump state
  toggleButton.innerText = 'Activate Auto-Jump';
  toggleButton.style.backgroundColor = '#4CAF50';
}

// Function to toggle auto-jump
function toggleAutoJump() {
  if (autoJumpActive) {
    stopAutoJump();
  } else {
    startAutoJump();
    toggleButton.innerText = 'Deactivate Auto-Jump';
    toggleButton.style.backgroundColor = '#f44336';
  }
  autoJumpActive = !autoJumpActive; // Toggle the state
}

// Detecting game over
const originalGameOver = Runner.prototype.gameOver;
Runner.prototype.gameOver = function() {
  stopAutoJump(); // Stop auto-jumping on game over
  originalGameOver.apply(this, arguments); // Call the original game over function
}

// Detecting when the game restarts
const originalStartGame = Runner.prototype.startGame;
Runner.prototype.startGame = function() {
  originalStartGame.apply(this, arguments);
  if (autoJumpActive) {
    startAutoJump(); // Restart auto-jump on game restart
  }
}
로그인 후 복사

코딩 여정에 대한 고찰

잠 못 이루던 밤부터 완전한 기능을 갖춘 자동 점프 스크립트를 만들기까지의 여정은 재미있으면서도 도전적이었습니다. 단순한 아이디어로 시작된 것이 훨씬 더 복잡한 것으로 발전하여 세부 사항에 대한 주의, 적응성 및 실험 의지가 필요했습니다. 각 반복을 통해 스크립트는 단순한 추가 기능이 아닌 게임의 통합된 부분처럼 느껴지게 되었습니다.

코딩의 아름다움은 아이디어에서 시작하여 끈기와 창의성을 통해 원래 비전을 뛰어넘는 결과를 낳는다는 것입니다. 때로는 커피를 너무 많이 마시는 것으로 모든 것이 시작되는 경우도 있습니다!

위 내용은 자동 점프 공룡 스크립트를 만드는 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿