HTML5/Canvas | Portal 2 style animation

Question

Hi there,

I'm happy to share with you my first test with canvas.

https://code.sololearn.com/Wen965eIRDOU/?ref=app
(search Portal 2 in the code section)

If some of you got ideas about how to improve my code or detect some bad practice inside my script (which I'm still writting) I would be super happy to get your feedback.

P.S: Each run provide a different wall setup so keep restart :D

Answer 1

That click sound reminded me of a glitch music by Alva Noto ("U_07").
It seems to have a lot less of lag effect (on Android - Samsung Galaxy S6), nice update !

Answer 2

Yeah I just update it with sounds :3

Answer 3

I have update my code, changed many part and especially created a basic animation queue system =)

Answer 4

Awesome !

Answer 5

Merci Nicolas!

Answer 6

In your CSS stylesheet, line 102 - 103 , you define background position-x and -y which I think doesn't exist. Shouldn't it be "background- position 50% 51%" in one line ? With first value determining x position and second position ?

Answer 7

There are few "mistakes" but you already corrected some of it. Like line 241 in your JS sheet, useless semicolon.
Line 301 in JS (yes man, I read it ALL), it detects too many errors. I'm not advances enough in JS to understand why, perhaps you will.

Answer 8

Thanks for your feedback Nicolas!

About the CSS you can write it both ways but under Firefox it's not supported the way I wrote it.
I forgot to remove the CSS propriety it won't even work since I use background-size: cover;
Thanks!

About the javascript
I have clean semicolons now, I didn't see them... must be some dirty that remain after many code editing.
About the line 301 I don't know what is the problem...
Anyway I'm really happy that you took time to have a look, hope it was interesting for you :)

Answer 9

I learnt a lot on your Javascript sheet ! I began only 2 days ago. Some statements are still mysterious for me but I'll figure it out.

Answer 10

That's right, I didn't really change the result but if you can see the difference compare with previous version, I have rewrite to optimise many small details to try to improve the script reading speed.
At the begining I change all var declaration, group all empty var together inside one var declaration. I removed many blank spaces to compact the code. But the biggest is still I have rewrite all the animation part to split it in many small functions... learnt so much by writting this code and trying things.
One thing I still didn't find the trick is how to optimise the shadow blur. If I turn on the shadow it's much more realistic but FPS are killed... I think it has another possibility that use shadow blur and give a shadow effect while keep FPS... hmmmmmMmmmm *thinking*

Answer 11

Maybe play with shape's border thick and make it almost black while it's animate will simulate a shadow and because it's not blur it might do the trick... hurry to be tonight to try :D

Answer 12

I have update a little bit the code to improve performances/correct small bugs and changed the background image to be more in the theme.

Answer 13

Just ask, I would be happy to light parts where you feel mysterious.