How to make a simple game with Cocos2d-html5(Part 1)

How to make a simple game with Cocos2d-html5(Part 1)
0.0 0


Note from Ryeeeeee:

This tutorial series is for beginners and will walk you through the process of making a simple game with cocos2d-html5. Don’t worry if you’ve never used cocos2d-html5 before. And you don’t need any prior experience, as I’ll walk through the process step by step.

So let’s get started!


Cocos2d-html5 is an open-source web 2D game framework, released under MIT License. Its a HTML5 version of Cocos2d-x project. On top of the framework provided by Cocos2d-html5, games can be written in Javascript, using API that is completely compatible with that Cocos2d-x javascript binding. Cocos2d-html5 project can be easily run on browsers which supports HTML5. Cocos2d-html5 also supports running game code in “Cocos2d javascript binding” without or with little modification.

Setting Up Development Environment

Download and Install Cocos2d-html5

You can download Cocos2d-html5 from:

Download Cocos2d-html5 and unzip it, you will get the following files:

Download and Install WebStorm

You can download WebStorm from:

WebStorm is a powerful and intelligent IDE that gives you the best coding assistance for Javascript, HTML and CSS.

Download and Install Google Chrome

You can download Google Chrome from:

Google Chrome supports upcoming HTML5 standard and related specifications well.

Next, you should install JetBrains IDE Support for Google Chrome. Open in Google Chrome, and install the plugin.

Hello World

By tradition, We create a “Hello World” project with Cocos2d-html5.

Open WebStorm, select “Create New Project from Existing Files”:

In the new window, select “Source files are in a local directory, no Web server is yet configured”:

In the new window, select the directory that you unzip Cocos2d-html5 in. And Check “Project Root”. Then click “Finish”:

Now, we can see a directory named “HelloHTML5World” in left side. This is the “Hello World” program that Cocos2d-html5 provides.

Next, we open “index.html” and move mouse to the top left corner. Select Google Chrome and the “Hello World” program will be open in Google Chrome.

And if succeed, you will see this:

html5-struct.jpeg (59.5 KB)

jbplugin.jpeg (666.2 KB)

helloworld.jpeg (208.0 KB)

createnewproject.jpeg (205.7 KB)

choosescenario.jpeg (318.5 KB)

choosedirectory.jpeg (281.1 KB)

helloHTML5world.jpeg (102.7 KB)

openinchrome.jpeg (310.2 KB)

YUYE's Game Tutorials(What type of the game tutorial do you want to learn)
YUYE'Tutorials(What kind of the tutorial do you want to learn and we'll make it for you)

Hi, is this the same tutorial that’s on the wiki/documents page?