<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Animals on the Beach Game Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function loadImages(sources, callback) {
var assetDir = '/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.x();
var ay = a.y();
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().width() / 2, 40);
}
function initStage(images) {
var stage = new Konva.Stage({
container: 'container',
width: 578,
height: 530,
});
var background = new Konva.Layer();
var animalLayer = new Konva.Layer();
var animalShapes = [];
var score = 0;
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,
},
};
for (var key in animals) {
(function () {
var privKey = key;
var anim = animals[key];
var animal = new Konva.Image({
image: images[key],
x: anim.x,
y: anim.y,
draggable: true,
});
animal.on('dragstart', function () {
this.moveToTop();
});
/*
* 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.position({
x: outline.x,
y: outline.y,
});
animal.inRightPlace = true;
if (++score >= 4) {
var text = 'You win! Enjoy your booty!';
drawBackground(background, images.beach, text);
}
setTimeout(function () {
animal.draggable(false);
}, 50);
}
});
animal.on('mouseover', function () {
animal.image(images[privKey + '_glow']);
document.body.style.cursor = 'pointer';
});
animal.on('mouseout', function () {
animal.image(images[privKey]);
document.body.style.cursor = 'default';
});
animal.on('dragmove', function () {
document.body.style.cursor = 'pointer';
});
animalLayer.add(animal);
animalShapes.push(animal);
})();
}
for (var key in outlines) {
(function () {
var imageObj = images[key];
var out = outlines[key];
var outline = new Konva.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_glow: 'snake-glow.png',
snake_black: 'snake-black.png',
lion: 'lion.png',
lion_glow: 'lion-glow.png',
lion_black: 'lion-black.png',
monkey: 'monkey.png',
monkey_glow: 'monkey-glow.png',
monkey_black: 'monkey-black.png',
giraffe: 'giraffe.png',
giraffe_glow: 'giraffe-glow.png',
giraffe_black: 'giraffe-black.png',
};
loadImages(sources, initStage);
</script>
</body>
</html>
|