Three.js Revisited — напишите минималистскую игру Jump Jump

игра three.js
Three.js Revisited — напишите минималистскую игру Jump Jump

Недавно, во время периода отставки, я почувствовал, что нельзя тратить много времени впустую, поэтому я попытался подражать WeChat и написал минималистскую версию игры.

Так насколько же проста эта игра?Это почти следующий уровень.

预览1
预览2
预览3

Адрес предварительного просмотра:Screwknot.GitHub.IO/три JS — отвратительно...  

Адрес источника:GitHub.com/screwknot/dayhou…

Так как это первый раз, когда я пытаюсь написать игру, я не знаю, правильная ли это процедура или нет. Просто смотрите и играйте. Не относитесь к этому слишком серьезно. Не рекомендуется предварительно просматривать ее на мобильный телефон Яма еще не засыпана.

Далее идет процесс реализации

Анализ игры

Сначала проанализируйте, какие элементы нужны такой игре.

  1. Основные элементы Three.js: сцена, освещение, камера
  2. блок за блоком
  3. тот, кто танцует, или игрок
  4. над

игровой процесс

  1. Первоначально сцена, сцена имееттот, кто танцуети 2 кубика
  2. Нажмите мышью, чтобы сохранить значение энергии
  3. отпустите мышь,тот, кто танцуетВыпрыгивайте в зависимости от значения энергии и направления второго блока.
  4. тот, кто танцуетКогда он упадет на верхнюю плоскость блока, судите об успешном или неудачном прыжке в зависимости от положения
  5. После успеха перейдите к следующему шагу.Если вы потерпите неудачу, вы будете выполнять различные методы падения в зависимости от положения.

Что касается коллизии игры, мы должны рассмотреть эти ситуации

  1. Падает посреди двух блоков

掉落在两个方块中央
2. Падение на верхний левый край блока для прыжков.

掉落在起跳方块左边上沿
3. Опуститься на нижний край следующего блока слева

掉落在左边下一个方块下沿
4. Бросьте на верхний край следующего блока слева

掉落在左边下一个方块上
5. Падение на верхний правый край блока для прыжков.

掉落在起跳方块右边上沿
6. Бросьте на нижний край следующего блока справа

掉落在右边下一个方块下沿
7. Бросьте на верхний край следующего блока справа

掉落在右边下一个方块上沿

код

Заинтересованы в проблемах с переездомgithub

основная структура

var Game = function () {
  ...
}
Game.prototype = {
  init:  // 初始化
  restart: // 重新开始
  addSuccessFn:  // 成功进入下一步，执行外部函数, 用于更新分数
  addFailedFn: // 游戏失败, 执行外部函数, 用于显示失败弹窗
  _createJumper: // 创建 会跳的那个
  _createCube: // 创建方块
  _setLight: // Three.js设置光照
  _setCamera: // Three.js设置相机
  _setRenderer: // Three.js设置渲染器
  _render: // Three.js 执行渲染
  _createHelpers: // Three.js场景辅助工具
  _checkUserAgent: // 检测是否是移动端
  _handleWindowResize: // 窗口缩放绑定函数
  _handleMousedown: // 鼠标按下绑定函数
  _handleMouseup: // 鼠标松开绑定函数
  _fallingRotate: // 会跳的那个 摔落动画
  _falling: // 会跳的那个 摔落
  _checkInCube: // 判断落点位置
  _updateCameraPos: // 更新相机坐标参数
  _updateCamera: // 更新相机
  _setSize:   // 设置画布尺寸
}

передача

var game = new Game()
game.init()
game.addSuccessFn(success)
game.addFailedFn(failed)

...

// 游戏重新开始，执行函数
function restart () {
	...
}
// 游戏失败执行函数
function failed(){
	...
}
// 游戏成功，更新分数
function success (score) {
	...
}

Наконец, если есть что-то интересное, связанное с js, добро пожаловать в общение

Вот и все, добро пожаловать, звезда.

Категории