JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.3.0/phaser.js"></script>
JavaScript
var game = new Phaser.Game(800, 600, Phaser.AUTO,"" , { preload: preload, create: create, update: update });
// Start/End point selection vars
var startPoint = new Phaser.Point();
var endPoint = new Phaser.Point();
var mouseIsDown = false;
var graphics;
// sprite to collide with
var selectSprite;
// Sprite vars
var atari1, atari2, ataris;
function create() {
// create sprite groops and add sprites to game
ataris = game.add.group();
atari1 = game.add.sprite(100, 100, 'atari');
ataris.add(atari1);
atari2 = game.add.sprite(400, 300, 'atari');
ataris.add(atari2);
selectSprite = game.add.sprite(0, 0);
// add graphics to game to draw selection box
graphics = game.add.graphics(0, 0);
// add mouse inputs to game. Up and Down
game.input.onDown.add(mouseDown, this);
game.input.onUp.add(mouseUp, this);
}
function update() {
if(mouseIsDown){
drawBox();
}
}
function mouseDown() {
// Get start points for selection box and section sprite
startPoint.x = game.input.mousePointer.x;
startPoint.y = game.input.mousePointer.y;
mouseIsDown = true;
}
function mouseUp() {
hilightItem();
mouseIsDown = false;
graphics.clear();
}
function drawBox() {
// Get endpoint for selection box
endPoint.x = ( game.input.mousePointer.x - startPoint.x);
endPoint.y = ( game.input.mousePointer.y - startPoint.y);
// set x,y,width,height for select sprite. Includes inverted rectangle
selectSprite.x = startPoint.x < game.input.mousePointer.x ? startPoint.x : game.input.mousePointer.x ;
selectSprite.y = startPoint.y < game.input.mousePointer.y ? startPoint.y : game.input.mousePointer.y;
selectSprite.width = endPoint.x;
selectSprite.height = endPoint.y;
// draw rect for selection
graphics.clear();
graphics.lineStyle(3, 0xffffff, 3);
graphics.beginFill(0xffffff, 0.5);
...