Animacja kolorów i fizyka; Czysty JavaScript, 457 (335) bajtów
To jest mój pierwszy post na tym forum; Zrobiłem ten kod i retrospektywnie znalazłem ten wątek, aby go opublikować.
Oto kod zamknięty w HTML, gotowy do skopiowania / wklejenia do pliku HTML:
<body><script>A=120;B=280;d=document;y=180;x=v=n=s=0;f=140;c=d.createElement('canvas');p=c.getContext('2d');c.width=B;c.height=400;c.onclick=()=>{v-=6};p.font='50px Arial';d.body.appendChild(c);r=(h,t,k=0,i='#0f0',w=40)=>{p.fillStyle=i;p.fillRect(h,k,w,t)};b=setInterval(()=>{if(x==0){n=f;f=Math.floor(B*Math.random());x=160}x--;v+=.1;y+=v;r(0,400,0,'#08f',B);r(20,40,y,'#fc0');r(x-40,n);r(x+A,f);r(x-40,B-n,n+A);r(x+A,B-f,f+A);if(x==60)s++;p.strokeText(s,A,80);if(x>20&&x<100&&(y<n||y>n+80)){clearInterval(b);location.reload()}},15)</script><br>Made by Thomas Kaldahl</body>
Ma pikselowe kolizje, dokładną fizykę kwadratową i płynne animacje kolorów, a wszystko to w 457 bajtach czysto niezależnego kodu JavaScript offline, pokazanego tutaj nieogolonego bardziej szczegółowo i objaśnienia:
<!--entire HTML shell is omitted in golf-->
<body>
<script>
//common numbers and the document are assigned shortcut letters
A = 120;
B = 280;
d = document;
y = 180; //y position of the top of the bird
x = //x position of scrolling for pipes
v = //vertical velocity of bird
n = //y position of the top of the nearest pipe opening
s = 0; //score
f = 140; //y position of the top of the farther pipe opening
c = d.createElement('canvas'); //canvas
p = c.getContext('2d'); //canvas context
//set canvas dimensions
c.width = B;
c.height = 400;
c.onclick = () => { v -= 6 }; //apply jump velocity to bird when clicked
p.font = '50px Arial'; //font for scoring (omitted in golf)
d.body.appendChild(c); //add canvas to html page
//draw a rectangle on the canvas
r = (h, t, k = 0, i = '#0f0', w = 40) => {
p.fillStyle = i;
p.fillRect(h, k, w, t)
};
//main loop (not assigned to b in golf)
b = setInterval( () => {
if (x == 0) { //the x position is a countdown. when it hits 0:
n = f; //the far pipe is now the near pipe, overwriting the old near pipe
f = B * Math.random() //assign the far pipe a new vertical location
x = 160; //restart the countdown back at 160
//(score increments here in golf)
}
x--; //count down
v += .1; // apply gravity to velocity
y += v; // apply velocity to bird
r(0, 400, 0, '#08f', B); //draw background
r(20, 40, y, '#fc0'); //draw bird (non-default color is omitted in golf)
r(x - 40, n); //draw first pipe upper half
r(x + A, f); //draw second pipe upper half
r(x - 40, B - n, n + A); //draw first pipe lower half
r(x + A, B - f, f + A); //draw second pipe lower half
if (x == 60)
s++; //(this is done earlier on golf)
p.strokeText(s, A, 80); //draw score
// if the bird is in range of the pipes horizontally,
// and is not in between the pipes,
if (x > 20 && x < 100 && (y < n || y > n + 80)) {
clearInterval(b); location.reload() //omit interval clear in golf
}
}, 15) //(reduced the frame delay to 9, a 1 digit number, in golf)
</script><br>
Made by Thomas Kaldahl <!-- GG -->
</body>
Dla zabawy, oto wersja 1066 bajtów z bardziej wyszukaną grafiką:
<body style='margin:0'><script>var y=180,x=v=n=s=0,f=140,c=document.createElement('canvas'),p=c.getContext('2d');c.width=280;c.height=400;c.onclick=function(){v-=6};c.style='width:68vh;height:97vh';document.body.appendChild(c);p.font="50px Arial";p.shadowColor='#444';p.shadowBlur=9;p.shadowOffsetX=p.shadowOffsetY=5;function r(h,t,k=0,i='#0f0',j='#0a0',u=0,l=0,w=40){var g=p.createLinearGradient(h,l,h+40,u);g.addColorStop(0,i);g.addColorStop(1,j);p.fillStyle=g;p.fillRect(h,k,w,t);}b=setInterval(function(){if(x==0){n=f;f=Math.floor(280*Math.random());}x=x==0?159:x-1;v+=.1;y+=v;r(0,400,0,'#08c','#0cf',280,0,280);r(20,40,y,'#ff0','#fa0',y+40,y);r(x-40,n);r(x-50,20,n-20,'#0f0','#0a0',n+20,n,60);r(x+120,f);r(x+110,20,f-20,'#0f0','#0a0',f+20,f,60);r(x-40,280-n,n+120);r(x-50,20,n+120,'#0f0','#0a0',n+140,n+100,60);r(x+120,280-f,f+120);r(x+110,20,f+120,'#0f0','#0a0',f+140,f+100,60);if(x==60){s++;}p.fillStyle='#fff';p.fillText(s,120,80);if(x>20&&x<100&&(y<n||y>n+80)||y<0||y>360){clearInterval(b);location.reload();}},15);</script><br>Made by Thomas Kaldahl</body>
Czy oszukuje też użycie systemu kompresji, takiego jak DEFLATE?
Poniżej znajduje się kod ASCII85 dla DEFLATEd wersji kodu:
Nawiasem mówiąc, skompresowany jest łącznie 335 bajtów.
Gapon95_Wi'Kf'c (i ## 6'h, + cM \ JZeFO <h; $ W '# A1', RqNigBH02C '# R $ m] <i <X # 6GR`2pE <Ri5mu-n% cVPrsJe: * R ^ pnr9bI @ [DAZnPP02A ^!. $ MN / @ `U7l5gm !! Vr4> A; P? U [Pk8] jCnOP% duu?` FWql> "tuO4 / KbIWgK; 7 / iJN'f2, hnFg8e. ^ SO * * t \ * `, 3JBn6j (f`O #], M0; 5Sa35Zc @ * XaBs @ N%] k \ M76qa [.ie7n (^ * Z5G-lfhUZ3F # '%, X17Pj1u] L) LjpO6XbIl% N3tJhTsab8o1? mT; 90VMmnfBNKEY (^ 'UV4c? SW': X (! 4, * WCY + f; 19eQ? `FK0I" (uDe: f & XV & ^ Rc + 'SWRIbd8Lj9bG.l (MRUc1G8HoUsn # H \ V (8 "Y $ / TT) ^ kATb (OreGfWH7uIf
