A super simple pinball game made with CocosCreator and just a few lines of code. This prototype contains no special effects, just the bare bone minimum. Perfect for new CocosCreator users.
This game uses mostly the physics component from CocosCreator. Which makes it pretty easy to create complex physics bodies and play with their properties. Only the camera component and the enemy prefab use scripts, and in this case just a few lines of code.

Download the project and examine the node structure and components.

Setup

We simply set the scene up by drag and drop items from the asset library to the scene. We create a script called gameController.js which we attach to the canvas and act as main script in this game.

Physics

First we need to enable the physics engine with a script. We add this lines to the gameController.js file inside the onLoad() function.

onLoad: function () { 
var physicsManager = cc.director.getPhysicsManager();     
physicsManager.enabled = true; //DEBUG PHYSICS     
physicsManager.debugDrawFlags = cc.PhysicsManager.DrawBits.e_aabbBit
// cc.PhysicsManager.DrawBits.e_pairBit |        
// cc.PhysicsManager.DrawBits.e_centerOfMassBit | cc.PhysicsManager.DrawBits.e_jointBit | cc.PhysicsManager.DrawBits.e_shapeBit; }

Once the physics engine is enabled we can start to add physics bodies to sprites, add theme where necessary.

Controls

To control the flippers on the left and on the right side we need to assign them to a script. We can do that by adding properties to our gameController.js script.

properties: {         
 flipperLeft:cc.Node,         
 flipperRight:cc.Node     
},

Once we have assigned the sprites to the script accordingly we can access and manipulate them via script now. We simply change the rotation of the sprite once we get a keyboard input-down or input-up event.

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, 
  function(){ 
               this.flipperLeft.rotation = -20; 
               this.flipperRight.rotation = 20;}, this); 

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, 
 function(){ 
               this.flipperLeft.rotation = 20;
               this.flipperRight.rotation = -20;}, this);

Enemies

The last thing to add are the enemies. We create first a prefab of a simple enemy sprite with a box collider and a script called enemyScript.js attached to it. Just drag a node back into the file explorer to create a prefab.
The script enemyScript.js checks for any collision. If there is a collision detected the node will destroy itself.

onBeginContact: function (contact, selfCollider, otherCollider) 
                { this.node.destroy(); }

Camera

A camera is essential in a physics driven world. We need to add a camera component to the main level node as well as a script to control this camera component. We need a target to follow, just add a new property to the script called target. Once we have assigned a target, we just follow this node within a min and max value.

cc.Class({     
extends: cc.Component,     
  properties: {              
                  target:cc.Node,     
              },     

start () { 
//ATTACH DEBUG DRAW TO CAMERA //
cc.director.getPhysicsManager().attachDebugDrawToCamera(this.node.getComponent(cc.Camera));     
},      
update (dt) {
this.node.setPosition(0,cc.clampf(this.target.getPositionY()+this.node.getPositionY(),-30,60))      
}
});

What now

This is just a working prototype and far away from a complete game. There are still a lot to do, like effects, score, levels, graphics, etc.. But it’s a good starting point.
CocosCreator can now export this game to html5, iOS, Android and desktop.