tunisian_jocker Posted March 17, 2015 Share Posted March 17, 2015 i'm new developer in phaser ,i have so much problem, i want to make a cards game, can someone help me ? how to start drag when clicking and to stop it when doing another click ? can i do it ? Link to comment Share on other sites More sharing options...
Westinghouse Posted March 17, 2015 Share Posted March 17, 2015 Look at these examples:http://phaser.io/examples/v2/input/draghttp://phaser.io/examples/v2/input/drag-event-parameters That should explain how to do it. Link to comment Share on other sites More sharing options...
tunisian_jocker Posted March 17, 2015 Author Share Posted March 17, 2015 thanx westinghouse, but this explain how to add an action onDragStart and onDragStop, i want when onDragStart, the card folow the mouse position, when i click again i can stop draging Link to comment Share on other sites More sharing options...
Westinghouse Posted March 17, 2015 Share Posted March 17, 2015 Sorry for the misunderstand. I've made an example, but I dont know if it works in Javascript I wrote it in Typescript and translated it to Javascript but could not tested it. I think the only way to do it, is with events. If you do it with polling, the bool variable will alter between true and false as long as you hold the mouse button. An event fires only once with each mouse click. var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update});var bool;function preload() { game.load.image('card', 'mycard.png');}function create() { bool = false; myCard = this.game.add.sprite(200, 200, 'card'); myCard.anchor.x = 0.5; myCard.anchor.y = 0.5; myCard.inputEnabled = true; myCard.events.onInputDown.add(click()); }function update(){ if (bool){ myCard.position.x = game.input.mousePointer.x; myCard.position.y = game.input.mousePointer.y; } }function click(){ bool=!bool;} Link to comment Share on other sites More sharing options...
tunisian_jocker Posted March 18, 2015 Author Share Posted March 18, 2015 thanx westinghouse,this is my code,i can drag my cards but the card come under the cursor , i have a problem in the position of cards , can some one help me?BasicGame.Play = function (game) { this.bg; this.spriteTopLeft; this.spriteTopRight; this.spriteBottomLeft; this.spriteBottomRight; this.cards = new Array( '1_p', '2_p', '3_p', '4_p', '5_p', '6_p', '7_p', '8_p', '9_p', '10_p', '1_c', '2_c', '3_c', '4_c', '5_c', '6_c', '7_c', '8_c', '9_c', '10_c', '1_d', '2_d', '3_d', '4_d', '5_d', '6_d', '7_d', '8_d', '9_d', '10_d', '1_t', '2_t', '3_t', '4_t', '5_t', '6_t', '7_t', '8_t', '9_t', '10_t' ); this.myCards = new Array(); this.CardsOfComputer = new Array(); this.CardsOnTheTable = new Array(); this.cardsToDrag = new Array();};BasicGame.Play.prototype = { preload: function () { for (var i = 0; i < this.cards.length; i++) { this.load.image(this.cards[i], 'images/' + this.cards[i] + '.gif'); } }, create: function () { this.background = this.add.sprite(this.world.centerX, this.world.centerY, 'background'); this.background.anchor.setTo(0.5, 0.5); var cards = this.sortCards(this.cards); this.myCards = new Array( cards[0], cards[1], cards[2] ); this.CardsOfComputer = new Array( cards[3], cards[4], cards[5] ); this.CardsOnTheTable = new Array( cards[6], cards[7], cards[8], cards[9] ); for (var i = 0; i <= 9; i++) { cards.splice(i, 1); } var x = 2; var y = 0.5; for (var i = 0; i < this.CardsOnTheTable.length; i++) { var card = this.add.sprite(this.world.centerX, this.world.centerY, this.CardsOnTheTable[i]); card.anchor.setTo(x, y); x -= 2.5; if (i == 1) { y = 2; x = 2; } } var x = 2; var y = -3; for (var i = 0; i < this.myCards.length; i++) { var card = this.add.sprite(this.world.centerX, this.world.centerY, this.myCards[i]); card.anchor.setTo(x, y); this.physics.arcade.enable(card); card.inputEnabled = true; card.events.onInputDown.add(this.click, this); x -= 1.5; } }, click: function (card, pointer) { //console.dir(pointer) //console.log(carte.key); //carte.input.enableDrag(); //carte.events.onDragStart.add(this.startDrag, this); //carte.events.onDragStop.add(this.stopDrag, this); //var x = carte.x; //var y = carte.y; //this.physics.arcade.moveToPointer(carte, 400, this.input.activePointer); //this.bool=!this.bool; if(!(this.cardsToDrag[card.key])){ this.cardsToDrag[card.key] = { object:new Object(), drag:false, x:0, y:0 }; } var drag = !this.cardsToDrag[card.key].drag; this.cardsToDrag[card.key] = { object: card, drag:drag, x:card.position.x, y:card.position.y }; }, startDrag: function (current) { }, stopDrag: function (current) { }, sortCards: function (cards) { cards= cards.sort(function () { return 0.5 - Math.random(); }); cards= cards.sort(function () { return 0.5 - Math.random(); }); cards= cards.sort(function () { return 0.5 - Math.random(); }); return cards.sort(function () { return 0.5 - Math.random(); }); }, update: function () { for (var key in this.cardsToDrag) { var obj = this.cardsToDrag[key]; var card = obj.object; if(obj.drag){ card.position.x = this.input.mousePointer.x; card.position.y = this.input.mousePointer.y; } else { card.position.x = obj.x; card.position.y = obj.y; this.cardsToDrag.splice(key, 1); } } }, resize: function (width, height) { }}; Link to comment Share on other sites More sharing options...
Westinghouse Posted March 18, 2015 Share Posted March 18, 2015 I don't understand what you mean with 'the card come under the cursor', but I see in your code is that the anchor of your cards is out of the bounds of the card-sprites. var x = 2; var y = -3; for (var i = 0; i < this.myCards.length; i++) { var card = this.add.sprite(this.world.centerX, this.world.centerY, this.myCards[i]); card.anchor.setTo(x, y); this.physics.arcade.enable(card); card.inputEnabled = true; card.events.onInputDown.add(this.click, this); x -= 1.5;Here you set the anchor to (2,-3) that is way out of the bounds of your sprite. The anchor points should be between 0 and 1. Link to comment Share on other sites More sharing options...
tunisian_jocker Posted March 21, 2015 Author Share Posted March 21, 2015 Thanx westinghouse,Problem resolved Link to comment Share on other sites More sharing options...
Recommended Posts