Skip to content

Instantly share code, notes, and snippets.

@pedropapa

pedropapa/gist:97514bce7018aa6327e7

Created March 20, 2015 18:53
Show Gist options
  • Save pedropapa/97514bce7018aa6327e7 to your computer and use it in GitHub Desktop.
Save pedropapa/97514bce7018aa6327e7 to your computer and use it in GitHub Desktop.
Download ZIP
Game Pular
Raw
gistfile1.js
<html>
<body>
<script type="text/javascript">
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var floor = screenHeight * 0.8;
with(document.body.style) {
height = screenHeight + 'px';
overflow = "hidden";
backgroundColor = "#666";
}
var Animacoes = {
pular: function(particle, velocity, height, animationTickCallback) {
if(!particle.custom.isJumping) {
var initialHeight = parseInt(particle.style.top);
var maxHeight = initialHeight - height;
var jumpDirection = -velocity;
particle.custom.isJumping = true;
var interval = setInterval(function() {
var currentHeight = parseInt(particle.style.top);
var newHeight = (currentHeight + jumpDirection);
if(particle.custom.inAnimation) {
if(newHeight <= maxHeight) {
jumpDirection = +velocity;
} else if(newHeight >= initialHeight) {
newHeight = initialHeight;
particle.custom.isJumping = false;
animationTickCallback(particle, currentHeight, interval, true);
clearInterval(interval);
}
particle.style.top = newHeight + 'px';
}
if(typeof animationTickCallback == 'function') {
animationTickCallback(particle, currentHeight, interval);
}
}, 20);
}
},
mover: function(particle, direction, speed, acceleration, animationTickCallback) {
particle.custom.movingAcceleration = acceleration;
var interval = setInterval(function() {
if(particle.custom.inAnimation) {
particle.style[direction] = (parseInt(particle.style[direction]) + speed) * particle.custom.movingAcceleration + 'px';
}
if(typeof animationTickCallback == 'function') {
animationTickCallback(particle, interval);
}
Utils.detectCollisions(particle);
}, 3);
}
}
var Utils = {
addEle: function(ele, attrs, events, innerHTML, append) {
if(typeof append == 'undefined') {
append = true;
}
var element = document.createElement(ele);
if(attrs) {
for(attr in attrs) {
if(typeof attrs[attr] == 'object') {
for(ind in attrs[attr]) {
element[attr][ind] = attrs[attr][ind];
}
} else {
element[attr] = attrs[attr];
}
}
}
if(events) {
for(event in events) {
element.addEventListener(event, events[event]);
}
}
if(innerHTML) {
element.innerHTML = innerHTML;
}
element.custom = {
inAnimation: true
}
if(append) {
document.body.appendChild(element);
}
return element;
},
detectCollisions: function(particle) {
var particles = document.getElementsByClassName('particle');
var particleWidth = particle.clientWidth;
var particleHeight = particle.clientHeight;
var particleTop = parseInt(particle.style.top);
var particleLeft = parseInt(particle.style.left);
var particleBottomLeftNodeX = particleLeft;
var particleBottomLeftNodeY = particleTop + particleHeight;
var particleBottomRightNodeX = particleLeft + particleWidth;
var particleBottomRightNodeY = particleBottomLeftNodeY;
var particleTopLeftNodeX = particleBottomLeftNodeX;
var particleTopLeftNodeY = particleTop;
var particleTopRightNodeX = particleBottomRightNodeX;
var particleTopRightNodeY = particleTopLeftNodeY;
for(node in particles) {
if(typeof particles[node] == 'object') {
if(particles[node].custom.id !== particle.custom.id) {
var nodeWidth = particles[node].clientWidth;
var nodeHeight = particles[node].clientHeight;
var nodeTop = parseInt(particles[node].style.top);
var nodeLeft = parseInt(particles[node].style.left);
var nodeBottomLeftNodeX = nodeLeft;
var nodeBottomLeftNodeY = nodeTop + nodeHeight;
var nodeBottomRightNodeX = nodeLeft + nodeWidth;
var nodeBottomRightNodeY = nodeBottomLeftNodeY;
var nodeTopLeftNodeX = nodeBottomLeftNodeX;
var nodeTopLeftNodeY = nodeTop;
var nodeTopRightNodeX = nodeBottomRightNodeX;
var nodeTopRightNodeY = nodeTopLeftNodeY;
if(((particleTopRightNodeX >= nodeTopLeftNodeX && particleTopRightNodeX <= nodeTopRightNodeX) && (particleBottomRightNodeX >= nodeBottomLeftNodeX && particleBottomRightNodeX <= nodeBottomRightNodeX)) && ((particleTopRightNodeY >= nodeTopLeftNodeY && particleTopRightNodeY <= nodeTopRightNodeY) && (particleBottomRightNodeY >= nodeBottomLeftNodeY && particleBottomRightNodeY <= nodeBottomRightNodeY))) {
console.log('hue')
}
}
}
}
}
}
var Core = {
init: function() {
// Utils.addEle('div', {style: {border: '1px solid black', width: screenWidth + 'px', position: 'absolute', left: '0px', top: (floor + 22 ) + 'px'}});
setInterval(function() {
var particle = Core.createEmoticon(20, 16, 0, Math.round(Math.random() * screenHeight));
Animacoes.mover(particle, 'left', 1.0, 1.0, function(particle, interval) {
if(parseInt(particle.style.left) > screenWidth) {
particle.remove();
clearInterval(interval);
}
});
}, 500);
setInterval(function() {
particle = Core.createEmoticon(20, 16, screenWidth, Math.round(Math.random() * screenHeight));
Animacoes.mover(particle, 'left', -1.0, 1.0, function (particle, interval) {
if (parseInt(particle.style.left) < 0) {
particle.remove();
clearInterval(interval);
}
});
}, 500);
},
createEmoticon: function(height, width, left, top) {
var emoticon = Utils.addEle('div', {style: {position: 'absolute', height: height + 'px', width: width + 'px', left: left + 'px', top: top + 'px'}});
var head = Utils.addEle('img', {width: '16', style: {position: 'absolute', zIndex: 2, left: '0px', top: '0px'}, src: 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpt1/v/t1.0-1/p64x64/1489213_1062531797097415_1987155671715825340_n.jpg?oh=3729350d5f354a172cbfe93a68b4d091&oe=55BE5ECC&__gda__=1437570452_4210ee34d368752562c3dc3b413c6e77'});
var legs = Utils.addEle('img', {style: {top: '6px', zIndex: 1, left: '-0.1px', position: 'absolute'}, src: 'http://emoticoner.com/files/emoticons/skype_smileys/dance-skype-smiley.gif?1301953192'});
emoticon.appendChild(head);
emoticon.appendChild(legs);
emoticon.className = 'particle';
emoticon.custom.id = Math.round(Math.random()*10000000000);
emoticon.onmouseover = function() {
emoticon.custom.movingAcceleration = 1;
Animacoes.pular(emoticon, 3, 120, function(particle, currentHeight, interval, finishAnimation) {
if(finishAnimation) {
particle.custom.movingAcceleration = 1.0;
}
})
};
return emoticon;
}
}
Core.init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment