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
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