Rotating a Sprite back to original position

Recommended Posts

I am trying to make a gate that opens when you click on it, and rotate it 90 degrees. I have accomplished this much, but how do I make it go back to it's original position once I click on it again?

For instance: *clicks on gate, gate opens, 90 degrees.* *clicks on gate again, gate closes, -90 degrees from the 90 degrees that it went on previous click*

Any help would be appreciated! 


<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
      html {
        background: black
      canvas {
        margin: auto;
    <script src="phaser.js"></script>
		<script src="game.js"></script>


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

function preload() {

    game.load.crossOrigin = 'anonymous';

    game.load.image('gateopen', 'fenceleft.png');


var sprite

function clickSprite() {
    sprite.angle += 90;


function clickGame() {


function create() {

    sprite = game.add.sprite(100, 100, 'gateopen');
    sprite.anchor = {x: 1, y: 1}
    game.inputEnabled = true;
    sprite.inputEnabled = true;

function update() {


function render() {

  game.debug.bodyInfo(sprite, 32, 32);



Share this post

Link to post
Share on other sites

You could have a boolean to determine the state of the door (open/closed) then do something like: 

function clickSprite() {
    isOpen = !isOpen;
    sprite.angle = isOpen ? 90 : 0;



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.