54 lines
2.6 KiB
HTML
54 lines
2.6 KiB
HTML
<article>
|
|
<header>
|
|
<h2>About This Project</h2>
|
|
<p>About three years ago(2018) I created this little project. I have
|
|
recently brushed away most of the bugs so here is my Pong clone which uses
|
|
Scalable Vector Graphics(SVG).</p>
|
|
|
|
<p>Some resources related to SVGs.</p>
|
|
<ul>
|
|
<li><a href="https://www.wikipedia.org/svg">Wikipedia article</a></li>
|
|
<li><a href="https://mdn/">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 is 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
|
|
folks had and wanted them for myself.</p>
|
|
<p>The other 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 and I had never really played it. Plus I thought I
|
|
could actually finnish the project if it was a clone of a simple game.</p>
|
|
<h3>Was it a Success?</h3>
|
|
<p>Partially. I did create a game that used an SVG image instead of an
|
|
HTMLCanvas. I learned how to manipulate the elements with the transform
|
|
attribute from JavaScript, as well as us an animateMotion tag to move the
|
|
ball along a path.</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 showed.</p>
|
|
<p>Try to have fun against the restless AI.</p>
|
|
|
|
<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>
|
|
</footer>
|
|
</article> |