Skip to main content

inheritance using EaselJS: a example of bouncing balls create with easejs

its really easy to extend a class in easeljs here is a example with source code
ball class extended from the container class with its serval own properties such as vx,vy and gravity
 

=====================================================

for new guys copy this code in a javascript file rename that file as ball.js
 

//ball class

(function (window) {
    function ball(icon,x,y) {
        this.initialize(icon,x,y);
    }
    //Inheritance from Container
    ball.prototype = new createjs.Container(); 
ball.prototype.icon=null;
ball.prototype.vx=2;
ball.prototype.vy=0;
ball.prototype.gravity = .4;
    ball.prototype.initialize = function (icon) {
  this.icon=icon;
  this.addChild(icon);
    }
     ball.prototype.onTick = function () {
               // apply gravity
this.vy += this.gravity;
// move ball
this.x+=this.vx;
this.y += this.vy;
if (this.x>950) {
this.x = 950;
this.vx = -this.vx;
}
// hit left wall?
if (this.x <= 10) {
this.x = 10;
this.vx = -this.vx;
}
if (this.y >700) {
this.y =700;
this.vy = -this.vy;

}
    }
    window.ball= ball;
} (window));

copy and paste this source code in a blank html document
--------------------------------------------------------------------

//main file or index file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="CreateJS-EaselJS/lib/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="CreateJS-PreloadJS/lib/preloadjs-0.2.0.min.js"></script>
<script src="ball.js"></script>
<script>
//variables
var totalLoaded=0;
//functions
function init()
{

canvas=document.createElement('canvas');
canvas.width=1280;
canvas.height=768;
document.body.appendChild(canvas);
//game stage
createGamestage();

}


function createGamestage()
{
stage = new createjs.Stage(canvas);
stage.autoClear = false;
stage.mouseEventsEnabled = true;
stage.snapToPixelEnabled =true;
manifest = [
                               // need background and  myball images inside images floder
{src:"images/bg.png", id:"bg"},
{src:"images/ball.png", id:"myball"},
];
//preload all images and sound
preloader = new createjs.PreloadJS();
    preloader.onProgress = handleProgress;
    preloader.onComplete = handleComplete;
    preloader.onFileLoad = handleFileLoad;
    preloader.loadManifest(manifest);
//frame rate of bee game
addEnterFrame();
}
function addEnterFrame()
{
createjs.Ticker.setFPS(60);
createjs.Ticker.useRAF = true;
createjs.Ticker.addListener(stage);
}
function handleFileLoad(event) {
     
switch(event.type)
{
case createjs.PreloadJS.IMAGE:
//image loaded
var img = new Image();
    img.src = event.src;
      img.onload = handleLoadComplete;
    window[event.id] = new createjs.Bitmap(img);
break;
}
}

function handleProgress(event)
{
//use event.loaded to get the percentage of the loading
}

function handleComplete(event) {
         
}
function handleLoadComplete(event) 
{
totalLoaded++;
if(manifest.length==totalLoaded)
{
 gameBegin();
}
 }
 function gameBegin()
 {
//add background
stage.addChild(bg);
addfloor();
 }
function addfloor()
{
stage.onClick=addball;

}
function addball()
{
//creating a clone of ball object
var clone=myball.clone();
clone.regX=clone.image.width/2;
clone.regY=clone.image.height/2;
//passing that clone to tball function
var tball=new ball(clone);
tball.x=stage.mouseX;
tball.y=stage.mouseY;
tball.vx=random_number(2,10);
stage.addChild(tball);

}
//random 
function random_number(min,max) {

    return (Math.round((max-min) * Math.random() + min));
}

</script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body onload="init()">
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Creating a word Scramble game where you can drag and drop the word and create a complete word. (drag and drop word Scramble game).

Creating a word game using  phaser game engine which is a javascript based gaming engine  where u can drag and drop world like Word Scramble Game and complete a given word. your index.html file look like below < html > < head > < script src = "src/phaser.min.js" ></ script > < script src = "src/wordGame.js" ></ script > < script src = "src/main.js" ></ script > </ head > < body > </ body > </ html > 1.    <script src="src/phaser.min.js"></script> required to run the  phaser game engine. 2. rest of the two files deals with game logics      <script src="src/wordGame.js"></script>       <script src="src/main.js"></script> you can download whole project from https://github.com/manishchauhan/wordgame/tree/master just copy and paste the project in your local server and run ...
Post a Comment
Read more

starting with three.js and react with a very simple example

 1. three.js is undoubtedly the best library to create interactive content for the web in 3d. link https://threejs.org/ a working sample of three with react can be found below https://stackblitz.com/edit/react-7n5qf9?file=src%2FApp.js why choose threejs 1. lightweight  2.fast 3.big community  https://discourse.threejs.org/ 4. even you can use unity or unreal to publish html5 content but i don't think that would be acceptable in many cases. 5. open-source project. i created a running sample with React  https://stackblitz.com/edit/react-7n5qf9?file=src%2FApp.js
Post a Comment
Read more

A simple binary search tree with generic approach tree can store any type of data. (DFS and BFS)

 1. a binary search tree in c++ using a generic approach with both BFS and DFS approach    working tree    https://www.onlinegdb.com/edit/HkuQLdA-w code=> some properties of binary search tree-> 1. binary search tree is not always a balanced tree.  2. Inorder, traversing gives you sorted data.  3.  best is o(log n) and worst is O(n).  4. left node data is always less than root data and right node data always be greater than root data.  5. red-black tree STL map is a balanced binary search tree. *******************************************************************************/ #include <stdio.h> #include<iostream> #include<queue> using namespace std; template < typename T > class Node {   //can store any type of data private:   //genric data or store any type of data   T data;   //reference of left pointer   Node *left = nullptr;   //reference of right pointer   Node *rig...
Post a Comment
Read more