57 lines
2.8 KiB
HTML
57 lines
2.8 KiB
HTML
<article>
|
|
<header>
|
|
<h2>About This Project</h2>
|
|
<p>About three years ago(2018) I created a pong game that used Scalable Vector Graphics(SVG) for
|
|
the graphics instead of a traditional HTML canvas. This is its story.
|
|
</p>
|
|
|
|
<p>Some resources related to SVGs.</p>
|
|
<ul>
|
|
<li><a href="https://www.wikipedia.org/wiki/Scalable_Vector_Graphics">Scalable Vector Graphics (Wikipedia Article)</a></li>
|
|
<li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG: Scalable Vector Graphics (Mozilla Documentation)</a></li>
|
|
</ul>
|
|
</header>
|
|
|
|
<h3>Just Why</h3>
|
|
<p>The main reason for this project was to learn about SVG and SVG
|
|
animations. Before starting this I had never used an SVG in my own
|
|
websites. My only interactions with them was seeing them used on other
|
|
websites and the one time I opened up InkScape. Back in the days when I
|
|
cared about fancy websites I was envious of the cool animations some
|
|
sites had and wanted them for myself.</p>
|
|
<p>The thing that motivated me to create a game was seeing the 13k game
|
|
jam. A jam that only accepts games whos entire contents fit in 13kb
|
|
including all their assets. I had only heard about it after it was already
|
|
over that year but that wasn't going to stop me from creating a tiny
|
|
game.</p>
|
|
<p>Why Pong?</p>
|
|
<p>Pong is second only to Tetris[Citation Needed] though I had never played it.
|
|
Plus with a game as simple as pong it would be impossible for me not to finish it.
|
|
And as it turns out anything is possible.</p>
|
|
<h3>Was it a Success?</h3>
|
|
<p>Partially. I did create a game that used an SVG instead of an
|
|
HTMLCanvas. I learned how to move the paddles using the transform
|
|
attribute from JavaScript, as well as move the ball along a path using a
|
|
nanimateMotion tag.</p>
|
|
<p>As a bonus the game was 9kb when compressed when I had "finnished it".
|
|
That included the svg, html, and transpiled typescript.</p>
|
|
<p>However the game wasn't finnished when I stopped working on it three years
|
|
ago but I feel I achieved my goal. Or rather the pong game took me as far
|
|
as it could on my SVG adventure. Or at least that's what I thought back
|
|
then...</p>
|
|
<h3>The Revitalized SVG Pong</h3>
|
|
<p>What you see below is the new and improved SVG Pong, with far fewer bugs,
|
|
a cleaner(TM) codebase, and better preformace.</p>
|
|
<p>I revisted this project because I thought it would be fun. That really is
|
|
the main reason. And guess what. It was fun. I got to track down weird
|
|
bugs related to collisions and missing state. The project truely was just
|
|
slapped together over a weekend and it show(ed/s).</p>
|
|
<p>Try to have fun against the restless AI.</p>
|
|
|
|
<footer>
|
|
<p>If you like SVGs checkout some of my
|
|
<a href="/projects/project/creative_commons_icons.html">SVG icons</a>
|
|
I made for a now defunct project.</p>
|
|
</footer>
|
|
</article>
|