We Keep Coding

click handler to a group of Sprites

I just learned about a group in phaser 3,
is there a way how to bind a click handler to a group of Sprites ?

Here is the snippet that shows how to accomplish it
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('beball', 'assets/sprites/beball1.png');
game.load.image('bikkuriman', 'assets/sprites/bikkuriman.png');
}
var text = '';
var group1;
var group2;
function create() {
// Let's create 2 Groups
group1 = game.add.group();
group2 = game.add.group();
// This will automatically inputEnable all children added to both Groups
group1.inputEnableChildren = true;
group2.inputEnableChildren = true;
// Create 10 Sprites per Group
for (var i = 0; i < 10; i++)
{
var sprite1 = group1.create(64 + (64 * i), 150, 'beball');
sprite1.name = 'group1-child-' + i;
var sprite2 = group2.create(64 + (64 * i), 350, 'bikkuriman');
sprite2.name = 'group2-child-' + i;
}
// And now we'll listen to the Group events
group1.onChildInputDown.add(onDown, this);
group2.onChildInputDown.add(onDown, this);
group1.onChildInputOver.add(onOver, this);
group2.onChildInputOver.add(onOver, this);
group1.onChildInputOut.add(onOut, this);
group2.onChildInputOut.add(onOut, this);
}
function onDown (sprite) {
text = "onDown: " + sprite.name;
sprite.tint = 0x00ff00;
}
function onOver (sprite) {
text = "onOver: " + sprite.name;
sprite.tint = 0xff0000;
}
function onOut (sprite) {
text = "onOut: " + sprite.name;
sprite.tint = 0xffffff;
}
function render() {
if (text === '')
{
game.debug.text("Interact with the Sprites.", 32, 32);
}
else
{
game.debug.text(text, 32, 32);
}
}

thank you, sir,
but sir, what if we only want only to bind, click handler to an individual isolated Sprite?"
but are there other in-depth examples, which lead me there, I'm still confused about how to use it, I'm still a beginner in phaser 3

how to put sleep function in javascript?

I am creating a game in html5 using javascript and I am having problem with sleep function. I want to hold off an isWin function for a few seconds before showing a popup declaring the person has won the game. here is part of the code.
modal: function (isWin) {
var bgDarker = this.game.make.bitmapData(this.game.width, this.game.height);
bgDarker.fill(50, 50, 50);
bgDarker = this.game.add.button(0, 0, bgDarker, function () { }, this);
bgDarker.tint = 0x000000;
bgDarker.alpha = 0.5;
var modalGroup = this.game.add.group();
var bg = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 40, (isWin ? "picWinPopup" : "picLostPopup"));
bg.scale.setTo(1);
bg.anchor.setTo(0.5);
modalGroup.add(bg);
var labelLevel2 = this.game.add.text(this.game.world.centerX + 100, this.game.world.centerY + 5, MatchingGame.indexImage, {
font: "48px " + MatchingGame.fontFaces[3],
fill: "#1a40ff",
boundsAlignH: "center",
boundsAlignV: "middle"
});
labelLevel2.anchor.setTo(0.5);
modalGroup.add(labelLevel2);
var labelTotalScore = this.game.add.text(this.game.world.centerX, this.game.world.centerY + 110, MatchingGame.score, {
font: "34px " + MatchingGame.fontFaces[3],
fill: "#ff2a5c",
boundsAlignH: "center",
boundsAlignV: "middle"
});
labelTotalScore.anchor.setTo(0.5);
modalGroup.add(labelTotalScore);
var btnReplay = this.makeButton("btnReplay", function (close) {
btnReplay.bgDarker.destroy();
btnReplay.modalGroup.destroy();
if(MatchingGame.indexImage==6){
MatchingGame.indexImage = 1;
}
this.game.stateTransition.to('Game');
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
MatchingGame.levelscore = 0;
},this);
//btnReplay.anchor.setTo(0.5);
btnReplay.position.setTo(bg.position.x - 200, bg.position.y + 260)
btnReplay.bgDarker = bgDarker;
btnReplay.modalGroup = modalGroup;
modalGroup.add(btnReplay);
if (!isWin) {
var btnEnd = this.makeButton("btnEnd", function (close) {
btnEnd.bgDarker.destroy();
btnEnd.modalGroup.destroy();
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
this.end();
},this);
btnEnd.position.setTo(bg.position.x + 200, bg.position.y + 260)
btnEnd.bgDarker = bgDarker;
btnEnd.modalGroup = modalGroup;
modalGroup.add(btnEnd);
}
else {
//setTimeout(3000);
//var TimeHandler = setTimeout(function(){clearTimeout(TimeHandler);},3000);
var btnNextLevel = this.makeButton("btnNextLevel", function (close) {
btnNextLevel.bgDarker.destroy();
btnNextLevel.modalGroup.destroy();
if(MatchingGame.indexImage==6){
MatchingGame.indexImage = 1;
} else {
MatchingGame.indexImage = MatchingGame.indexImage+1; }
this.game.stateTransition.to('Game');
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
},this);
btnNextLevel.position.setTo(bg.position.x + 200, bg.position.y + 260)
btnNextLevel.bgDarker = bgDarker;
btnNextLevel.modalGroup = modalGroup;
modalGroup.add(btnNextLevel);
}
MatchingGame.live = 3;
this.game.add.tween(modalGroup).from({ y: -800 }, 600, Phaser.Easing.Bounce.Out, true);
this.game.world.bringToTop(modalGroup);
},
I did try to use sleep() and setTimeout() function but keep failing to implement it in javascript. can you help me solve this problem of putting a timer in javascript function? because I am having problem integrating setTimeout in javascript code that uses html5.

Use it like this
setTimeout(function() {
var btnNextLevel = this.makeButton("btnNextLevel", function (close) {
btnNextLevel.bgDarker.destroy();
btnNextLevel.modalGroup.destroy();
if(MatchingGame.indexImage==6){
MatchingGame.indexImage = 1;
} else {
MatchingGame.indexImage = MatchingGame.indexImage+1; }
this.game.stateTransition.to('Game');
this.imgLive1.visible = true;
this.imgLive2.visible = true;
this.imgLive3.visible = true;
MatchingGame.live = 3;
},this);
btnNextLevel.position.setTo(bg.position.x + 200, bg.position.y + 260)
btnNextLevel.bgDarker = bgDarker;
btnNextLevel.modalGroup = modalGroup;
modalGroup.add(btnNextLevel); }, 3000 );

javascript is single thread, so there is no sleep/wait/stop.
you should never make that only single thread stop working.
if you want to delay some code, use setTimeout.
however the proper way to use setTimeout is:
setTimeout(myFunction, 40000);
that is an example.
see full details:
mdn setTimeout

This may fit to your requirement
var TimeHandler = setTimeout(function(){clearTimeout(TimeHandler);},3000);

Which pointer object (i.e., cursor) to use when resetting game.input.onDown

I'm having a problem where I need to reset the game.input.onDown event in the same way as Phaser.Key.reset. It seems like this is doable with the Phaser.Pointer.reset method. Unfortunately, there seems to be a bunch of different potential pointer objects in the Phaser.Input class, and I'm not sure which one I need to use for game.input.onDown, which says that it gets "dispatched each time a pointer is pressed down". I'm just not really sure which pointer I need to use. Can anyone shed some light on this?
I guess I effectively need to do something like this:
this.game.input.whicheverPointer.reset();
EDIT:
Here is an example that mimics the the problem I'm having.
Here is the source code for it:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game", {preload: preload, create: create, update: update});
var dude;
var block;
var spacebar;
var gameOverText;
var gameOverCounter = 0;
var gameOverBool = false;
function preload () {
game.load.image("block", "assets/block.png");
game.load.image("dude", "assets/phaser-dude.png");
}
function create () {
dude = game.add.sprite(373, 760, "dude");
block = game.add.sprite(0, 505, "block");
game.physics.arcade.enable(dude);
game.physics.arcade.enable(block);
dude.body.collideWorldBounds = true;
dude.body.gravity.y = 200;
block.body.collideWorldBounds = true;
block.body.immovable = true;
block.body.velocity.x = 100;
block.body.bounce.x = 1;
spacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
var jumpOrTryAgain = function () {
if (gameOverBool === false) {
dude.body.velocity.y = -250;
// If you open up your JS / error console, you'll see that
// this message gets printed an extra time each reset,
// when you click. The spacebar doesn't have this problem
// because of the `spacebar.reset()` call below.
console.log("down");
} else {
dude.destroy();
block.destroy();
gameOverText.destroy();
// Here, I can reset the spacebar, but I'm not sure what to do
// for the click / touch event, which keeps getting the jumpOrTryAgain
// callback added onto it.
spacebar.reset();
gameOverBool = false;
gameOverCounter = 0;
create();
}
};
game.input.onDown.add(jumpOrTryAgain);
spacebar.onDown.add(jumpOrTryAgain);
}
function update () {
function gameOver () {
if (gameOverCounter === 0) {
gameOverBool = true;
dude.body.velocity.y = 0;
dude.body.velocity.x = 0;
block.body.velocity.x = 0;
gameOverText = game.add.text(300, 200, "Game Over!", {fontSize: "16px", fill: "white"});
gameOverCounter += 1;
}
}
game.physics.arcade.collide(dude, block, gameOver);
}
As you can read in my comments above, the problem is that the click / touch event keeps getting the jumpOrTryAgain callback added onto itself as create gets recursively called when you reset the game. I need a way to reset the click / touch event, similar to spacebar.reset() as seen above.

game.input.onDown gets triggered from both mouse and touch input. If you need to reset its callback after every call, you can just use game.input.onDown.addOnce() (instead of game.input.onDown.add()) so that the callback is removed automatically after the first run.

All I had to do was implement a simple counter keeping the spacebar and pointer from getting re-assigned, like so:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game", {preload: preload, create: create, update: update});
var dude;
var block;
var spacebar;
var gameOverText;
var gameOverCounter = 0;
var gameOverBool = false;
var downCounter = 0;
function preload () {
game.load.image("block", "assets/block.png");
game.load.image("dude", "assets/phaser-dude.png");
}
function create () {
dude = game.add.sprite(373, 760, "dude");
block = game.add.sprite(0, 505, "block");
game.physics.arcade.enable(dude);
game.physics.arcade.enable(block);
dude.body.collideWorldBounds = true;
dude.body.gravity.y = 200;
block.body.collideWorldBounds = true;
block.body.immovable = true;
block.body.velocity.x = 100;
block.body.bounce.x = 1;
var jumpOrTryAgain = function () {
if (gameOverBool === false) {
dude.body.velocity.y = -250;
console.log("down");
} else {
dude.destroy();
block.destroy();
gameOverText.destroy();
gameOverBool = false;
gameOverCounter = 0;
create();
}
};
if (downCounter === 0) {
spacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
game.input.onDown.add(jumpOrTryAgain);
spacebar.onDown.add(jumpOrTryAgain);
downCounter += 1;
}
}
function update () {
function gameOver () {
if (gameOverCounter === 0) {
gameOverBool = true;
dude.body.velocity.y = 0;
dude.body.velocity.x = 0;
block.body.velocity.x = 0;
gameOverText = game.add.text(300, 200, "Game Over!", {fontSize: "16px", fill: "white"});
gameOverCounter += 1;
}
}
game.physics.arcade.collide(dude, block, gameOver);
}

I move this code into a separate function and it stops working, why?

Here is an excerpt of my code. You can ignore most of it: the bit of concern is with the refreshDimensions method, the call to said method inside zoomTo, and the block of code after that call.
function refreshDimensions(node) {
_("refreshdimensions");
t = $("#contents");
var other = $(selectednode).parent().parent(":not(#contents)");
if(!other.length) {
other = selectednode || zoomednode || start;
t.width("100%");
} else {
t.width("100%");
t.width((t.width() + other.position().left));
}
t.height($(other).position().top);
/* Begin animating */
t.animate({ fontSize: zoom }, {duration: 0, queue: false });
//
}
function zoomTo(node, select) {
var oldzoom, zoomdepth, t;
oldzoom = zoomednode;
if($(node)[0] != $(zoomednode)[0]) {
savedepth = t = zoomdepth = $(node).parents("ul").length;
if(!zoomednode)
zoomednode = topChapter;
$(zoomednode).toggleClass("zoomednode", false);
if(!node)
node = topChapter;
/* capture values */
var sz;
var capp = cBaseSz.slice((zoom = zoomnum = sz = parseFloat(cBaseSz)+"").length);
/* end capture */
while(--t > 0) {
zoomnum = (zoom *= 1.15);
}
zoom += capp;
zoomdepth -= $(zoomednode).parents("ul").length;
if(zoomdepth < 0)
zoomdepth *= -1;
zoomednode = node;
zoomednode.toggleClass("zoomednode", true);
switch(select) {
case 0:
case false:
default:
break;
case true:
case 1:
toggleNode(selectednode, false);
toggleNode(node, true);
break;
case 2:
toggleNode(zoomednode, false);
zoomednode = 0;
}
/* Handle showing/hiding */
//////////////////////////////
//
var showzoom = 1, showselect = 1, showidea = 1, seldepth, zdepth, showlist, hidelist = {};
/* This is the 'brute force' way of doing it, horribly inefficient */
if(zoomednode)
zdepth = $(zoomednode).parents(".chapter").length;
if(selectednode)
seldepth = $(selectednode).parents(".chapter").length;
else
seldepth = zdepth;
if(!seldepth)
seldepth = zdepth = 0;
showlist=$(".chapter, .idea").filter( function() {
if($(this).parents("li").length < (zdepth+showzoom))
return true;
else {
hidelist = $(hidelist).add(this);
return false;
}
});
$(showlist).show()/*.not(hidelist)*/;
if(hidelist && hidelist.length) {
$(hidelist).hide();
}
/* End showing/hiding */
refreshDimensions(node);
if(node) {
_("top: " + $(zoomednode).position().top);
$("html,body").stop().animate(
{ scrollTop: $(zoomednode).position().top - topAdjust }, {duration: 60+60*zoomdepth, queue: false }, 0);
}
}
else {
var dest;
if($(zoomednode).parents(".chapter").length > 1)
dest = $(zoomednode).parent().parent().prevAll(".chapter:first .chapterheading:first");
else {
// if($(zoomednode)[0] != $("#contents")[0]) {
toggleNode(selectednode, false);
dest = $("#contents");
// } else
// dest = $(start);
}
zoomTo(dest, 0);
}
}
So my problem is that when I move the bit of code after the call to refreshDimensions (the block beginning with 'if(node) {'), into refreshDimensions (at the end), the desired effect stops working. I have dumped all the variables that the line uses into the console and they are consistent across both instances, yet when I move the code to refreshDimensions my page gets 'trapped' at the top of the screen and won't scroll at all. This really has me stumped as everything points to that it should work exactly the same...

turns out it was because 'zoomdepth' should have been a global rather than local variable.

Automating animation/click in JavaScript

I'm trying to automate the slideshow on my site: Test Site
I found this awesome jquery template online: http://tympanus.net/codrops/2011/08/...ge-navigation/. I modified the html/css and got it to look the way I want but now need JavaScript help!
The slideshow currently progresses when you click on the arrows but I was wondering if there was a way to automate the clicking function so that the slideshow animation automatically starts when the webpage is loaded. I still want the user to be able to control the slideshow with the arrows. I also wanted the slideshow to go back to the first image when it's reaches the last image.
(function($){
$.fn.portfolio = function(options) {
var d = {
image: {
width: 760,
height: 507,
margin: 10
},
path: {
width: 10,
height: 10,
marginTop: 5,
marginLeft: 5
},
animationSpeed: 400
}; // default settings
var s = $.extend({}, d, options);
return this.each(function(){
var $t = $(this),
plugin = {
init: function(){
this.set.position();
this.paths.draw();
this.paths.go();
this.animate.item();
},
set: {
position: function(){
$t.find('.item').each(function(i){
var t = $(this);
t.css({ left: (s.image.width+s.image.margin)*i+'px' });
t.find('div').each(function(j){
var t = $(this);
t.css({ top: (s.image.height+s.image.margin)*j+'px' });
});
});
}
},
paths: {
draw: function(){
$t.append($('<div />').addClass('paths'));
var path = $t.find('.paths'),
items = $t.find('.item');
items.each(function(i){
var t = $(this), div = t.find('div');
path.append($('<div />').addClass('path'+i).css({
width: s.path.width+'px',
left: (s.path.width+s.path.marginLeft)*i+'px'
})
);
div.each(function(j){
$('<a />').attr({ href: '#', rel: j }).css({
width: s.path.width+'px',
height: s.path.height+'px',
top: (s.path.height+s.path.marginTop)*j+'px'
}).appendTo(path.find('.path'+i))
});
});
path.find('.path0').find('a').eq(0).addClass('active');
},
go: function(){
$t.find('.paths').find('a').click(function(){
var t = $(this), all = $t.find('.paths').find('a'), column = t.parent('div').attr('class').split('path')[1], row = t.attr('rel'),
inside = $t.find('.inside'),
top = row*(s.image.height+s.image.margin),
left = column*(s.image.width+s.image.margin);
inside.animate({
top: -top+'px',
left: -left+'px'
}, s.animationSpeed, function(){
plugin.position.get(inside);
});
return false;
});
},
classes: function(column, row){
var anchors = $t.find('.paths').find('a'), anchor = anchors.filter(function(){
var t = $(this),
col = t.parent('div').attr('class').split('path')[1],
r = t.attr('rel');
return col == column && r == row;
});
anchors.removeClass('active');
anchor.addClass('active');
}
},
animate: {
item: function(){
var down = { top: '-='+(s.image.height+s.image.margin)+'px' },
up = { top: '+='+(s.image.height+s.image.margin)+'px' },
next = { top: 0, left: '-='+(s.image.width+s.image.margin)+'px' },
prev = { top: 0, left: '+='+(s.image.width+s.image.margin)+'px' }
plugin.animate.img('.down', down, 40);
plugin.animate.img('.up', up, 38);
plugin.animate.img('.next', next, 39);
plugin.animate.img('.prev', prev, 37);
},
img: function(element, object, key){
var inside = $t.find('.inside'), type = $.browser.mozilla ? 'keypress' : 'keydown';
$(element).click(function(){
var t = $(this);
if (!t.hasClass('active')){
inside.animate(object, s.animationSpeed, function(){
plugin.position.get(inside);
t.removeClass('active');
});
}
t.addClass('active');
return false;
});
$(document).bind(type, function(e) {
var code = e.keyCode ? e.keyCode : e.which;
if(code == key && $(element).is(':visible')) {
if (!inside.is(':animated')) {
inside.animate(object, s.animationSpeed, function(){
plugin.position.get(inside);
});
}
}
return false;
});
}
},
position: {
get: function(element){
var top = element.position().top,
left = element.position().left;
plugin.position.check(top, left);
},
check: function(top, left){
top = ($.browser.msie && parseInt($.browser.version) == 8 && top != 0) ? top-1 : top;
var items = $t.find('.item'),
size_left = items.length-1,
max_left = -size_left*(s.image.width+s.image.margin),
column = left*size_left/max_left,
current = items.filter(function(){
return parseInt($(this).css('left')) == -left;
}),
size_top = current.find('div').length-1,
max_top = -size_top*(s.image.height+s.image.margin),
row = top*size_top/max_top,
arrows = $t.find('.arrows'),
up = arrows.find('.up'), down = arrows.find('.down'),
next = arrows.find('.next'), prev = arrows.find('.prev');
if (left==max_left){ next.hide(); } else { next.show(); }
if (left<0) { prev.show(); } else { prev.hide(); }
if (top==max_top){ down.hide(); } else { down.show(); }
if (top<0) { up.show(); } else { up.hide(); }
plugin.paths.classes(column, row);
}
}
}
plugin.init();
});
};}(jQuery));

Just make a timer that calls $(".next").click(); to make the slides go forward.