konva/test/performance/bunnies_native.html
2020-06-10 11:57:48 -05:00

156 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="canvas"></div>
<script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
<script defer="defer">
var lastTime = 0;
var width = window.innerWidth;
var height = window.innerHeight;
var wabbitTexture;
var bunnys = [];
var gravity = 0.75;
var maxX = width - 10;
var minX = 0;
var maxY = height - 10;
var minY = 0;
var startBunnyCount = 4000;
var isAdding = false;
var count = 0;
var container;
var layer;
var stats;
var amount = 10;
var counter;
var canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
stats = new Stats();
wabbitTexture = new Image();
wabbitTexture.onload = function() {
_handleTextureLoaded();
};
wabbitTexture.src = '../assets/bunny.png';
document.body.appendChild(stats.domElement);
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
window.requestAnimationFrame(update);
counter = document.createElement('div');
counter.className = 'counter';
counter.style.position = 'absolute';
counter.style.top = '50px';
document.body.appendChild(counter);
count = startBunnyCount;
counter.innerHTML = startBunnyCount + ' BUNNIES';
canvas.addEventListener('mousedown', function() {
isAdding = true;
});
canvas.addEventListener('mouseup', function() {
isAdding = false;
});
document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true);
function _handleTextureLoaded(event) {
for (var i = 0; i < startBunnyCount; i++) {
bunny = {
x: 10,
y: 10,
speedX: Math.random() * 10,
speedY: Math.random() * 10 - 5
}
bunnys.push(bunny);
}
}
function onTouchStart(event) {
isAdding = true;
}
function onTouchEnd(event) {
isAdding = false;
}
function update() {
stats.begin();
if (isAdding) {
// add 10 at a time :)
for (var i = 0; i < amount; i++) {
bunny = {
x: 10,
y: 10,
speedX: Math.random() * 10,
speedY: Math.random() * 10 - 5
}
bunnys.push(bunny);
count++;
}
counter.innerHTML = count + ' BUNNIES';
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < bunnys.length; i++) {
var bunny = bunnys[i];
bunny.x = bunny.x + bunny.speedX;
bunny.y = bunny.y + bunny.speedY;
bunny.speedY += gravity;
if (bunny.x > maxX - wabbitTexture.width) {
bunny.speedX *= -1;
bunny.x = (maxX - wabbitTexture.width);
} else if (bunny.x < minX) {
bunny.speedX *= -1;
bunny.x = (minX);
}
if (bunny.y > maxY - wabbitTexture.height) {
bunny.speedY *= -0.85;
bunny.y = (maxY - wabbitTexture.height);
if (Math.random() > 0.5) {
bunny.speedY -= Math.random() * 6;
}
} else if (bunny.y < minY) {
bunny.speedY = 0;
bunny.y = (minY);
}
ctx.save();
ctx.transform(1, 0, 0, 1, bunny.x, bunny.y);
ctx.drawImage(wabbitTexture, 0, 0);
ctx.restore();
}
requestAnimationFrame(update);
stats.end();
}
</script>
</body>
</html>