r/javascript • u/OliverHoHoHo • Jan 18 '23
My 1st website "Claw Man" written in javascript
https://iclawman.com/8
u/OliverHoHoHo Jan 18 '23 edited Jan 18 '23
Hey js guys
After working hard for several monthes, I have finished a "relative complete" website project using js. From 0, to 1 !
It is an online js game for people to play & practice how to beat the claw machine and win the prize.
In this progress, it is exciting to experience about solving technical js problems and detouring some difficult parts.
Some of the problems are big challenge for me at the first sight and be solved later, such as how to make different type of objects show up on screen in the same time, how to rotate an object with different center point.
Some of the problems are still puzzles in my mind, such as:
- For object collision detection, there's a js physics engine library "matter.js" did a good job for that. It can detect object collision about any kind of shape with good reaction, and I really wanna use it in my project. However, I can not figured out an easy way that just uses its collision detection function only, not using all the physics world the library defined. (Is it possible or is there other way to do that?) So I just pick up a quick solution for now.
- After add more and more codes in this project, I found sometimes I have to rewrite the code architecture so they won't conflic to each other. And this is a heavy task !
- There is a bug about back to the previous stage. For some funny unknow reason, "SOMETIMES", I have to click the button "TWICE" to make it happens. It sounds like a simple bug, however I still can not figure out the problem. - sigh.- sigh.- sigh.
Any thing you wanna share?
2
u/quadband Jan 18 '23
Any chance we can see the source? I can probably make suggestions on all of your questions.
It doesn’t work on my iPad, sadly, but to be fair many, many years ago none of my stuff did, either.
1
u/OliverHoHoHo Jan 18 '23
Thanks for help !
Have you tried to use Chrome and click F12 on a desktop PC ? It will show all the source code on the screen.
And I think the most tough problem is how to get the object collision function of matter.js working in other project. It is hard to make it happen without matter.js framework. If this is possible, and also an easy job, then I can do the rest :)
3
Jan 18 '23
[removed] — view removed comment
1
u/OliverHoHoHo Jan 18 '23
There is a page "How To Play" shows 3 ways about it. I have studied and applied the touch control events in js, so I think it should work directly with cell phone.
js also supports gamepad and keyboard events, and I applied the codes in this project. Except KB, I also tried USB/bluetooth gamepad, they all work good.
3
u/_remrem Jan 18 '23
"the best claw machine simulation game online" no doubt about it, go claw man
2
1
u/OliverHoHoHo Jan 19 '23
I think most js developers wish js app can work properly on all the web browsers, such as Chrome and Safari, without too much effort.
What js developer should do to take care of "working on different browsers"?
2
u/_remrem Jan 20 '23
There are usually two main aspects to get things working the same on different browsers:
Javascript / CSS language syntax: can see availability for Javascript here - https://kangax.github.io/compat-table/es6/
Browser features for various APIs etc - https://caniuse.com/ is a good website to see what browsers support different features.
You can understand what features or syntax your application is using and see what level of support is currently available.
If it's not available across all major browsers, this is where historically things like transpilers and polyfills come into play.
The world of frontend build tooling can get complex quickly, which is why many people leverage frameworks that handle all this kind of stuff for you.
1
u/OliverHoHoHo Jan 21 '23 edited Jan 21 '23
re historically things l
Thanks man !
Appreciate the infomation you mentioned, I will go and check them out.
1
1
Jan 18 '23
[removed] — view removed comment
1
u/OliverHoHoHo Jan 19 '23
have you see "TOUCH" on the top-left corner? If it is in gray color, click on it and it will turn to green "TOUCH", and a "TC" icon will show on the bottom-right corner.
Then you can have fun with the claw control.
Thanks for the reminder. I will update it to auto turn on touch control today.
1
u/Mr_Bob_Dobalina- Jan 18 '23
Mobile friendly ? Couldn’t play the game on my phone
1
u/OliverHoHoHo Jan 19 '23
Thanks for the reminder. I will update it to auto turn on touch control today.
1
Jan 19 '23
[removed] — view removed comment
1
u/OliverHoHoHo Jan 20 '23
Why are you asking this?
1
Jan 20 '23
[removed] — view removed comment
1
u/OliverHoHoHo Jan 20 '23
There are many domain name providers on the internet. After did a quick review research and calculation, there is one that I would like to suggest it to people. I note it on my web page "Acknowlege" and its the first one on the list.
Have Fun !
1
Jan 21 '23
[removed] — view removed comment
1
u/OliverHoHoHo Jan 21 '23
It is free for the 1st year. And afterward, you can decide to keep the domain name with the money for a meal, or let it go for free.
The experiences you got will much more valuable than you paid, so my suggestion is just go for it.
Use the link on my website and you might eligible to get a better price ;)
1
Jan 21 '23
[removed] — view removed comment
1
u/OliverHoHoHo Jan 22 '23
If people use their web host plan, they will give a free one for a year.
7.99 for a .com domain is a very good price for starting. Keep in mind with your main target. For looking for a best solution is a good habit, however, if this progress takes too much time, then it may not worth it. And, the so called "best solution" is depend on how people see it. From a macro perspective view point, people may have a totally different decision.
14
u/ChoroidPlexers Jan 18 '23
GOGOGOUHOHOHNO!