In this advent calendar-themed tutorial, you will learn the fundamentals of Scalable Vector Graphics (SVG), from the basics to advanced concepts like animation and interactivity.
In this JavaScript Game Tutorial, we code a modern version of the 1991 classic game, Gorillas!
This tutorial is both a JavaScript Game Tutorial and an introduction to the HTML Canvas elements. First, we learn how to draw on a Canvas element with JavaScript. How to draw the background, the buildings, the gorillas, and the bomb.
Then we add interaction. We add event handlers, we cover how to aim, how to animate the bomb across the sky, and how to detect if the bomb hit the enemy or a building.
In the end, we also add AI logic for the enemy gorilla, so you can play against the computer.
Yes, I was thinking of fixing the second point, but then I was annoyed with it and left it like that. If I knew that it blows up here on Hacker News I would have fixed it.
I'm not sure where you see horizontal scrollbars though. Are you on Windows?
It's an interesting point. Writing tutorials like this also made me realize what's the difference between a function property and a function argument. I just used them completely interchangeably before. So element is more accurate here?
The funny thing about writing tutorials like this as a non-native speaker myself is also googling how to call things like the "clapper". I also didn't know what it was called before writing this article.
Thank you for the great feedback, I really appreciate it. I fixed some errors you found. Let me know if something still doesn't work. It's still a bit in the process of fine-tuning.
For instance, does anyone know why the thumbnail preview does not work on Twitter? It works with the sub-pages.
Totally. There are many cases when HTML Canvas is way more performant, but if you don't build the next Figma, then working with SVG is way more convenient
Okay, I fixed the links to the interactive demos (somehow deep links do not always work on that site, probably because it's made with Vue). I don't see the problem with bio.link. What issue do you see?