Snake Game Using Cocos2d-x HTML5 - PART 1

Datetime:2016-08-23 04:30:31          Topic: Cocos2d-X  HTML5           Share

The purpose of this tutorial series is to learn how to create true cross platform 2d game

That works with the  same ( 80% - 90% ) source code on mobile web and desktop using Javascript .

And NOT using web browser wrappers components.

First is for the WEB then to win32 Desktop , iOS and android.

The framework is Cocos2d-x version 3.8.1.

The IDE is NetBeans for the web . you can learn why from my previous tutorial .

Lets start from the end and see the final result AKA the finished game , don't expect to see full blown game , remember we are going to learn only the principles ,

The SnakeJS:

http://meiry.github.io/SnakeJS-html5/publish/html5/

The SnakeJS source code:

https://github.com/meiry/SnakeJS-html5

As all programming stuff when first learned there is "Hello World++" project .

In GameDev there are several , for example build : flappy bird , Breakout or Snake.

For this tutorial i will choose Snake , as tribute to the old Nokia  9010.

1 . Create new JavaScript project with Cocos2d-x console

The syntax for creating new js project looks like this :

cocos new -p com.snakeJS.game -l js -d d:\dev\cpp\2d\cocos2d-x-3.8.1\cocos2d-x-3.8.1\Projects SnakeJS

2 . Create new HTML 5 project in NetBeans IDE name it "SnakeJS"

If you like to recall how to setup the project , please refer to this tutorial .

The directory structure should look like this :

I created this "SnakeJS" under NetBeansProjects directory

And the path structure is :

D:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\SnakeJS\public_html

it should look like this:

3. Now quickly copy the relevant files from the new project we create with cocos2d-x

console to the NetBeans new project under the

D:\dev\cpp\2d\cocos2d-x-3.8.1\NetBeansProjects\SnakeJS\ public_html\     folder.


In the Framework folder you should copy only the cocos2d-html5 folder and it sub folders

In NetBeans it should be look like this :

Press " Run Project "  (the green Play button)

Your Chrome should start with a new Tab loading the Cocos2d-x HTML5 starter project

We are ready to start programming our "SnakeJS" web game in the next post :

Snake Game Using  Cocos2d-x HTML5 -PART 2

Play the final SnakeJS game:

http://meiry.github.io/SnakeJS-html5/publish/html5/

The SnakeJS source code:

https://github.com/meiry/SnakeJS-html5





About List