恐龙游戏破解 - Javascript

简介

你是否曾经在Chrome浏览器断网时玩过恐龙游戏？如果是，那么你一定知道它有多么无聊。那么，为什么不用你的聪明才智让它变得更有趣呢？在这个教程中，你将学习如何使用Javascript破解这个游戏，并将它变成一个更加有趣的游戏。

准备工作

在开始之前，你需要做一些准备工作：

1. 一台安装了Chrome浏览器的电脑
2. 编辑器：你可以使用你所喜欢的编辑器，但本教程将使用VS Code。
3. 了解基础的Javascript和HTML

步骤

步骤1：打开恐龙游戏

打开Chrome浏览器，断开网络连接，访问chrome://dino/，就会看到恐龙游戏的开始界面。开始游戏并保持窗口打开。

步骤2：分析网页

让我们分析一下游戏所在的页面。通过Chrome浏览器的开发者工具，我们可以看到恐龙游戏的DOM结构：

<div id="t" class="offline">You are offline.</div>
<div id="error-info-container">
  <a href="#" id="error-info">Run network service</a>
</div>
<div id="main-frame-error"></div>
<div id="main-frame">
  <!-- The canvas the game is drawn on -->
  <canvas tabindex="0" style="width: 100%;"></canvas>
</div>

可以发现，游戏是运行在一个canvas标签中的。

步骤3：修改游戏

我们需要从恐龙游戏中获取以下信息：

1. Dinosaur实例的原型
2. TrexRex实例的原型
3. GameOverPanel实例的原型

我们可以通过以下代码来获取它们：

const obstacles = Runner.prototype
const tRex = Trex.prototype
const gameOver = Runner.instance_.crashed

现在，我们可以创建并使用一个override函数，它接受三个参数：一个对象，函数名和一个函数。该函数将检查Object是否包含指定名称的函数，并在找到该函数时使用传入的函数覆盖它。

function override(object, methodName, callback) {
  object[methodName] = callback(object[methodName])
}

现在，我们可以使用override函数来覆盖Dinosaur和TrexRex实例的方法。

// 创建一个类，用于覆盖原型中的方法
class Override {
  static dinosaur(old) {
    return function () {
      const result = old.apply(this, arguments)
      // 这里可以做一些修改
      return result
    }
  }

  static trex(old) {
    return function () {
      const result = old.apply(this, arguments)
      // 这里可以做一些修改
      return result
    }
  }
}

// 使用 override 函数来覆盖原始方法
override(obstacles, 'update', Override.dinosaur)
override(tRex, 'startJump', Override.trex)
override(gameOver, 'prototype', function (old) {
  const result = old.apply(this, arguments)
  // 在这里可以做更多的修改
  return result
})

现在，我们可以使用以下代码修改游戏，让它更有趣。

// 隐藏积分板
document.getElementsByClassName('icon-offline')[0].style.visibility = 'hidden'

// 将恐龙的速度提高到5
Runner.instance_.setSpeed(5)

// 将恐龙颜色更改为黑色
tRex.config.FILL_COLOR = '#000'

// 更改恐龙跳跃的速度和高度
tRex.config.INIITAL_JUMP_VELOCITY = 30
tRex.config.JUMP_VELOCITY = 45

// 实现双重跳跃
override(tRex, 'jump', function (old) {
  const result = old.apply(this, arguments)
  if (!Runner.instance_.collision && !tRex.jumping) tRex.startJump(tRex.config.QUICK_DROP_DURATION)
  return result
})

// 将障碍物的数量增加到3
obstacles.config.MAX_OBSTACLE_DUPLICATION = 3

// 将障碍物智能地分布在屏幕上
override(obstacles, 'getRandomType', function (old) {
  const types = old.apply(this, arguments)
  const weightedTypes = [
    { type: types[0], weight: 0.6 }, // cactus
    { type: types[1], weight: 0.3 }, // pterodactyl
    { type: 'Lava', weight: 0.1 } // lava
  ]
  const randomNumber = Math.random()
  let currentWeight = 0
  for (const weightedType of weightedTypes) {
    currentWeight += weightedType.weight
    if (randomNumber <= currentWeight) return weightedType.type
  }
})

// 修改Game Over界面
const gameOverPanel = gameOver.prototype
const oldActivate = gameOverPanel.activate
gameOverPanel.activate = function () {
  oldActivate.call(this, ...arguments)
  this.gameOverIcon = document.createElement('div')
  this.gameOverIcon.className = 'gameover-emoji'
  this.gameOverIcon.innerText = '😭'
  this.gameOverIcon.style.fontSize = '10rem'
  this.gameOverIcon.style.position = 'absolute'
  this.gameOverIcon.style.top = '25%'
  this.gameOverIcon.style.left = '50%'
  this.gameOverIcon.style.transform = 'translate(-50%, -50%)'
  this.containerEl.appendChild(this.gameOverIcon)
}

// 添加卡通音效
const audio = new Audio('https://raw.githubusercontent.com/girliemac/dino-sounds/master/sounds/1.mp3')
tRex.playSound = function (soundFx) {
  soundFx === this.soundFx.BUTTON_PRESS ? audio.play() : this.playingSong = false
}

总结

在本教程中，你学习了如何在Chrome浏览器的恐龙游戏中添加一些有趣的效果。通过分析DOM结构，获取恐龙，障碍物和结束界面实例的原型，并使用override函数覆盖方法，你可以使用自己的聪明才智打造一个更有趣的游戏！