Making Vampire Attack 2020

 Vampire Attack was a simple Halloween game I wrote in Flash a long time ago. This revision of the game is just like the original Flash version except that instead of having 13 waves of attacks, I opted for an infinite attack with the spawn rate of the bats slowly growing until it becomes overwhelming. The big concern I had with porting the game is that the current versions of my SLL library do not support rotation. This meant I had to decide between using a library like Create.js that does support rotating sprites, adding that feature to SLL, or writing the game from scratch. Obviously the third option would be insane, so that is what I opted to do. In my defense, that was not my original plan it is just what ended up happening.

My thoughts when starting on this game was to play around with rotation to see how it worked and if it was not going to be overly complicated then I would incorporate it into SLL but in the unlikely even if it was going to be overly complicated then use Create.js as a last resort as this Is a personal project so my NIH Syndrome is welcome here. I had never played with rotation but recalled reading about it in the canvas specifications. The problem with the WHATWG documentation (https://html.spec.whatwg.org/multipage/canvas.html ) is that trivial things, such as rotation as it turns out, tends to be made to sound far more complicated than they are and finding out trivial things, such as how to set the origin that the rotation revolves around, tend not to be trivial to find. Perhaps it is just me, but translate(x,y) is not the obvious way to change the origin of rotation. I suppose it does make sense in a mathematical sense, but I am a programmer because I am not great at mathematics (and all of the problems I am having in Graduate School are due to my lack of math skills). Needless to say I started playing around with trying to rotate a rectangle as shown in the code below. Really, not very difficult. You just set the translation to your origin point then set the rotation (in radians) and then draw the object relative to the new origin.

        ctx.save();
        ctx.fillStyle="#F00";
        ctx.fillRect(50,50,50,50);
        ctx.translate(75,75)
        ctx.rotate(Math.PI/4);
        ctx.fillStyle='#00F';
        ctx.fillRect(-25,-25,50,50);
        ctx.restore();

Once I figured out how to rotate a rectangle properly, I wanted to get the code working with  images. As I already knew that for the game’s graphics I was just going to use the Flash game’s assets that were exported as an image map so I just needed to modify the json code to use my own vastly condensed format. My older Halloween Liche port had the code to handle the format already so to speed up testing I just used the code from this. I quickly had bats on the screen and a rotating player. Implementing shooting and moving bats was not hard and the next thing I knew, there was a nearly finished game.

A bit of fine tuning and we have our Halloween game for this year completed. The source code is being added to my repository at https://github.com/BillySpelchan/BlazingPorts . Enjoy.