Эта статья представляет собой руководство от 0 до 1, чтобы Сяобай также мог волшебным образом изменить и опубликовать свой собственный синтетический большой арбуз в Интернете!
P.S. Недавно запущенИнструмент для изменения изображения большого арбуза, эффективность увеличивается в десять раз!
Недавно неожиданно стала популярной игра под названием «Синтетический большой арбуз»! Кажется, что все слишком много едят дыни, эта маленькая игра очень популярна!
Конечно, сама игра очень интересная, а геймплей простой.Это комбинация тетриса, 2048 и Fruit Ninja для управления местонахождением фруктов.Те же два фрукта будут объединены в более крупный фрукт, а затем уничтожены. , и появится эффект всплеска.
Поиграв некоторое время, когда я увидел картинки, выложенные в кругу друзей, я больше не мог этого выносить и начал думать о том, как получить высокий балл. Для программистов самый простой способ — напрямую модифицировать программу.
Просто случайно задал Чжиху связанный с этим вопрос: «Есть ли исходный код для небольшой игры «Синтетический большой арбуз»?»
Тогда приступайте к работе!
Сначала я отправился на GitHub, чтобы найти исходный код, и обнаружил, что исходный код был выставлен на землю, затем я скачал копию исходного кода на локальный сервер и начал готовиться.
После просмотра исходного кода, если вы обнаружите, что это всего лишь изменение некоторых основных функций, не будьте слишком простыми!
Это кастомная бонусная версия моей магической модификации, которая проста и десять миллионов очков! Доступно для игры онлайн:dadaxigua.liyupi.com
Давайте создадим свой собственный волшебный модифицированный синтетический арбуз вместе!
В основном делится на следующие этапы:
- Загрузите исходный код и запустите его локально
- Практическая магическая модификация и принципиальный анализ
- выпуск онлайн
1. Загрузите исходный код и запустите его локально
Скачать исходный код
Сначала скачайте исходный код с GitHub (адрес в конце статьи):
После загрузки кода мы получаем такую структуру каталогов:
Как видите, вся директория с кодом не сложная и разработана на основе игрового движка cocos2d Нам нужно только понять несколько важных файлов:
- index.html, главная страница всего проекта
- project.js, код ядра проекта, игровая логика — все здесь
- settings.js, файл конфигурации проекта
- каталог res, в котором хранятся такие ресурсы, как изображения и аудио.
Давайте сначала попробуем запустить мини-игру локально.
работать локально
Если дважды щелкнуть прямоindex.html, невозможно запустить игру, что является проблемой «зависания на 99%», с которой сталкиваются многие студенты. Поскольку дважды щелкните файл веб-страницы напрямую, протокол доступаfile, вместоhttp, что приведет к тому, что некоторые ресурсы не смогут запрашивать и отсутствующие файлы.
Поэтому нам нужно построить веб-сервер локально для поддержкиhttpДоступ к протоколу.
Самый простой способ — использовать сервисный инструмент. Для использования требуется всего три шага, и завершенные шаги можно сразу пропустить:
-
Установить узел и npm
Node — это движок, который запускает код Js на стороне сервера; npm — это инструмент управления пакетами зависимостей, который может легко устанавливать инструменты и библиотеки кода.
Введите узел китайской сетиnodejs.cn/download/, под…Node.js, npm устанавливается автоматически.
После успешной установки введите командную строку cmd и введите команду, чтобы определить, прошла ли установка npm успешно:
npm -vЕсли номер версии выводится, установка прошла успешно:
-
Установите инструмент serve в одну строку:
npm i -g serve -
Войдите в каталог исходного кода (я здесь
daxigua), начать подачу:serveПосле успешного запуска откройте браузер, чтобы посетить
localhost:5000Вот и все!
Практическая магическая модификация и принцип
Перед волшебным изменением мы должны сначала распознать игровой процесс, а затем найти соответствующий файл в соответствии с содержимым, которое мы хотим изменить, а затем изменить его.
Процесс игры: щелчок мышью => падение фруктов => столкновение фруктов => подсчет очков => отображение очков
Вот несколько простых способов внести волшебные изменения, включая изменение игровых очков, замену игровых картинок, режим непобедимости, управление генерацией фруктов, синтез маленьких фруктов из больших фруктов и превращение фруктов в более Q-бомбы.
(Часть творчества исходит от UP GJhuxiao на станции B, стоящей на коленях перед большим парнем!)
1. Изменить счет
Получив исходный код, какой самый быстрый способ найти место для модификации?
При анализе игрового процесса обнаружено, что есть два способа изменить счет: изменить его на этапе подсчета очков или напрямую изменить счет, который будет отображаться в конце.
Затем просто просмотрите различные файлы в проекте и найдитеproject.jsЭто основной файл, который влияет на логику игры.
Тогда очень просто, прямо вproject.jsКод поиска в . Английское слово, соответствующее счету, — «score», а английское слово для добавления счета — «addScore», поэтому ищите, чтобы увидеть, сможете ли вы найти подсказки.
Конечно же, вскоре выяснилось, что счет определялсяdefault.scoreВ качестве статистических значений используются переменные, и есть такая строчка кода:
a.default.score += this.fruitNumber + 1
Очевидно, что «+1» участвует в подсчете очков, поэтому мне просто нужно изменить основание «1» на число, определенное мной самим~
// extraScore 可以自己改为任意值
a.default.score += this.fruitNumber + extraScore
Конечно, вы также можете позволить пользователю ввести его перед входом в игру! я здесьproject.jsДобавьте этот фрагмент кода в начало:
// 让用户输入分数加成
let extraScore;
let extraScoreStr = '';
// 输入有效数字才进入游戏
while (isNaN(extraScore)) {
extraScoreStr = prompt('请输入分数加成数字', '1').trim();
extraScore = parseInt(extraScoreStr);
}
Эффект следующий:
Конечно, этот способ играть в игры больше похож на круг, я надеюсь, что это не повлияет на общее удовольствие~
Таким образом, все переменные и конфигурации в коде теоретически могут поддерживать пользовательский ввод. Это достигается добавлением новой страницы меню, некоторые боссы уже сделали это, и эффект очень хороший, Ruisbai!
2. Сменить картинку
Смена картинок должна быть самой веселой волшебной переменой прямо сейчас! Я видел много интересных идей, синтезируя монеты станции B, синтезируя большую грудь, синтезируя xx и т. д.
А на самом деле принцип смены картинок очень прост!
прямо вresВ каталоге ресурсов найдите исходное изображение, а затем используйтето же имя, тот же формат, тот же размерКартинку можно заменить!
Я помог вам организовать таблицу замены изображений, чтобы повысить эффективность замены. Адрес выглядит следующим образом:
Материалы-заменители для Волшебно измененного арбуза:docs.QQ.com/sheet/DS0's 2…
3. Непобедимый режим
Непобедимый режим означает, что фрукты накапливаются до самого верха, за линией, и игра не закончится.
Поскольку игра закончится, должна быть логика, чтобы судить об окончании игры, то есть условное выражение.
Затем ищите «конец» (конец) в коде, и я нашел следующую строку логики суждения, и результат операцииtrueтогда игра окончена, ибоfalseзатем продолжить.
Здесь UP GJhuxiao на станции B предлагает очень хорошую идею, добавляя условное суждение вместо изменения исходной логики суждения, что значительно облегчает изменение для всех!
4. Контролируйте генерацию фруктов
Можете ли вы контролировать, какой следующий фрукт? Например, каждый раз появляется большой арбуз.
Конечно, та же идея, сначала найдите, где в коде логика генерации фруктов. Выполняя поиск по ключевым словам, таким как «фрукты» и «создать», я нашел этот код:
Функция этого кода состоит в том, чтобы выбрать следующий фрукт на основе текущего фрукта.
Логика выглядит сложной, но на самом деле генерация первых 5 фруктов фиксирована, как и в туториале для новичков, нельзя сразу давать большие фрукты в начале!
При генерации первого плода (сcreateFruitCountСтатистика), начните случайным образом генерировать фрукты.
Каждому фрукту соответствует числовой порядковый номер (нижний индекс), от маленького до большого, от 0 до 9, от винограда до арбуза. Так сначала было дваждыcreateOneFruit(0), то есть генерируются два винограда, за которыми следует случайная генерация винограда (0) в помидоры (5).
Так что, если вы хотите сгенерировать первый плод?
Первый фрукт - виноград, соответствующий порядковому номеру 0, затем ищите напрямуюcreateOneFruit(0)Этого не будет!
Найдите соответствующий код напрямую, вы можете изменить 0 на другие числа ~
5. Большие фрукты для синтеза маленьких фруктов
Сочетание больших фруктов с маленькими звучит очень интересно, то есть вы можете играть в игру «вверх ногами», два арбуза объединяются в кокосы, и, наконец, виноград объединяется, чтобы выиграть! ✌️
Если под расширением фруктов понимать «апгрейд», то, грубо говоря, это обратный порядок апгрейдов фруктов. Код здесь не очень хорошо расположен, в основном, чтобы сначала найти логику синтеза фруктов, которую можно искать по граничным значениям (например, LevelUpЧтобы найти следующий код, измените «+1» на «-1»!
Каждый раз, когда фрукты объединяются, улучшение меняется на понижение.
Конечно, здесь должна быть проблема только с изменением UP GJhuxiao на станции B также допустил небольшую ошибку, то есть не обработал граничное значение.
Изначально при синтезе большого арбуза должна была быть особая логика, например мигающие спецэффекты. После изменения порядка мы хотим изменить граничное значение с 9 на 0. В то же время не забудьте изменить исходный сгенерированный фрукт, это должен быть большой арбуз, а не маленькая виноградина!
6. Сделайте фрукты более Q-bounce
Фрукты теперь не кажутся эластичными, как они могут быть такими же эластичными, как фруктовые, сочные конфеты Wangzai QQ?
Это связано с модификацией уровня физического движка.Поскольку я не знаком с cocos2d, ниже все еще реализация UP GJhuxiao на станции B.
В функции, которая генерирует плод, вы можете увидетьcc.PhysicsCircleCollider, который представляет собой физический движок, управляющий поведением падающего фрукта.
Так как вся игра разработана на основе cocos2d, мы можем посмотреть в официальном документе API, какие параметры у физического движка, и быстро найти коэффициент эластичности:
Затем вы можете изменить параметры физического движка, которые здесь установлены на 0,9.
Не смотрите на небольшие изменения значения, после установки 0.9 фрукт уже может летать. Вы можете заставить его парить, если хотите!
Не забудьте включить режим непобедимости, иначе будет GameOver!
Вы также можете посмотреть, какие еще параметры есть у cocos2d, попробуйте изменить их, возможно, вы найдете новые идеи и сюрпризы~
выпуск онлайн
Вопрос, который волнует большинство студентов, заключается в том, как опубликовать код в Интернете, чтобы другие могли получить к нему доступ после локального изменения кода?
Вот два самых простых способа использования «Tencent Cloud Static Website Hosting» или «Vercel». Вам не нужно покупать доменное имя или сервер!
А если у вас небольшое количество развлечений и пользователей, свободного места вполне хватит!
1. Хостинг статического веб-сайта Tencent Cloud
Используйте хостинг статического веб-сайта Tencent Cloud, сервер полностью находится в Китае и ускорение CDN (распределение статического контента), пусть ваш веб-сайт летает~
Шаги по использованию также очень просты.
Сначала войдите в облачную базовую консоль Tencent Cloud, адрес:cloud.Tencent.com/product/ Я также:
Нажмите «Создать сейчас», чтобы активировать облачную среду:
Нажмите, чтобы активировать сейчас, выпейте ☕️ и подождите некоторое время, чтобы завершить создание.
После завершения создания перейдите на страницу подсказки и нажмите «Пуск», чтобы инициализировать службу статического веб-сайта.
Теперь мы можем использовать услугу статического веб-сайта, предоставляемую облачной разработкой, которую можно загрузить через интерфейс или использоватьcloudbaseЗагрузка командной строки. Последний рекомендуется, и он более эффективен!
Сначала установитеcloudbaseИнструменты командной строки:
npm install -g @cloudbase/cli
Выполните команду входа:
cloudbase login
Подтвердите авторизацию на всплывающей странице:
Перейдите на страницу просмотра активированной облачной среды и скопируйте только что созданный идентификатор облачной среды:
Далее, вindex.htmlв каталоге (у меняdaxigua),воплощать в жизньcloudbaseизdeployКоманда публикует все файлы сайта в каталоге:
cd daxigua
cloudbase hosting:deploy . -e <EnvID>
здесь<EnvID>Для замены идентификатором облачной среды, который вы только что скопировали!
Посмотрите следующие результаты, даже если они будут успешными, нажмите на ссылку, чтобы получить доступ и поделиться!
2. Vercel
Vercel — это бесплатная платформа для размещения веб-сайтов, которая может помочь нам развернуть веб-сайт, сгенерировать короткий URL-адрес, к которому можно получить доступ, а также может привязаться к купленному нами доменному имени.
Сначала установите Vercel из командной строки с помощью команды npm:
npm install -g vercel
После завершения установки введитеindex.htmlкаталог (у меня даксигуа), используйтеvercelВеб-сайт выпуска команды:
cd daxigua
vercel --prod
Затем вам будет предложено ввести некоторые параметры, такие как имя проекта, изменение конфигурации и т. д., просто нажмите Enter до конца~
После успешного выпуска вы получите URL-адрес, откроете его, сможете увидеть игру и поделиться URL-адресом с другими!
Наконец
В этой небольшой игре мы можем увидеть все виды причудливых и творческих идей.Помимо веселья, мы также можем получить некоторые знания в области программирования.Почему бы не сделать это?
К сожалению, из-за работы у меня нет времени заниматься другими своими идеями, такими как фруктовый взрыв, фруктовая осада, антигравитация 😢
Если у вас есть другие хорошие идеи, дайте мне знать в комментариях!
Весь приведенный выше код и документация опубликованы на моем GitHub.