How to resize wall on hit

[sendmenas]

Hello,

I am working on a "NES Battle City" clone with Phaser3 and I can not figure out how should I resize a wall on bullet hit.

What I want to achieve is that on bullet hit part of the wall is destroyed. I tried to find something similar in tutorials but I couldn't. The closest thing I came up with was to use "setCrop()", but it only changes the size of the image, and the wall object size stays the same, so this does not work.

Can anyone point me in the right direction how should I do it?

My code is here - https://github.com/sendmenas/Tanks/blob/master/script.js

Demo - https://sendmenas.github.io/Tanks/index.html

Who is not familiar with this game, you can check it here - http://emulator.online/nes/battle-city/

 

[geeksesi::javad();]

Hi,

i think.. you can make define 2 pic

one : the big wall

two : the small wall

after shot hide big wall and replace small wall

tip : maybe it's not good idea but it word

 

[sendmenas]

This is one of the options, but as the wall will have ~9 possible stages, I was wondering if there is a possibility to manage it in another way than defining separate pic for it. I was playing around with the sprite length and height, but it does not change when I try to set it (I tried to make the update of an item after that, with no luck).

[geeksesi::javad();]

i'm new to phaser and maybe my answer not true..

but i think in html ( mean css ) change size of a object is not recommended.

i think if you make small wall is better than resize a wall

means:

for example now your wall size is 9*9(for example) and when tank is shoting you want remove 3*3 size of wall ( you want to resize that big pic to a smaller pic)...

i said way you do this ? make 3*3 wall pic and if tank shot you remove ( hide ) that's 3*3 object....it's better than resize a wall 

( sorry about bad english writing...i hope you understand my meaning )

[sendmenas]

Thank you for the help. Still, would be great to have other opinions from other developers as well, it feels like I might need other ways to do the similar things it the future.

[sendmenas]

After a few days of trial and error I came up with this solution, maybe it will help someone in the future.

 

	bulletBrickHit(bullet, brick) {
	    switch(bullet.direction) {
	        case 'up':
	            brick.setCrop(0, 0, brick.body.width, brick.body.height - 25);
	            brick.setSize(brick.body.width, brick.body.height - 25);
	            break;
	        case 'down':
	            brick.setCrop(0, 0, brick.body.width, brick.body.height - 25);
	            brick.setSize(brick.body.width, brick.body.height - 25);
	            brick.y += 25;
	            brick.body.y += 25;
	            break;
	        case 'left':
	            brick.setCrop(0, 0, brick.body.width - 25, brick.body.height);
	            brick.setSize(brick.body.width - 25, brick.body.height);
	            break;
	        case 'right':
	            brick.setCrop(0, 0, brick.body.width - 25, brick.body.height);
	            brick.setSize(brick.body.width - 25, brick.body.height);
	            brick.x += 25;
	            brick.body.x += 25;
	            break;
	    }
	    if (brick.body.width == 0 || brick.body.height == 0) {
	    	brick.disableBody(true, true);
	    }
	    
	}