[Phaser] Rabbit Warrior

[jamespierce]

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: http://browsergameshub.com/RabbitWarrior/

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

Controls:
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: http://browsergameshub.com/RabbitWarrior/

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

[nazimboudeffa]

i like it a lot, nice work

[jamespierce]

@thefailtheory thank you so much

[nazimboudeffa]

i am reading the code it's very interesting to see how you did it

[jamespierce]

@thefailtheory some parts are not cleaned up >.< but it is generally well commented and the files are not minified either!

[nazimboudeffa]

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 http://asciimulation.link/zeldajs but as the licence is important it's in stand by mode but many parts of the tilset can be used

[nazimboudeffa]

bed time

[jamespierce]

2 hours ago, thefailtheory said:

bed time

Good night mate! Yeah I had already checked out the URL on your profile, the last link is my favorite

[nazimboudeffa]

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

[jamespierce]

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.

[nazimboudeffa]

very interesting, ihope i can test it with phaser isometric too

so how do you handle the click on the tilemap ?

oh i see it's in the create method

		// Mouse click events
		this.game.input.onDown.add(this.setPath, this);

 

[nazimboudeffa]

now i am stuck with : this.levelData

it's used in every call to create()

[jamespierce]

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.

[jamespierce]

7 hours ago, thefailtheory said:

now i am stuck with : this.levelData

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.

[nazimboudeffa]

i am trying to make a little level to test the click functionality

here http://asciimulation.link/zeldajs/RabbitWarrior/

[nazimboudeffa]

and taking a little break

 

[jamespierce]

@thefailtheory sorry for my late reply, I had family for visit today. Looks like your click-to-move implementation has worked out perfectly!