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

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

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

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