Skip to main content

cool flash like drag and drop in easejs and html5

here is a cool drag and drop create in easejs+tweenlite

what is easejs=easejs is a flash api like java script library 

 what  is tweenlite = a cool time based animation engine or javascript library  

whole code  for your drag and drop with screenshoot

you can download  easejs from the below link
================================
http://www.createjs.com/#!/EaselJS

you can download tweenlite  from the below link

http://www.greensock.com/gsap-js/

because easejs yet not support hit test for collision detetion  so i downloaded a cool collision detection
javascript file from

https://github.com/olsn/Collision-Detection-for-EaselJS/blob/master/example/index.html

=======================================================================
code of  drag and drop


<!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>
/*
required for drawing elements on html5 canvas such as shapes,bitmap and sprites
======================================================
*/
<script type="text/javascript" src="CreateJS-EaselJS/lib/easeljs-0.5.0.min.js"></script>

/*
required for preloading graphics
======================================================
*/

<script type="text/javascript" src="CreateJS-PreloadJS/lib/preloadjs-0.2.0.min.js"></script>

/*
required for sounds
======================================================
*/

<script type="text/javascript" src="CreateJS-SoundJS/lib/soundjs-0.3.0.min.js"></script>

/*
required for tween easejs
======================================================
*/

<script type="text/javascript" src="CreateJS-TweenJS/lib/easeljs-0.5.0.min.js"></script>

/*
required for tween tweenlite or tweenmax
======================================================
*/

<script type="text/javascript" src="CreateJS-TweenJS/lib/tweenjs-0.3.0.min.js"></script>

/*
a really cool perfect collision detection java script single file 
======================================================
*/

<script type="text/javascript" src="lib/ndgmr.Collision.js"></script>

<script src="minified/TweenMax.min.js"></script>
<script>
//variables
var statusTxt;
var questionArray=["Flex","Flash","HTML5","PHP"]
var answerArray=["HTML5","PHP","Flash","Flex"];
var dragtargets=new Array();
var droptargets=new Array();
var totalLoaded=0;
//functions
var collisionMethod = ndgmr.checkRectCollision;
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 = [
{src:"images/bg.png", id:"bg"},
{src:"images/conbg.png", id:"conbg"},
{src:"images/ok.png", id:"ok"},


];
//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()
{
addbackground();
}
function addbackground()
{
stage.addChild(bg);
//status text
 statusTxt=new createjs.Text("", "50px Impact", "#000");

statusTxt.textAlign ="center";
statusTxt.color="#000";
statusTxt.x=300;
statusTxt.y=400;
    stage.addChild(statusTxt);

adddropboxes(4);
adddragboxes(4);
addokbtn();
}
function addokbtn()
{
stage.addChild(ok);
ok.x=800;
ok.y=650;
ok.onPress=rightorwrong;
}
function rightorwrong()
{
//check answer
var rightcounter=0;
for(var i=0;i<4;i++)
{
  if(dragtargets[i].rightanwer)
  {
  rightcounter+=1;
   TweenLite.to(dragtargets[i], 1, {alpha:0.75, ease:Elastic.easeOut});
statusTxt.text=rightcounter+"Right Answer";
  }
  else
  {
   TweenLite.to(dragtargets[i], 1, {x:dragtargets[i]._x, y:dragtargets[i]._y,ease:Elastic.easeOut});

  }
}

}
function  adddropboxes(_t)
{
var spcae=150;
for(var i=0;i<_t;i++)
{
var conbgcopy=conbg.clone();
var dropContainer=new createjs.Container();
  dropContainer.addChild( conbgcopy);
dropContainer.width=conbgcopy.image.width;
dropContainer.height=conbgcopy.image.height;
stage.addChild(dropContainer);
dropContainer.regX=conbgcopy.image.width/2;
dropContainer.regY=conbgcopy.image.height/2;
dropContainer.y=150;
  dropContainer.x= spcae+(i*(conbgcopy.image.width+25));
//
var dropTxt=new createjs.Text("Flex", "50px Arial", "#000");
dropTxt.textAlign ="center";
dropTxt.x=conbgcopy.image.width/2;
dropTxt.y=10;
dropTxt.text=answerArray[i];
dropContainer.answer=answerArray[i];
    dropTxt.color="#000";
    dropContainer.addChild(dropTxt);
//
dropContainer.alpha=0.2;
droptargets.push(dropContainer);
}
}
function  adddragboxes(_t)
{
var spcae=150;
for(var i=0;i<_t;i++)
{
var conbgcopy=conbg.clone();
var dragContainer=new createjs.Container();
  dragContainer.addChild( conbgcopy);
dragContainer.width=conbgcopy.image.width;
dragContainer.height=conbgcopy.image.height;
stage.addChild(dragContainer);
dragContainer.y=550;
dragContainer.regX=conbgcopy.image.width/2;
dragContainer.regY=conbgcopy.image.height/2
  dragContainer.x= spcae+(i*(conbgcopy.image.width+25));
dragContainer._x=dragContainer.x;
dragContainer._y=dragContainer.y;
dragContainer.rightanswer=false;
dragContainer.answerFound=false;
//add text
var dragTxt=new createjs.Text("Flex", "50px Arial", "#000");
dragTxt.textAlign ="center";
dragTxt.x=conbgcopy.image.width/2;
dragTxt.y=10;
dragTxt.text=questionArray[i];
dragContainer.answer=questionArray[i];
    dragTxt.color="#000";
    dragContainer.addChild(dragTxt);
//
dragContainer.onPress=dragTrue;
dragtargets.push(dragContainer);
}
}
function dragTrue(evt)
{

  evt.onMouseMove=function()
  {
   stage.setChildIndex(evt.target, stage.getNumChildren()-1);
   evt.target.x=stage.mouseX;
evt.target.y=stage.mouseY;

  }
  evt.onMouseUp=function()
  {

for(var i=0;i<droptargets.length;i++)
{
var intersection = collisionMethod(evt.target,droptargets[i]);

if(intersection)
{
   evt.target.x= droptargets[i].x;
     evt.target.y= droptargets[i].y;
 if(evt.target.answer==droptargets[i].answer)
 {
 evt.target.rightanwer=true;
 }
 else
 {
    evt.target.rightanwer=false;
 }

 return;
}

}
 if(!evt.target.answerFound)
 {
 evt.target.rightanwer=false;

TweenLite.to(evt.target, 1, {x:evt.target._x,y:evt.target._y, ease:Elastic.easeOut});
 }
  }
}
function resetEvent()
{
}
 //adding objects
function addObject(_container,_object,_x,_y,_regX,_regY)
{
_container.addChild(_object);
_object.x=_x;
_object.y=_y;
_object.x=_regX;
_object.y=_regY;

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

Better Memory management with PixiJS or How to manage cpu and cpu memory in PixiJS.

PixiJS is my favorite framework when i am looking for a web games specially for mobile or desktop  PixiJS is fast blazing fast and you can get a decent FPS even on older device.   so here is my optimization techniques for PixiJs 1. manage your sprites in a better way use spritesheet to reduce the draw calls create big sprite sheet which contain multiple sprites can be draw in gpu with a single draw call. use TexturePacker  https://www.codeandweb.com/texturepacker  best tool when its comes to spritesheet 2. for floating point calculation round off calculation for example let  speed = 0.75 ; let  position = 100 ; console . log ( Math . round ( speed * position )) 3. don't create very big canvas when u need a big canvas size game just try to create a small canvas and translate it. 4. its very important one managing TextureCache in memory you can get all TextureCache list by using  Object.entries(PIXI.utils.TextureCache); so even you use ap...
Post a Comment
Read more

adding particles Effect in pixijs using https://pixijs.io/pixi-particles-editor/

adding particle in pixijs is very easy using the below tool more information can be found below https://github.com/pixijs/pixi-particles https://pixijs.io/pixi-particles-editor/ required packages  /// < reference path = "node_modules/pixi-particles/ambient.d.ts" /> import 'pixi-particles' code of particle delcare a     global variable   private emitter ?: Emitter ; const img = PIXI . Texture . from ( "./assets/images/particle.png" ); this . emitter = new Emitter ( this ,[ img ],{ "alpha" : { "start" : 0.62 , "end" : 0.39 }, "scale" : { "start" : 0.1 , "end" : 0.9 , "minimumScaleMultiplier" : 1.25 }, "color" : { "start" : "#ffff8f" , "end" : ...
Post a Comment
Read more