On mobile, when you want to scroll the page, you drag screen with one finger.
However, when your finger is on canvas, you can't drag the page. 
If a canvas covers whole screen, there is no way to scroll the page.
Is there a way to enable scrolling-dragging if canvas element is under the finger?

Hi, new to the forums, as well as new to coding. Started learning about a month ago.

I need help with my javascript code, I want to be able to use the arrow keys to move my character up, right, down, left, but I cannot figure out how to, I watched a video from Treehouse learning how to do this, and then I decided I would also make a separate one for myself so I copied some of the code, but It will not animate or move the sprite sheet.

The character just sits in the middle of the page even though I thought that I coded him correctly to move. He also doesn't even animate, it's completely still. 

I did however notice that when I made my background larger, that the screen would move, but I want the character to move over the screen, not move with the screen. Please help.

game.js

index.html

Hi, I want to create a program for android for myself, this will be a mini guide to the game Heroes 3. But I just started to study the code and I need your help. I want to do the same as in the photo, but how do I assign buttons to open different images on top of the background?

P.S

In short, you need to do so that you press the button to display an image.

I do not speak English well and the text is written with the help of an interpreter. I hope this can be read.

Hello fellow HTML5 Game Devs. I have an interesting problem

I am testing out some controls and different schemes for my game. I have an image of a fighter. It uses the arcade physics mode. When I press the UP arrow, it goes right....

Code:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {
    game.load.image('background','../assets/images/deep-space.jpg');
    game.load.image('fighter','../assets/images/Human-Fighter.png');
}

var player;

function create() {

    game.add.tileSprite(0, 0, 1920, 1920, 'background');

    game.world.setBounds(0, 0, 1920, 1920);

    game.physics.startSystem(Phaser.Physics.ARCADE);
    
    player = game.add.sprite(game.world.centerX, game.world.centerY, 'fighter');
    player.anchor.set(0.5, 0.5);

    game.physics.arcade.enable(player);

    //  Notice that the sprite doesn't have any momentum at all,
    //  it's all just set by the camera follow type.
    //  0.1 is the amount of linear interpolation to use.
    //  The smaller the value, the smooth the camera (and the longer it takes to catch up)
    game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1);

}

function update() {
    player.body.velocity.x = 0;
    player.body.velocity.y = 0;
    player.body.angularVelocity = 0;

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
        player.body.angularVelocity = -200;
    } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
        player.body.angularVelocity = 200;
    }

    if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
        game.physics.arcade.velocityFromAngle(player.angle, 300, player.body.velocity);
    }
}

function render() {
    
}

If you can help, it would be greatly appreciated! Thanks!

Hi,

I am trying to control the motion of image with Pause & Play buttons in HTML5. I mean when the image is moving, I should be able to control its motion by using pause and play buttons using HTML5 code. Is there any possibility of doing this. If so, please send me the sample code for achieving this.

Hi,

I am new to phaser as well as game designing.
I created my first game as hobby using phaser.
it is working fine in desktop but lags very bad on mobile devices.
Images I am using for game is very small.
game is smaller that 2mb.
I am attaching my main.js file 

hope someone can help me.

thanks 

var buttetSpwanSpeed;
var bulletSpeed;
var enemySpwanSpeed;
var enemySpeed;
var golis;
var enemies;
var enemyLoop;
var scoreText;
var powers;
var bulletSize;
setStart();
//game phaser
var game=new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS,"gamearea");
var BootState={
	//loding accets
	preload: function(){
		this.load.image('LodingScreen', 'assets/desimulga.png');
		this.load.image('background', 'assets/blue.png');
	},
	create: function(){
		game.state.start("LoadingState");
	},
	
};

var LoadingState={
	//loding acc
	preload: function(){
		bg=this.game.add.tileSprite(0,0,600,300,'background');
		bg.height = game.height;
    	bg.width = game.width;
		LodingScreen=this.game.add.sprite(this.game.world.centerX,this.game.world.centerY,'LodingScreen');
		LodingScreen.anchor.setTo(0.5);
		LodingScreen.scale.setTo(0.5,0.5);
		this.load.image('spaceship', 'assets/player.png');
		this.load.image('goli', 'assets/bullet.png');
		//load ememies
		this.load.image('enemy1', 'assets/enemies/enemy1.png');
		this.load.image('enemy2', 'assets/enemies/enemy2.png');
		this.load.image('enemy3', 'assets/enemies/enemy3.png');
		this.load.image('enemy4', 'assets/enemies/enemy4.png');
		this.load.image('enemy5', 'assets/enemies/enemy5.png');
		this.load.spritesheet('power1', 'assets/power/bulletUp.png',34,33,4);

		this.load.image('restart', 'assets/restart.png');
		this.load.spritesheet('blast', 'assets/explosion.png',400,400,8);
		game.load.audio('fire', 'assets/music/bullet.mp3');
		game.load.audio('killed', 'assets/music/killed.mp3');
		//game.load.audio('bg_music', 'assets/music/background.mp3');
		game.load.audio('death_music', 'assets/music/death.mp3');
		game.load.audio('start_music', 'assets/music/start.mp3');
	},
	create: function(){
		game.time.events.add(Phaser.Timer.SECOND * 2, function(){
			bg.kill();
			LodingScreen.kill();
			game.state.start("PreGameState");
	},this);
	},
	
};

var PreGameState={
	//loding accets
	create: function(){
		game.scale.refresh();
		bg=this.game.add.tileSprite(0,0,600,300,'background');
		bg.height = game.height;
    	bg.width = game.width;
		Startb=this.game.add.text(this.game.world.centerX,this.game.world.centerY, 'TAP TO START' , { fontSize: '32px', fill: 'yellow' });
		Startb.anchor.setTo(0.5);
		Startb.scale.setTo(0.5,0.5);
		ship=this.game.add.sprite(this.game.world.centerX,this.game.world.height*0.4,'spaceship');
		ship.scale.setTo(0.4);
		ship.anchor.setTo(0.5);
		game.physics.arcade.enable(ship);
		bg.inputEnabled=true;

		start_music = game.add.audio('start_music');
    	start_music.allowMultiple = true;
    	start_music.addMarker('start_music', 0, 30);
		

		bg.events.onInputDown.add(function(){
			bg.inputEnabled=false;
			Startb.kill();
			start_music.play("start_music");
			// game.physics.arcade.moveToXY(ship, this.game.world.centerX, this.game.world.height*0.8, 300, 3000);
			// game.add.tween(ship).to( { y: game.world.height*0.8 }, 3000, Phaser.Easing.Sinusoidal.InOut, true);
			var tween = game.add.tween(ship).to({
			x: [this.game.world.centerX, this.game.world.width*0, this.game.world.width, this.game.world.centerX],
			y: [this.game.world.height*0.4, this.game.world.height*0.5, this.game.world.height*0.6, this.game.world.height*0.8],
			}, 2000,Phaser.Easing.Quadratic.Out, true).interpolation(function(v, k){
			    return Phaser.Math.bezierInterpolation(v, k);
			});

			game.time.events.add(Phaser.Timer.SECOND * 2, function() { 
				bg.kill();
				ship.kill();
				game.state.start("GameState");
			} ,this);
			
		}, this);
	},
	
};





var GameState={
	//loding accets
	preload: function(){
		

	},
	create: function(){
		//background
		this.background=this.game.add.tileSprite(0,0,600,300,'background');
		this.background.height = game.height;
    	this.background.width = game.width;
		this.background.inputEnabled=true;
		this.background.input.enableDrag(true);
		this.background.input.startDrag = function(pointer) {
		    pointer.shipStart = new Phaser.Point(GameState.ship.x, GameState.ship.y);
		    Phaser.InputHandler.prototype.startDrag.call(this, pointer);
		};
		this.background.input.updateDrag = function(pointer) {
		    GameState.ship.x = pointer.shipStart.x - pointer.positionDown.x + pointer.x;
		    GameState.ship.y = pointer.shipStart.y - pointer.positionDown.y + pointer.y;
		    GameState.background.x=0;
		    GameState.background.y=0;
		};
		//ship
		this.ship=this.game.add.sprite(this.game.world.centerX,this.game.world.height*0.8,'spaceship');
		this.ship.scale.setTo(0.4);
		this.ship.anchor.setTo(0.5);
		game.physics.arcade.enable(this.ship);
		// this.ship.inputEnabled=true;
		// this.ship.input.enableDrag(true);
		//score
		this.scoreText = this.game.add.text(16, 16, 'Kills: 0', { fontSize: '32px', fill: '#fff' });
		//background Music
		// music = game.add.audio('bg_music');
    	//music.play('', 0, 1, true);
		//bullet sound
		bullet_sound = game.add.audio('fire');
    	bullet_sound.allowMultiple = true;
		bullet_sound.volume=0.5;
    	bullet_sound.addMarker('fire', 0, 0.5);
    	//Killed sound
		killed_sound = game.add.audio('killed');
    	killed_sound.allowMultiple = true;
    	killed_sound.addMarker('killed', 0, 0.5);
    	//death music
    	death_music = game.add.audio('death_music');
    	death_music.allowMultiple = true;
    	death_music.addMarker('death_music', 0, 10);
    	//groups of bullets and enemies
    	golis=game.add.group();
    	enemies=game.add.group();
    	powers=game.add.group();
		//fire bullet loop
		fireLoop=game.time.events.loop(Phaser.Timer.SECOND*1/buttetSpwanSpeed, fireBullet, this);
		//this.game.input.onTap.add(fireBullet, this);
		//create ememy loop
		enemyLoop=game.time.events.loop(Phaser.Timer.SECOND*1/enemySpwanSpeed, createEnemy, this);
		//change ememy speed and enemy spwan speed loop
		enemySpeedLoop=game.time.events.loop(Phaser.Timer.SECOND*1.5, changeEnemySpeed, this);
		//give powerup
		powerUp=game.time.events.loop(Phaser.Timer.SECOND*20, powerFun, this);		
	},
	update: function(){
		//scrolling background
		this.background.tilePosition.y+=2;

		//keybord control
		if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
		{
			this.ship.y-=2;
		}
		if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
		{
			this.ship.y+=2;
		}
		if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
		{
			this.ship.x+=2;
		}
		if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
		{
			this.ship.x-=2;
		}

		//dont go out
		if(this.ship.y<0+this.ship.height/2)
		{
			this.ship.y=0+this.ship.height/2;
		}
		if(this.ship.y>this.game.world.height-this.ship.height/2)
		{
			this.ship.y=this.game.world.height-this.ship.height/2;
		}

		if(this.ship.x<0+this.ship.width/2)
		{
			this.ship.x=0+this.ship.width/2;
		}
		if(this.ship.x>this.game.world.width-this.ship.width/2)
		{
			this.ship.x=this.game.world.width-this.ship.width/2;
		}
		//check for collisions 
		game.physics.arcade.overlap(golis,enemies,b_e_collide,null,this);
		game.physics.arcade.overlap(this.ship,enemies,s_e_collide,null,this);
		game.physics.arcade.overlap(this.ship,powers,s_power1_collide,null,this);



		
	},
};


//setting start game conditions
function setStart(){
	buttetSpwanSpeed=2;
	bulletSpeed=2000;
	enemySpwanSpeed=1;
	enemySpeed=300;
	score=0;
	bulletSize=1.2
}

//fire bullet function
function fireBullet(){
	goli=this.game.add.sprite(this.ship.x,this.ship.y-this.ship.height/2,'goli');
	goli.anchor.setTo(0.5);
	goli.scale.setTo(bulletSize,1);
	goli.checkWorldBounds = true;
	goli.outOfBoundsKill = true;
	//adding to group
	golis.add(goli);
	game.world.moveDown(goli);
	game.physics.arcade.enable(goli);
	goli.body.collisonWorldBounds=true;
	goli.body.velocity.y=-bulletSpeed;
	bullet_sound.play("fire");
}
//create enemy function
function createEnemy(){
	enemyNo=game.rnd.integerInRange(1, 5);
	x1=game.rnd.integerInRange(0,this.game.world.width);
	x2=game.rnd.integerInRange(0,this.game.world.width);
	enemy=this.game.add.sprite(x1,10,'enemy'+enemyNo);
	enemy.anchor.setTo(0.5);
	enemy.scale.setTo(0.4);
	enemy.checkWorldBounds = true;
	enemies.add(enemy);
	enemy.outOfBoundsKill = true;
	game.physics.arcade.enable(enemy);
	enemy.body.collisonWorldBounds=true;
	enemy.angle=90;
	enemy.no=enemyNo;

	//moving enemy
	angleRedian=game.physics.arcade.moveToXY(enemy, x2, this.game.world.height+enemy.height, enemySpeed,0);
	angleDegree=angleRedian*57.2958;
	enemy.angle=90+angleDegree;

}

//runs when bullet collide to enemy
function b_e_collide(goli,enemy){
	//blast
	blast=this.game.add.sprite(enemy.x,enemy.y,'blast');
	blast.anchor.setTo(0.5);
	blast.scale.setTo(0.5);
	var explosion=blast.animations.add('explosion');
	blast.animations.play('explosion',30,false,true);

	//killing
	goli.kill();
	enemy.kill();

	//update scores
	if(enemy.no<4)
	{
		score+=1;
		killed_sound.play('killed');
	}
	this.scoreText.text = 'Kills: ' + score;
}
//runs when ship collide to enemy
function s_e_collide(ship,enemy){

	blast=this.game.add.sprite(enemy.x,enemy.y,'blast');
	blast.anchor.setTo(0.5);
	blast.scale.setTo(0.5);
	var explosion=blast.animations.add('explosion');
	blast.animations.play('explosion',10,false,true);
	ship.kill();
	enemy.kill();
	//music.stop();
	this.scoreText.kill();
	death_music.play("death_music");
	game.time.events.remove(fireLoop);
	game.time.events.add(Phaser.Timer.SECOND * 2, function() {    
		fianlScore = this.game.add.text(this.game.world.centerX,this.game.world.centerY, 'KILL: '+score, { fontSize: '32px', fill: 'yellow' });
		fianlScore.anchor.setTo(0.5);
		gameOverText = this.game.add.text(this.game.world.centerX,this.game.world.centerY - fianlScore.height, 'GAME OVER', { fontSize: '32px', fill: 'red' });
		gameOverText.anchor.setTo(0.5);
		//restart button
		restart=this.game.add.sprite(this.game.world.centerX,this.game.world.centerY + fianlScore.height+10,'restart');
		restart.anchor.setTo(0.5);
		restart.scale.setTo(0.05,0.05);
		restart.inputEnabled = true;
		restart.events.onInputDown.add(restartGame, this);
		game.time.events.stop();
	}, this);

}
//runs when ship collide power1
function s_power1_collide(ship,power){
	power.kill();
	game.time.events.remove(fireLoop);
	fireLoop=game.time.events.loop(Phaser.Timer.SECOND*1/10, fireBullet, this);
	game.time.events.add(Phaser.Timer.SECOND * 10, function(){
		game.time.events.remove(fireLoop);
		fireLoop=game.time.events.loop(Phaser.Timer.SECOND*1/buttetSpwanSpeed, fireBullet, this);
	},this);



}


function changeEnemySpeed()
{	
	if(enemySpeed<=900)
	{
		enemySpeed+=5;
	}
	if(enemySpwanSpeed<=3)
	{
		enemySpwanSpeed+=0.025;
	}
	enemyLoop.delay=Phaser.Timer.SECOND*1/enemySpwanSpeed;
}

//send power up
function powerFun()
{
	x1=game.rnd.integerInRange(0,this.game.world.width);
	x2=game.rnd.integerInRange(0,this.game.world.width);
	power=this.game.add.sprite(x1,10,'power1');
	power.anchor.setTo(0.5);
	var shine=power.animations.add('shine');
	power.animations.play('shine',5,true,true);
	power.checkWorldBounds = true;
	power.outOfBoundsKill = true;
	powers.add(power);
	game.physics.arcade.enable(power);
	power.body.collisonWorldBounds=true;
	game.physics.arcade.moveToXY(power, x2, this.game.world.height+power.height, 400,0);
	powerDelay=game.rnd.integerInRange(20,35);
	powerUp.delay=Phaser.Timer.SECOND*powerDelay;
}



function restartGame(){
	setStart();
	game.time.events.start();
	game.state.start("PreGameState");	
}



game.state.add("GameState",GameState);
game.state.add("BootState",BootState);
game.state.add("LoadingState",LoadingState);
game.state.add("PreGameState",PreGameState);
game.state.start("BootState");

main.js

Very new to Phaser and reading as much as I can before committing to using it as my game development system.

My goal is to alternate views, a bit like VR, from one eye to the other. I have done this before by setting specific colours for backgrounds (x2) and Sprites (two colour versions). Person uses Red Green filters to limit view to each eye. In the past I have page flipped (RE screen drawn, then LE screen drawn) which I know is not needed in Phaser. I can just change background colour  for each screen refresh which will do the job.

But this introduces a potential new problem as I need to hide objects / sprites from each aye alternately as background colour changes. Am thinking I could alternate "visible" for sprites that I do not want seen in alternate cycles. Question is, will collisions be detected with an invisible object? Goal is to teach both eyes to work together but while playing a simple retro style game.

Another option would be to redraw sprites to be hidden in the background colour. I saw this as an option in in the examples but don't know how resource intensive this will be. Only four colours can be used in the design process. Two for backgrounds, two for sprites. Each eye only responds to two colours.

Does anyone know if this could work? A better workaround? Just thought about the depth positioning. I could place the ones to be hidden behind the background?

Can I set two layers, one drawn for RE and the other for LE and then just move one forward and back as required? Thinking this might be easier to code as sprites will be children of each layer? Again will collisions be detected?

Thanks

So I'm testing out collision and keyboard input right now and my application looks like this:

When I press and WASD key, I get this:

As you can see, it keeps drawing the square over and over. Here is my code:

function gameLoop(timeStamp) {
  var delta = timeStamp - (lastTime || timeStamp);
  if(aPressed){
      player.x -= player.speed * delta;
  }
  if(dPressed){
      player.x += player.speed * delta;
  }
  if(wPressed){
      player.y -= player.speed * delta;
  }
  if(sPressed){
      player.y += player.speed * delta;
  }
  window.requestAnimationFrame(gameLoop);
  lastTime = timeStamp;
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  playerObject = ctx.fillRect(player.x, player.y, player.width, player.height);
  collisionObject = ctx.fillRect(collisionBox.x, collisionBox.y, collisionBox.width, collisionBox.height);
  collision(player, collisionBox);
}
window.requestAnimationFrame(gameLoop);

You might wonder 'okay, just take the playerObject and collisionObject out of the loop'. Actually, it isn't that easy. If I did do that, ctx.fillRect would be undefined. If I took took the canvas and ctx code out, the screen won't update. If I took the code from the canvas line to the collisionObject line, nothing would happen.

How am I supposed to fix this?

So I'm making a prototype for a game, and I want to add a collision system to it. I have the detection part down:

function checkCollision(rect1, rect2) {
  if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
  }
}

And I don't want the player to move past the rectangle it's colliding with. If I were to type to type 'player.x += 0' or 'player.speed = 0', it would just stop the player from moving regardless if I press WASD. How would I make it so that my player can't move through objects?

Hi there. Apologies if this has been asked before but I couldn't find an answer. I'm looking to create a visible grid on a layer of a tilemap.

I could draw 2d lines on top of the layer but I'd much rather if I could have black layer underneath a ground layer and with that ground layer having a 1pixel margin between each tile on the grid.

Hope this makes sense.

Example of what I'm going for:

I'm developing simple game in TypeScript and HTML5 using Phaser. It is targeting to all major platforms (Android, IOS and UWP) and standalone web page. I've added basic keyboard implementation for player movement using Phaser engine implementation :
this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
this.rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT); 
and after testing I've noticed strange input behavior in UWP native solution. The keyboard seems to lag.
After searching solution I find this page https://docs.microsoft.com/en-us/windows/uwp/get-started/get-started-tutorial-game-js3d  where I find recommended keyboard support in UWP apps using JavaScript (chapter 5 Adding player movement) . 
document.addEventListener('keydown', this.onKeyDown.bind(this), false);
document.addEventListener('keyup', this.onKeyUp.bind(this), false);
But after implementing it the problem still exist. Application seems not respond for events immediately, don't getting events at all or getting it in wrong order. This situation is occurs only in UWP app, in all other platforms movement works great.
I even downloaded and test game from link above and noticed the same keyboard issues. 
Does anyone know solution to  this problem or what causes it? 
Thanks!

Has the Unity web exporter improved in the last year? Thinking about using it for a project but the last time I checked it wasn't fit for purpose..

Greetings all - I've been working on an SVG editor and variations generator for some time, and I finally launched the beta this week - we have some really beautiful game art - over 500 of the CC0 pieces from Kenney.nl, and 400 of the best Glitch game art pieces - and more.  The editor has over 33,000 graphics including a bunch of icons and emojis - and right now I'm offering a free upgrade to pro for game developers - the upgrade URL is https://www.kwippe.com/app.html#upgrade_beta - with the code betauser

I would love any feedback or suggestions about how to make this app BETTER for game developers! I am a long time flash dev who morphed to JS about 5 years ago, and spent a while working on my first all gamified app using Pixijs last year.  I've tried to add ways to edit SVGs as painlessly as possible, as working in Illustrator for hours on end tends to make my hand hurt! But there are many fixes and upgrades I plan to make to the app, so please realize it's just a beta.

So I created a player object:

function Player(x, y, width, height, speed, context) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.speed = speed;

  this.create = function() {
    context.fillRect(this.x, this.y, this.width, this.height);
  }
}

And I created it in my draw() function:

function draw() {
  var canvas = document.getElementById('mainCanvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    var player = new Player(0, 0, 50, 50, 3, ctx);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    player.create();

    if (upPressed == true) {
      player.y -= player.speed;
    }
    if (downPressed == true) {
      player.y += player.speed;
    }
    if (leftPressed == true) {
      player.x -= player.speed;
    }
    if (rightPressed == true) {
      player.x += player.speed;
    }

    requestAnimationFrame(draw);
  }
}

draw();

But for some reason, my player is still not moving. Is there something I'm missing, or should have done better?

Hi all - new to the forum! I've been working on something recently and had to use a bit of a wonky (slow) workaround to get the desired effect and was wondering whether anyone here had had the same issue.

I'm finding it difficult to blend two images together using a bitmask without first rendering the results to a separate canvas, then drawing the blended image from the other canvas to the 'main' canvas.

All my images are the same rectangular shape, and also the same size. For simplicity let's say that the first image is solid blue and the second image is solid green. The bitmask image is a left-to-right gradient ranging from transparent to solid black.

What I'm trying to achieve is to make the green image transition into the blue image without, as I say, using a separate canvas and then transplanting the result into the main canvas. Here's the JS that I'm using at the moment to achieve this in a separate canvas:

context.drawImage(sprites, 96, 0, 32, 16, 0, 0, 32, 16);  // Draw bitmap image
context.globalCompositeOperation = 'source-in';
context.drawImage(sprites, 0, 0, 32, 16, 0, 0, 32, 16);   // Draw green image over the bitmask 
context.globalCompositeOperation = 'destination-over';
context.drawImage(sprites, 32, 0, 32, 16, 0, 0, 32, 16);   // Draw blue image under the current canvas content

I should probably mention that all my sprites are in a single image referenced by 'sprites'.

The reason why I'm forced to use a separate canvas is because I need to *first* render my bitmask on a transparent canvas (which my main canvas isn't, there's a solid background colour) in order to retain the bitmask's transparency. In this contrived example I could just create a transparent image sized gap in the correct region of the main canvas, then perform all my operations there. This is fine when the shapes I'm rendering cover the entire sprite rectangle, although I have a case where I'm rendering circle & diamond shaped sprites and this would result in transparent gaps appearing around the resulting shape in the canvas.

I've been referencing this article in my use of 'globalCompositeOperation':

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Am I approaching this in a reasonable way or is there a better tactic to achieve this?

Hi guys,

This will be the place where I will keep you up to date you on the latest Playniax game engine called Pyro!

You can find it onitch.io

Pyro is ideal for building 2D games and other interactive graphical driven applications.

Pyro apps run on WINDOWS, OSX, LINUX, IOS, ANDROID and HTML5!

And... It's FREE!

Here is a game made with Pyro

I'm testing some stuff in javascript, including getting the mouse position when in a canvas. I decided to try something; I wanted to draw a rectangle at the position the mouse clicked on, but when I click anywhere on my canvas, the rectangle does draw at the X position of the cursor, but not on the Y. I then went to see what the problem was, so I made it so that the coordinates of the mouse on the canvas were visible, and I got interesting results.

In short: it's telling my cursor's Y position was 0, even though it wasn't at the bottom of the canvas. Here is my code:

ctx.canvas.addEventListener('mousemove', function(event) {
  var mouseX = event.clientX - ctx.canvas.offsetLeft;
  var mouseY = event.clientY - ctx.canvas.offsetTop;
  var status = document.getElementById('status');
  status.innerHTML = mouseX + ' | ' + mouseY;
});

ctx.canvas.addEventListener('click', function(event) {
  var mouseX = event.clientX - ctx.canvas.offsetLeft;
  var mouseY = event.clientY - ctx.canvas.offsetTop;
  item.drawItem(mouseX, mouseY);
});

What is the problem?

https://jsfiddle.net/Static_Cloud/0oc9L2nd/

What I'm trying to accomplish:

I want each square to disappear and get added to my 'inventory':

(When I create the squares and add them to the items list (list of items already in the room)).

var item1 = new item('Rock', ctx);
item1.drawItem(50, 50);
var item2 = new item('Paper', ctx);
item2.drawItem(150, 200);
var item3 = new item('Scissors', ctx);
item3.drawItem(200, 250);

var items = [item1, item2, item3];
var inventory = [];

(When they get added to my inventory)

function mouseClickHandler(event) {
  click.innerHTML = mouseX + ' | ' + mouseY;
  for (var i = 0; i < items.length; i++) {
  	if (mouseX > items[i].x & mouseY > items[i].y &
  		mouseX < items[i].x + items[i].width & mouseY < items[i].y + items[i].height) {
      inventory.push(items[i].name);
      inv.innerHTML = inventory;
      items[i].removeItem();
      items.splice(i);
      break;
    }
}
}

What I'm getting:

When I try clicking on any of the squares, only one gets added and the others do nothing on click. Sometimes, if done in a specific order, they all get added, but there is still the problem of them doing nothing on click.

Hello colleagues, it is a pleasure to greet you and introduce me as I have just joined this community and I do not want to create this post without first introducing myself, my name is daniel rodriguez and I am a student of engineering in computer systems in Mexico, greetings to all.

Well recently I have the curiosity to make a MMORTS, I explain, I play a mmorts called grepolis some of you have gone through it, my doubt is what framework would help me to design and create a game of this type and what initial steps I have to give for the design of video games in html5 I have basic knowledge in JavaScript html and css, is there  be a tutorial of something similar to this game 

If someone would like to make a similar one or do not know how are the mechanics I can break them down. Another example of this game is travian

Grepolis http://us.grepolis.com
Travian https://www.travian.com/us

I'm currently experimenting making an inventory system in JavaScript in preparation for hopefully making a point and click game. I've tried a few approaches, but they did not work, at least not well enough. So I was wondering if anyone would share their input in regards to what they would to implement something like this.

Here is the fiddle I've been using to experiment with this: https://jsfiddle.net/Static_Cloud/0oc9L2nd/5/