How I made a 1K Pinball Game in JavaScript – Lu1ky Pinball

I’ve made quite a few 1k games now, yet I always find room for improvement and there is so much more to explore in this space. For the JS1024 contest this year the theme was Lucky and I made a tiny pinball machine. It received 1st place in the JavaScript category! I have been wondering for a while how realistic of a pinball sim could be achieved with such a limited amount of code.

This post will walk you through every line for my tiny pinball game that fits in 1 kilobyte of JavaScript. How much is 1k you ask? This much…

for(_='00F*rE8F-7ED/f)*hCin(BMath.AAsB@keyZ1,Y0,XXYWr=V),UUVT-rS69R15Qe. a.f- r-r-=()**Acos(x,y,t, w x ge=n[--;)for();209+=+rw(482(2*h-1)EU+*(1,X9))60	n[h] y=a=>n[Z]=h=2;h*,;rU5Fc.beginPath(c.fill(c.arc(w=(V9)=>n.push({r,g:Xw:0}n=[x=3,1],i=g=X1e3T65{);RY79XX6)}{,816,18WQ+	12W45+	24W45U-21032W70T1Q5F+D+182539,YQT	673,D+*r/38U-*@r/38)V19+Q4R7-754-4EUR7+3FUR0-3E,Y5%3*24438S%9*2W5)}onZdownYonZupXsetInterval(`w=9;w{=Amax(-YAmBYn["zx"[h]]?-.07:.05)T653+65*h],=-+(=482+*(80S/2))U=-+(=7	*@/2)U VQS/8,133],=AmB790,=n.c?.05:@++i)/99+(7	-)/19);width|=2],,.F17,1e3<&&x&&(=RY=74X==Xx--Un.map((a=>{w||x,y,b?--b+r:rUf=Ahypot(y=-x,o=-yTg-,t=w-,0>&0<r*y+t*o&!(t&!)&&(y/f,o/f,f*=f/(t*yS*oUh=!t|b?1.3:(b=9,	0<y||(++g%64||++xU1.7U(r+oC,(t-yC)}))}Vg+8>>32	S%8*2X420+3E,r?9:g%8Vx7	,420+	E,25)`,16)';G=/[- Q-Z@-F]/.exec(_);)with(_.split(G))_=join(shift());eval(_)

That’s how the code looks after being fully minified, though no one would be expected to recognize it at that point. In addition to being minified, it has also been regpacked which is a special tool for size coding that can create compressed JavaScript code that can uncompress itself.

What does it all mean? Keep reading to find out…

Continue reading
Posted in Game Dev, JavaScript | Tagged , , | Leave a comment

Lu1ky Pinball

My JS1024 game this year is a tiny pinball machine with real physics!

See the Pen Lu1ky Pinball ๐Ÿ€ Tiny pinball physics game in 1K of JS by Frank Force (@KilledByAPixel) on CodePen.

How to Play

  • Left flipper = Z or mouse left
  • Right flipper = X or mouse right
  • Ball launcher = C or mouse click
  • Free ball every 64 points
  • Chrome browser recommended

Features

  • Physics simulation
  • Pinball machine layout
  • Ball launcher
  • Rotating flipper
  • Bumper animation
  • Score tracking and display
  • Ball display
Posted in JavaScript | Tagged , , | Leave a comment

LittleJS Breakout Tutorial

This video walks you through how to make a small game from scratch with the LittleJS open source game engine. It covers graphics, sound, input, effects, and gameplay.

We will make a breakout style game with a player controllable paddle, a ball that bounces, and bricks that break when hit. This is a great introduction to LittleJS and takes only around 30 minutes to complete. The tutorial is also available on GitHub for you to follow along.

Posted in Game Dev, JavaScript | Leave a comment

Scribbobbles at Proof of X in Tokyo

My first generative art project with customizable parameters explores a glitchy circle packing algorithm with a hand drawn aesthetic. It being featured at the Proof of X art exhibition in Tokyo Japan!

Visitors of the exhibition can mint the piece live and personalize their result by adjusting parameters to control color and style. It’s fun to seeing what other people come up with.

Live Minting Proof of X in Tokyo Japan

Everything was created in vanilla JavaScript, no external libraries used. I first posted a work in progress for this piece almost a year ago in last September! After sitting in my unfinished folder for almost a year, it feels so good to put this one out into the world!

Posted in Generative | Tagged , , | Leave a comment

My Artist Story – A Short Autobiography

I was born in the city of Philadelphia and we moved to a suburb while still in elementary school. I lived with my parents and younger siblings, two brothers and a sister. From as early as I can remember I was interested in art and my parents did their best to encourage my creativity. Though money was always difficult in my family, they made sure I had plenty of art supplies and even sent me to special classes at the Philadelphia Art Institute.

One of my early mixed media abstract works
Continue reading
Posted in Personal, Projects | Tagged , | Leave a comment

Squid – Undergrowth – Music Video Game

I worked with the band Squid to make a special game for their new single, it’s like an interactive music video that you can play! The game uses my open source game engine LittleJS and works in your browser on desktop and mobile devices. They even made a commercial for the game, check it out!

Posted in Game Dev, Music | Tagged , | Leave a comment

Rad Impressions on 256Art

My latest generative art release uses a special raymarching system I designed to render realistic abstract sculptures. It’s called Rad Impressions!

Keep reading to learn the story behind the art…

Continue reading
Posted in Generative | Tagged , | Leave a comment

Tilemoji – Tweetable Emoji Art

To celebrate the first year of fxhash, artists were invited to create special collections of 365 edition generative works. I decided to try a crazy idea I’ve had for a while and release a project that uses only emojis to create tweetable artwork. Since there is no image used, the art can be copied like normal text for display on social media! I chose this simple output as the preview.

๐ŸŸฅ๐ŸŸฅ๐ŸŸฅ๐ŸŸฅ๐ŸŸฅ
๐ŸŸฅ๐Ÿ”ต๐Ÿ”ต๐Ÿ”ต๐ŸŸฅ
๐ŸŸฅ๐Ÿ”ต๐ŸŸก๐Ÿ”ต๐ŸŸฅ
๐ŸŸฅ๐Ÿ”ต๐Ÿ”ต๐Ÿ”ต๐ŸŸฅ
๐ŸŸฅ๐ŸŸฅ๐ŸŸฅ๐ŸŸฅ๐ŸŸฅ

Most results are designed to fit in a 280 character tweet, except for rare extra large variants. Five different generative algorithms possible, each with their own set of parameters. Several other features round out the set including shadow, color count, border, background options.

Tilemoji on fxhash

Here is a mosaic showing every Tilemoji, thank you to everyone that got one! Keep reading for some more info about how the project works…

All 365 Tilemojis on fxhash
Continue reading
Posted in Generative | Tagged , , | Leave a comment

ROIL – Generative Abstract Paintings

My latest release on fxhash uses a new space filling algorithm I have been developing. It can produce a large range of outputs with interesting painterly textures and complex details. I was inspired by abstract expressionists and physical phenomena. This work draws in an interesting way, by interfering with itself to create the composition. There were only 222 editions available and fully minted on fxhash. Thank you to everyone that got one! You can see all the results on fxhash…

ROIL on fxhash

This is my first release on fxhash using custom palettes, there are 20 possible in total, most are inspired by natural phenomena.

Here are a few of my favorite results from the 222 edition set on fxhash…

ROIL #87 – Shorelines palette
ROIL #93 – Lunar Palette
ROIL #149 – Canyon Palette
ROIL #79 – Oceanic Palette
ROIL #25 – Gray Palette
Posted in Generative | Tagged , | Leave a comment

Making Awesome Games with LittleJS

Watch this 20 minute presentation I gave at JS GameDev Summit. I talk all about how my open source game engine LittleJS works and how you can use it to make amazing games.

Posted in Game Dev, JavaScript | Tagged , , | Leave a comment