Skip to content

Instantly share code, notes, and snippets.

@roachhd
Created March 1, 2014 12:49
Show Gist options
  • Save roachhd/9289349 to your computer and use it in GitHub Desktop.
Save roachhd/9289349 to your computer and use it in GitHub Desktop.
drang the animals onto their matching shadows
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script defer="defer">
function loadImages(sources, callback) {
var assetDir = 'http://www.html5canvastutorials.com/demos/assets/';
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = assetDir + sources[src];
}
}
function isNearOutline(animal, outline) {
var a = animal;
var o = outline;
var ax = a.getX();
var ay = a.getY();
if(ax > o.x - 20 && ax < o.x + 20 && ay > o.y - 20 && ay < o.y + 20) {
return true;
}
else {
return false;
}
}
function drawBackground(background, beachImg, text) {
var context = background.getContext();
context.drawImage(beachImg, 0, 0);
context.setAttr('font', '20pt Calibri');
context.setAttr('textAlign', 'center');
context.setAttr('fillStyle', 'white');
context.fillText(text, background.getStage().getWidth() / 2, 40);
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 530
});
var background = new Kinetic.Layer();
var animalLayer = new Kinetic.Layer();
var animalShapes = [];
var score = 0;
// image positions
var animals = {
snake: {
x: 10,
y: 70
},
giraffe: {
x: 90,
y: 70
},
monkey: {
x: 275,
y: 70
},
lion: {
x: 400,
y: 70
},
};
var outlines = {
snake_black: {
x: 275,
y: 350
},
giraffe_black: {
x: 390,
y: 250
},
monkey_black: {
x: 300,
y: 420
},
lion_black: {
x: 100,
y: 390
},
};
// create draggable animals
for(var key in animals) {
// anonymous function to induce scope
(function() {
var privKey = key;
var anim = animals[key];
var animal = new Kinetic.Image({
image: images[key],
x: anim.x,
y: anim.y,
draggable: true,
brightness: 0,
blurRadius: 0
});
animal.cache();
animal.drawHitFromCache();
animal.filters([
Kinetic.Filters.Blur,
Kinetic.Filters.Brighten
]);
animal.on('dragstart', function() {
this.moveToTop();
animalLayer.draw();
});
/*
* check if animal is in the right spot and
* snap into place if it is
*/
animal.on('dragend', function() {
var outline = outlines[privKey + '_black'];
if(!animal.inRightPlace && isNearOutline(animal, outline)) {
animal.setPosition({x:outline.x, y:outline.y});
animalLayer.draw();
animal.inRightPlace = true;
if(++score >= 4) {
var text = 'You win! Enjoy your booty!'
drawBackground(background, images.beach, text);
}
// disable drag and drop
setTimeout(function() {
animal.setDraggable(false);
}, 50);
}
});
// make animal glow on mouseover
animal.on('mouseover touchstart', function() {
animal.blurRadius(1);
animal.brightness(0.3);
animalLayer.draw();
document.body.style.cursor = 'pointer';
});
// return animal on mouseout
animal.on('mouseout touchend', function() {
animal.blurRadius(0);
animal.brightness(0);
animalLayer.draw();
document.body.style.cursor = 'default';
});
animal.on('dragmove', function() {
document.body.style.cursor = 'pointer';
});
animalLayer.add(animal);
animalShapes.push(animal);
})();
}
// create animal outlines
for(var key in outlines) {
// anonymous function to induce scope
(function() {
var imageObj = images[key];
var out = outlines[key];
var outline = new Kinetic.Image({
image: imageObj,
x: out.x,
y: out.y
});
animalLayer.add(outline);
})();
}
stage.add(background);
stage.add(animalLayer);
drawBackground(background, images.beach, 'Ahoy! Put the animals on the beach!');
}
var sources = {
beach: 'beach.png',
snake: 'snake.png',
snake_black: 'snake-black.png',
lion: 'lion.png',
lion_black: 'lion-black.png',
monkey: 'monkey.png',
monkey_black: 'monkey-black.png',
giraffe: 'giraffe.png',
giraffe_black: 'giraffe-black.png',
};
loadImages(sources, initStage);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment