Bounce Back ~ A Boomerang Roguelite for JS13k

When life gets you down, it’s never too late to…

A Boomerang Roguelite / Zelda Homage for JS13k.

Play it in your web browser!

The souce code is also available on GitHub!

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

ZzFX – Zuper Zmall Zeeded Zound Zynth

Major update to ZzFX, my JavaScript sound effect generator! The browser is greatly improved with many more options. You can even download wave files! The micro version is still under 500 bytes.

Live Demo: zzfx.3d2k.com

github.com/KilledByAPixel

Here’s the latest version of the ZzFXmicro JavaScript code…

// ZzFXmicro - Zuper Zmall Zound Zynth - MIT License - Copyright 2019 Frank Force
zzfx_v=.5;zzfx_x=new AudioContext;zzfx=(e,f,a,b=1,d=.1,g=0,h=0,k=0,l=0)=>{let S=44100,P=Math.PI;a*=2*P/S;a*=1+f*(2*Math.random()-1);g*=1E3*P/(S**2);b=0<b?S*(10<b?10:b)|0:1;d*=b|0;k*=2*P/S;l*=P;f=[];for(var m=0,n=0,c=0;c<b;++c)f[c]=e*zzfx_v*Math.cos(m*a*Math.cos(n*k+l))*(c<d?c/d:1-(c-d)/(b-d)),m+=1+h*(2*Math.random()-1),n+=1+h*(2*Math.random()-1),a+=g;e=zzfx_x.createBuffer(1,b,S);a=zzfx_x.createBufferSource();e.getChannelData(0).set(f);a.buffer=e;a.connect(zzfx_x.destination);a.start();return a}
Posted in JavaScript | Tagged , , | Leave a comment

Dissecting A Dweet: Parallax Mountains

Today we will dissect the tiny JavaScript code that draws a parallax background with mountains and sky. This simple code can be used as a base to create different types of background scenes for your game or website.

View post on imgur.com

Continue reading on for a full explanation of how it works!

for(w=i=99;i--;)for(j=0;j<9;x.fillRect(i*20,j++?w*j+w+w*C(q/9)/j+59*C(q/3.9)/j:0,20,3e3))q=(j*w+i+t*j**3),x.fillStyle=R(9+j*40%w,j*20,w-j*9)

 

Continue reading

Posted in JavaScript | Tagged , , | Leave a comment

Bogus Roads – LowRez Game Jam

My 64×64 pixel game for LowRezJam is out, go play it now!

This game is a complete experience with everything from a main menu to a win screen and tons of polish. The gameplay is simple but I invested a lot of time tweaking it to feel awesome. I also recorded 6 news songs for the sound track!

The entire game was made in about week for lowrez jam 2019. I loved working in the 64×64 pixel resolution, it was a fun challenge. For development I used JavaScript, Three.js and Brackets as an editor. I recorded the music using Figure by Propellerhead. 

You can play it in just about any web browser, and it supports mouse or gamepad. Have fun!

Update: The judging results are in! My game got 2nd place for gameplay and 8th place overall. I also scored 8th place in audio and 18th place in graphics.

Posted in Game Dev | Tagged , | Leave a comment

Dissecting A Dweet: Breaking Broke

Today we will examine the JavaScript code to make this awesome shatter effect. The concepts demonstrated by this dweet can be used for making a variety of cool effects. In one of my previous posts I showed a similar technique for making text spiral.

This effect can even be animated with just a bit more code which I will share at the end of the post. Keep reading full explanation of how it works!

with(x)save(beginPath(font="85em'")),moveTo(j=1e3,540),clip(arc(j,540,2e3,a=t*6.3+9,a+.1)),restore(t>1||fillText("BROKE",29*S(a**3),j,1900))

Continue reading

Posted in JavaScript | Tagged , , | Leave a comment

Dissecting A Dweet: Strange Attractor

Hello everyone, today we will be looking into the JavaScript code that generates this cool looking visualization of a Lorenz system. It is based on a set of simple equations that produces incredible fractal spirals first discovered by Edward Lorenz in 1963! If you’ve ever heard of the “butterfly effect”, that phrase originates from these equations and other work by Lorenz.

c.width|=X=Y=Z=1
for(i=4010;i--;i<2e3&&x.lineTo(960+(X*C(t)-Y*S(t))*45,1160-Z*23))Z+=(X*Y-Z)/39,X+=(Y-X)/13,Y+=X*(28-Z)/99
x.fill('evenodd') 

View post on imgur.com

Continue reading

Posted in JavaScript | Tagged , , | 2 Comments

Dissecting A Dweet: Ring Weave

The dweet we will be looking at today may be the simplest one so far, but it’s every bit as mesmerizing and uses a neat trick to plot polar coordinates. There is plenty of room for playing around with the code to create cool remixes and loading style animations. Continue reading on for a full explanation of how it works!

c.width|=c.style.background="#CDF";for(j=3e3;j--;x.arc(960,540,430+60*S(j/500+a*4)*(S(a-t)/2+.5)**9,a,a))a=j/159+t,x.lineWidth=29
x.stroke()
Continue reading
Posted in JavaScript | Tagged , , | Leave a comment

Dissecting A Dweet: Mini Black Hole

Today we will be examining my most popular dweet, a miniature black hole simulation! It’s one of my easiest dweets to explain and the code is fairly straightforward. Read on for a full analysis…

for(i=0;i<2e3;x.fillRect(i?960+i*S(F=260*(t+9)/i+S(i*i)):0,i?500+.2*(2*i*C(F)+2e4/i):0,K=i++?S(i)*9:2e3,K))x.fillStyle=R(99*i,2*i,i,i?1:.4)

View post on imgur.com

Continue reading

Posted in JavaScript | Tagged , , | 12 Comments

Dissecting A Dweet: Spirograph Design Generator

Today we will be examining this crazy small JavaScript program that generates an array of endless random spirograph designs. Read on for a full explanation of how it works.

for(i=144;q=(8+t>>3)*i--;x.fillRect(i%16*120+T(S),(i>>4)*120+T(C),2,2))t%24<1?c.width|=r=n=>S(q**n)*9|0:T=f=>5*r(4)*f(r(3)*t)+9*f(r(2)*t)+60
Continue reading
Posted in JavaScript | Tagged , , | 2 Comments

Dissecting A Dweet: Spiral JavaScript Quine

This is the first in a series of posts where I will analyze a dweet’s code, explain how it works, and why it was done that way. A dweet is a 140 character JavaScript program published on Dwitter. The goal is to write small compact code that does something interesting. This ends up being much different from typical programming and creating quality dweets is something of an art.

I’ve published several hundred dweets but this is one of my favorites. A simple yet beautiful program that creates a winding spiral with the text of it’s own code.

Continue reading
Posted in JavaScript | Tagged , , | 4 Comments