HunorBorbely

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.

Day 24 is a basic example of React + SVG. Once you get the basics of React you can just start coding images based on this tutorial.

Thank you. The whole project actually started as an advent calendar. Then I started thinking okay, what should be the content of it :)

True. When you make art with CSS then you don't start with Illustrator either

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?

Added a Table of Contents below. Probably it helps SEO as well :)

Lol :) Maybe I should just put this below the calendar. What do you think?

Ouch. Some browsers might not support every feature. Gradients also have some issues. Luckily it seems to be all right so far in desktop browsers.