kandi background
Explore Kits

Build Candy Crush in TypeScript

by kandikits Updated: Oct 20, 2022


This kandi kit for Candy Crush (one of the most popular games), has been rewritten using the Phaser HTML5 game engine along with Typescript language. AngularJs is also used for creating game directives, so they can be easily included in the angular app.


Gulp is a streaming build system which can run tasks in sequence or parallel. Gulp-typescript is a plugin which allows you to convert your Typescript code into JavaScript. It can also serve as an alternative to TypeScript compiler if you don’t want all the features it provides (like support for external modules, rich IDE support). Gulp-concat is used to concatenate files together. Gulp-clean-css is used to remove comments from your CSS code.


The most important part of building a game like Candy Crush is to have a solid workflow. We have used TypeScript, Gulp and Webpack and built a fully-functional Candy Crush game. We'll be using TypeScript, Gulp and Webpack to build a fully-functional Candy Crush game. kandi kit provides you with a fully deployable Candy Crush app. Source code included so that you can customize it for your requirement.

Deployment Information

Candy Crush game created using this kit isadded in this section. The entire solution is available as a package to download from the source code repository.


For Windows OS,

  1. Download, extract and double-click kit installer file to install the kit. Ensure you extract the zip file before running it.
  2. When you're prompted during the installation of the kit, press Y to launch the app automatically.
  3. To run the app manually, press N when you're prompted and locate the zip file candy.zip
  4. Extract the zip file and navigate to the directory candy.
  5. Open the command prompt in the extracted directory candy and run the following commands one by one respectively: npm install; npm install -g gulp; start http://localhost:3000 && gulp start.


For other Operating System,

  1. Click here to install nodejs.
  2. Click here to download the repository.
  3. Extract the zip file and navigate to the directory candy.
  4. Open the terminal in the extracted directory candy.
  5. Run the following commands one by one respectively: npm install; npm install -g gulp; start http://localhost:3000 && gulp start.


Click on the button below to download the solution and follow the deployment instructions to begin set-up. This 1-click kit has all the required dependencies and resources you may need to build your Candy Crush App.

Troubleshooting

  1. While running batch file, if you encounter Windows protection alert, select More info --> Run anyway
  2. During kit installer, if you encounter Windows security alert, click Allow
  3. While executing 'start http://localhost:3000 && gulp start' command, if you encounter browser-sync issue, go to default-config.js file, which will be under node_modules\browser-sync\dist directory and set property open to false without any quotes.
  4. While running batch file, if you encounter npm not recognized error, re-run the batch file.
  5. If you face any issues while running the candy crush app, reduce the node version to 10.24.1

For a detailed tutorial on installing & executing the solution as well as learning resources including training & certification opportunities, please visit the OpenWeaver Community

Development Environment

Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

vscodeby microsoft

TypeScript star image 142184 Version:1.75.0

License: Permissive (MIT)

Visual Studio Code

Support
Quality
Security
License
Reuse

vscodeby microsoft

TypeScript star image 142184 Version:1.75.0 License: Permissive (MIT)

Visual Studio Code
Support
Quality
Security
License
Reuse

Runtime Environment

Node.js is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser.

nodeby nodejs

JavaScript star image 93138 Version:v18.14.0

License: Others (Non-SPDX)

Node.js JavaScript runtime :sparkles::turtle::rocket::sparkles:

Support
Quality
Security
License
Reuse

nodeby nodejs

JavaScript star image 93138 Version:v18.14.0 License: Others (Non-SPDX)

Node.js JavaScript runtime :sparkles::turtle::rocket::sparkles:
Support
Quality
Security
License
Reuse

JavaScript Libraries

The following libraries provide flexibility to automate slow, and redundant workflows efficiently.

gulp-typescriptby ivogabe

JavaScript star image 787 Version:v5.0.1

License: Permissive (MIT)

A TypeScript compiler for gulp with incremental compilation support.

Support
Quality
Security
License
Reuse

gulp-typescriptby ivogabe

JavaScript star image 787 Version:v5.0.1 License: Permissive (MIT)

A TypeScript compiler for gulp with incremental compilation support.
Support
Quality
Security
License
Reuse

gulpby gulpjs

JavaScript star image 32682 Version:4.0.2

License: Permissive (MIT)

A toolkit to automate & enhance your workflow

Support
Quality
Security
License
Reuse

gulpby gulpjs

JavaScript star image 32682 Version:4.0.2 License: Permissive (MIT)

A toolkit to automate & enhance your workflow
Support
Quality
Security
License
Reuse

gulp-concatby gulp-community

JavaScript star image 787 Version:2.6.1

License: Permissive (MIT)

Streaming concat middleware for gulp

Support
Quality
Security
License
Reuse

gulp-concatby gulp-community

JavaScript star image 787 Version:2.6.1 License: Permissive (MIT)

Streaming concat middleware for gulp
Support
Quality
Security
License
Reuse

gulp-clean-cssby scniro

JavaScript star image 634 Version:4.3.0

License: Permissive (MIT)

Minify css with clean-css.

Support
Quality
Security
License
Reuse

gulp-clean-cssby scniro

JavaScript star image 634 Version:4.3.0 License: Permissive (MIT)

Minify css with clean-css.
Support
Quality
Security
License
Reuse

Kit Solution Source

phaser-candy-crushby anjmao

TypeScript star image 42 Version:Current

License: Permissive (MIT)

Candy crush like game made with Phaser HTML5 game engine

Support
Quality
Security
License
Reuse

phaser-candy-crushby anjmao

TypeScript star image 42 Version:Current License: Permissive (MIT)

Candy crush like game made with Phaser HTML5 game engine
Support
Quality
Security
License
Reuse

Support

If you need help using this kit, you may reach us at the OpenWeaver Community.