I'm creating pinball game using Phaser Framework.
When the ball holder is pressed (please check attached screenshot so you have an idea what I mean ball holder), depending on the press speed, it should move the ball around the spiral channel. So now trying to detect the down pressed duration of the holder.
Here is my code:
var ballButton;
ballButton = game.add.sprite(196, 100, 'ballHolder');
ballButton.inputEnabled = true;
ballButton.events.onInputDown.add(inputDownAction, this);
function inputDownAction(ballButton, pointer) {
/* returns 0 */
console.log( pointer.duration);
}
So pointer.duration is not working and returns 0.
But game.input.activePointer.duration inside update() function is working and returns duration.
if (game.input.activePointer.duration > 200 && game.input.activePointer.duration < 500){
console.log('first range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 500 && game.input.activePointer.duration < 700){
console.log('second range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 700){
console.log('third range '+game.input.activePointer.duration);
}
How can I make it work for specific item/sprite? Any ideas please?
in phaser 3 something like
function update(){
var duration = 0
if( this.input.activePointer.isDown ){
duration++;
}
}
You can get the time from the scene and calculate it with the downTime from the activePointer. So, you can try this approach:
function update(time, delta){
console.log(time - window.game.input.activePointer.downTime);
}
I came to the conclusion that this is the best approach when you want to get the duration on press down key because there is not duration attribute in activePointer anymore(Phaser3). So, this code works on Phaser 3 as well.
I hope it helps!
Related
I'm creating pinball game using Phaser Framework.
When the ball holder is pressed (please check attached screenshot so you have an idea what I mean ball holder), depending on the press speed, it should move the ball around the spiral channel. So now trying to detect the down pressed duration of the holder.
Here is my code:
var ballButton;
ballButton = game.add.sprite(196, 100, 'ballHolder');
ballButton.inputEnabled = true;
ballButton.events.onInputDown.add(inputDownAction, this);
function inputDownAction(ballButton, pointer) {
/* returns 0 */
console.log( pointer.duration);
}
So pointer.duration is not working and returns 0.
But game.input.activePointer.duration inside update() function is working and returns duration.
if (game.input.activePointer.duration > 200 && game.input.activePointer.duration < 500){
console.log('first range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 500 && game.input.activePointer.duration < 700){
console.log('second range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 700){
console.log('third range '+game.input.activePointer.duration);
}
How can I make it work for specific item/sprite? Any ideas please?
in phaser 3 something like
function update(){
var duration = 0
if( this.input.activePointer.isDown ){
duration++;
}
}
You can get the time from the scene and calculate it with the downTime from the activePointer. So, you can try this approach:
function update(time, delta){
console.log(time - window.game.input.activePointer.downTime);
}
I came to the conclusion that this is the best approach when you want to get the duration on press down key because there is not duration attribute in activePointer anymore(Phaser3). So, this code works on Phaser 3 as well.
I hope it helps!
So this is my first attempt at playing with JS animations. I just modified a simple tutorial to create a border that fades out when you click an element. It works perfectly the first time but every subsequent click it flickers and acts strangely. I can't work out what the issue is.
function move(elem) {
var left = 1
function frame() {
left = left - 0.1 // update parameters
elem.style.border = '6px solid rgba(48, 28, 237, '+left+')';
if (left == 0) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 100) // draw every 10ms
}
HTML:
<div onclick="move(this)" class="example_path"></div>
Codepen - http://codepen.io/anon/pen/jqrwoo
javascript count float number is inaccuracy,
for example:
console.log(0.1+0.2);
not 0.3,is 0.30000000000000004,
so...
"left = left - 0.1" forever not equal to "0"
should be
"if(left == 0)"
modification
"if(left <= 0)"
I`m sorry my English is not good,express dimness.
Your interval is not clearing. Try this (if) condition:
if (left <= 0) { // check finish condition
clearInterval(id)
// alert("cleared")
}
i have this game :http://jsfiddle.net/Qfe6L/5/
i am trying to detect when a shuriken hit an enemy so when it hit it the enemy should disappear and the score should be increased by 1 what i searched for is that i should calculate the position of the two images to check whether their is a collision but i don't seem i can do that any help from you guys ?
$(window).keypress(function (e) {
if (e.which == 32) {
CreateChuriken();
$("#Shuriken" + Shurikengid).animate({ left: '+=300px' }, 'slow');
if ($(".Shuriken").css('left') == $(".Enemy").css('left'))
{ alert("Met"); }
}
});
You need to check for collision in each animation step. Fortunately jQuery .animate() has a progress option, which you can pass a function to be called every frame.
$("#Shuriken" + Shurikengid).animate(
{ left: '+=300px' },
{ duration : 'slow',
progress: function(){
/* collision detection here */
}
}
);
Keep in mind that
if ($(".Shuriken").css('left') == $(".Enemy").css('left'))
will only compare position of first projectile and first enemy, while there are more of them on the screen. You need to iterate over every projectile and compare its powition with every enemy to find a colliding pair, like:
$('.Shuriken').each( function(){
var sOffset = $(this).offset();
$('.Enemy').each( function(){
var eOffset = $(this).offset();
if( sOffset.left == eOffset.left ){
/* boom! */
}
});
});
The above is close, but still won't work. Animation doesn't progress by 1px each frame, so you may go from Shuriken at 100px left and Enemy at 101px left at one frame to Shuriken at 102px left and Enemy at 99px left in the next one. They'll pass each other, but won't meet at the same point. So you'd need to round these values to, say, nearest 10s which will give you a bigger tolerance. You sholud also compare the vertical positions.
Updated fiddle: http://jsfiddle.net/Qfe6L/8/
(Fixed vertical posiotion of Enemies for easier testing).
Edit:
as suggested by #Kasyx it would be better to move all of this out of animation function and create a Game Loop and Scene Graph. Scene graph would keep track of elements' positions, and within Game Loop you'd check for collisions, then call a rendering function which would draw elements on screen based on the scene graph.
At the moment you’re running your hit check function once, directly after you’ve started the animation. What you need to be doing is running it every frame to see the intersect. Luckily jQuery provides a callback handler for this: $.animate’s step option. If you pass a second object into $.animate you can specify both your duration and step function like so:
$(window).keypress(function (e) {
if (e.which == 32) {
CreateChuriken();
$("#Shuriken" + Shurikengid).animate({
left: '+=300px'
}, {
duration: 'slow',
step: function(){
if ($(".Shuriken").css('left') == $(".Enemy").css('left')) {
alert("Met");
}
}
});
}
});
As you’re calling your step function once every frame you’ll want to cache your selectors inside ($('.Shuriken'), $('.Enemy')) first:
$(window).keypress(function (e) {
if (e.which == 32) {
var shuriken, enemy;
CreateChuriken();
shuriken = $('.Shuriken');
enemy = $('.Enemy');
$("#Shuriken" + Shurikengid).animate({
left: '+=300px'
}, {
duration: 'slow',
step: function(){
if (shuriken.css('left') == enemy.css('left')) {
alert("Met");
}
}
});
}
});
I am using the YouTube API to get the current elapsed time of a video: player.getCurrentTime(); and the player.getDuration(); functions; I have set a slider in jQuery that will have the max value set to player.getDuration and the min to 0;
Using those two functions I have built the following piece of code:
var progress = setInterval(function(){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
},1000);
that will update a slider with the elapsed time of the Youtube video.
The problem is that when I pause the video, the value of the slider flickers between an earlier value, and the current elapsed time (player.getCurrentTime()) value.
Can someone explain?
EDIT: here is the proper code that updates the slider on player play state and stops the update function on player pause state:
function playerStateChange(newState) {
globalYtState = newState;
if(newState == 0){
$("#hSongSearcher").val('').trigger('keyup');
setTimeout(playNextVideo(),1500);
}
if(newState == 2){
clearInterval(progressUpdater);
}
if(newState == 1){
progressUpdater = setInterval(function(){
//console.log(Math.floor(player.getCurrentTime()));
if(Math.floor($("#progressbar").slider('value')) != Math.floor(player.getCurrentTime())){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
}
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}
}
So, this may help anyone else. I have found out that when running this piece of code:
$("progressbar").on('slidechange',function(event,ui) { ...
it seems that the ui.value flickers in my example between the current getCurrentTime() value and a maybe random value? ( I don't know exactly from where that value is! but I know a good workaround that will fix that);
SO I have made a var that holds the player current time on each second, and just pass by that random flickering value of the slider as follows:
if(newState == 1){
progressUpdater = setInterval(function(){
ctime = Math.floor(player.getCurrentTime());
$("#progressbar").slider("value", ctime);
//Here starts the flickering fix
$("#progressbar").on('slidechange',function(event,ui){
//Fix Flcikering;
if(ui.value < ctime){
$("#progressbar").slider("value", ctime);
}
});
//And here it ends.
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}
audio element is playing with volume:
audio.setVolume(.20)
At a certain point I want to fade out the volume, rather than have it cut abruptly, so in essence I want
audio.setVolume(.15)
audio.setVolume(.10)
audio.setVolume(.05)
audio.setVolume(.03)
audio.setVolume(.01)
but there needs to be some very brief delay in between these changes so they are audible and I get my fade out effect. What is the proper way to do this?
thanks!
You could use a setInterval():
// Initial volume of 0.20
// Make sure it's a multiple of 0.05
var vol = 0.20;
var interval = 200; // 200ms interval
var fadeout = setInterval(
function() {
// Reduce volume by 0.05 as long as it is above 0
// This works as long as you start with a multiple of 0.05!
if (vol > 0) {
vol -= 0.05;
audio.setVolume(vol);
}
else {
// Stop the setInterval when 0 is reached
clearInterval(fadeout);
}
}, interval);
I would wrap the setTimeout inside of the function, as well as the options. Regarding the factor, 0.01 will be a safe value to decrease without you having to know or adjust the initial value.
function fadeVolume(volume, callback)
{
var factor = 0.01,
speed = 50;
if (volume > factor)
{
setTimeout(function(){
fadeVolume((audio.volume -= factor), callback);
}, speed);
} else {
(typeof(callback) !== 'function') || callback();
}
}
fadeVolume(audio.volume, function(){
console.log('fade complete');
});
Once the fade is complete, it will fire a callback that you can use to play the next song.
You can use this mouse key event too.
audio.on('keydown', function() {
// and here keep increasing or decreasing the volume, untill keyUp
})
As being viewed, its jQuery! You can use it for your work. Also, the audio tag is for the div, that contains the audio tag!