Recommended Posts

Hello guys, my newest browser game is called "Rabbit Warrior" and is optimized for mobile devices but works on desktop just as well of course:

"Enter the world as the courageous Rabbit Warrior, equipped with sword and hammer! Protect the core from the demons and activate all the shrines to complete each level. Pick up hidden weapons that enable unique attacks and unlock increasingly difficult levels and even new skins if you reach 3 stars."

Game link:


Game features:
- Click to move controls
- 5 different levels
- Reach 1 to 3 stars for each level completion
- 4 unlockable skins (if you reach 3 stars in a level)
- Created with Phaser.JS

Since it's optimized for mobile, movement is click-to-move and clicking on a weapon button to activate the skill.
However, on the desktop you can also use the keyboard buttons 1 to 3 to activate the weapon skills while using the mouse to click-to-move.

Game link:

I hope you like the game and thank you all for checking it out!

Share this post

Link to post
Share on other sites

belive me you don't need to minify them because code readers will enjoy it like it is ;)

and, you can play with google analytics instead but it's true that minifying gives to the game a certain style

so i am looking how the files can be cleaned up

i have this little project i am working on but as the licence is important it's in stand by mode but many parts of the tilset can be used

Share this post

Link to post
Share on other sites
14 minutes ago, thefailtheory said:


hi ! back to the game i am searching for the function that you can use for clicking on the tilemap

It's in the Player.js prefab in the walk() and setPath() methods. Prerequisite is a tilemap with a collision layer though which is generated in level_play.js in the createWorld() function.

Share this post

Link to post
Share on other sites
1 minute ago, thefailtheory said:

so how do you handle the click on the tilemap ?

- I take the standard onInputDown event anywhere on the game screen and add the camera x and y coordinates to the pointer x and y coordinates. All it does is it gives the point in the game world where the user clicked (as opposed to where the user clicked on the canvas)
- Then I convert the pixel position of the mouse click into its corresponding grid position by simply dividing it by the tile size in the game: Math.floor(pointer.x / tileSize);
- Then I use astar pathfinding to calculate the path from the current player grid position to the clicked grid position. (If you don't want to do your own astar path finding you can use easystar.js but in my case easystar wasn't returning exactly the kind of array I needed so I just wrote a very basic astar pathfinding algorithm. You can use it for yourself too but it's not well commented so you'd be better off reading the easystar files to be honest.)
- So astar returns an array of grid squares as the path. This path is saved in the "path" property inside the "player" instance.
- Then the player instance simply moves along this path until it reached the target square.

If the user clicks again while the player is moving, the current path array is set to null and the whole process is repeated and then the player instance's path property is updated again with the new path array.

10 minutes ago, thefailtheory said:

ihope i can test it with phaser isometric too

I guess the logic would be the same in an isometric game but I have never done it for an isometric world.

Share this post

Link to post
Share on other sites
7 hours ago, thefailtheory said:

now i am stuck with : this.levelData :mellow:

it's used in every call to create()

levelData is simply an object that holds all the necessary information of the current level: the tilemap, the shrines & weapons in the world, the skin the user is currently wearing etc.

Every time the user navigates the level / skin selection in the main menu, the levelData object is updated and is then accessed in level_master.js, level_intro.js and level_play.js to load and build the level correctly.

So that different states can access the same levelData object, it is passed along in the Phaser state change methods: game.state.start(); For example in main_menu.js inside startGame(). That's why you see it in all the create() or init() calls as this is where levelData is passed over from the previous state.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.