This content originally appeared on DEV Community and was authored by Glenn Tippett
So it's a bit rainy today, can't go outside - so I thought maybe I'd play some archery inside... JS style!
Here is the CodePen:
https://codepen.io/glenntippett/pen/XWpVGQP
I won't go into too much detail here, I'll let the CodePen do the talking but if you have any questions please comment.
There's a lot of ways this could have been done and this was just a quick throw together so it's not perfect - and please don't open on mobile unless you want Internet-Explorer-design-style flashbacks.
The target itself is just one </div> tag utilising the box-shadow property to give that multi-color effect.
The position of the arrow hitting the target is determined by some Math.Random() calls to set the X and Y position on the target.
The plusOrMinusOdds is calculating that 50% of the time the posOrNeg variable will be either a - or a +.
This is pre-pended to the pixel value to allow the arrow to land either side of the middle of the target.
I ran into some issues when viewing on a larger screen so I gave the body a max-width to help with this.
The game also looks best if you click 'Reset' between each shot, so the arrow goes off-screen and comes back. Otherwise the arrow just does this weird glide thing...
I may come back to this at a later date to fix the bugs and implement a few other features like a score counter, sound effects etc.
Until then, enjoy!
This content originally appeared on DEV Community and was authored by Glenn Tippett
Glenn Tippett | Sciencx (2021-04-11T04:48:42+00:00) Vanilla JavaScript Archery Game. Retrieved from https://www.scien.cx/2021/04/11/vanilla-javascript-archery-game/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.