Snake Game Using Cocos2d-x HTML5 - PART 1

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