Snake Game Using Cocos2d-x HTML5 - PART 2

Datetime:2016-08-23 04:30:27         Topic: HTML5  Cocos2d-X          Share        Original >>
Here to See The Original Article!!!

To keep the tutorial short as possible , we will not learn the Cocos2d-x engine components .

i planing to write about the engine infrastructure and also its API's in the Future.

Cocos2d-x is huge engine so don't expect to know all , but you will learn enough to get started.

1 . Change the cocos2d-x-3.8.1\NetBeansProjects\SnakeJS\public_html\ index.html file

So the game canvas will be in proportional size and not stretched all over .



<!DOCTYPE html>
    <meta charset="utf-8">
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="viewport" content="width=480, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
<body style="text-align: center; padding:0; margin: 0; background: #FFFFFF;">
<script src="res/loading.js"></script>
<div style="display:inline-block;width:auto; margin: 0 auto; background: #000; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
    <canvas id="gameCanvas" width="800" height="450"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>

2.  Open the file  \NetBeansProjects\SnakeJS\public_html\src\ app.js 

this file will be the game logic starting point .

the file start our main game Scene and Layer , the Layer will hold our game Sprites

they all have Parent child hierarchy relationship to read more about it here:  

lts clean the file from the starter code the console generated for us :


var SnakeJSGameLayer = cc.Layer.extend({
    ctor:function () {
       var size = cc.winSize;

        return true;

var SnakeJSScene = cc.Scene.extend({
    onEnter:function () {
        var layer = new HelloWorldLayer();

3.  Do not rush to test your code yet,first we need to change the file: NetBeansProjects\SnakeJS\public_html\ main.js

Notice we changed the 

SnakeJSScene line 13 and  SnakeJSGameLayer line 1  variables


NetBeansProjects\SnakeJS\public_html\ main.js = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it

    // Pass true to enable retina display, disabled by default to improve performance
    // Adjust viewport meta
    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    // The game will be resized when browser size change
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new SnakeJSScene());
    }, this);

The change is in line 15 , the main.js is our game initializator/ bootstrapper/ dispatcher class,

It responsible to how the screen /view size will be and which pre game configuration to set and more

None game logic related stuff .

Now go ahead and press the green play button in NetBeans and see what you got.

Should look like this :

Yep , empty Scene.

4. the game resources are configured in special file called : SnakeJS\public_html\src\ resource.js

it contains the image names and paths:

var res = {
    snakecell_png : "res/snakecell.png",
    snakefood_png : "res/snakefood.png",
    blank_png : "res/blank.png"

var g_resources = [];
for (var i in res) {

We are ready to start programming our "SnakeJS" game logic in the next tutorial :

Snake Game Using Cocos2d-x HTML5  - PART 3

Play the final SnakeJS game

The SnakeJS source code:


Put your ads here, just $200 per month.