-
Notifications
You must be signed in to change notification settings - Fork 1
/
news.html
187 lines (156 loc) · 10.8 KB
/
news.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang = en-gb>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width = device-width, initial-scale = 1'>
<meta name = description content = 'Free online coding blogs and open source games'>
<script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
<script src = /src/js/analytics.js></script>
<script src = /src/js/main.js></script>
<title>News | Joachim Ford</title>
<link rel = stylesheet href = /src/main.css>
<link rel = icon type = image/x-icon href = /src/favs/favicon.ico>
</head>
<body>
<section class = topnav>
<div class = title>
<a class = brand href = '/'>Joachim Ford</a>
<a class = about href = /about>About</a>
</div>
<div class = nav>
<a href = /games>Games</a>
<a href = /projects>Projects</a>
<a href = /blogs>Blogs</a>
<a href = /news>News</a>
</div>
</section>
<section class = main>
<span class = date>01.08.2024</span>
<div class = demo>
<div>
<h2>Splash Dash ~ js1024 winner 2024</h2>
<span class = bio>Can you survive the cold?</span>
</div>
<div class = big>
<a href = /src/news/splashDash target = _blank>
<img class = img src = /src/news/splash_dash.png>
<div class = play><img src = /src/images/play.svg></svg></div>
</a>
</div>
<p>Hello! I've recently released a new <b>1024 byte</b> game for a competition!
<b>Splash Dash</b> ranked #1 in the end (my first victory!) and
can be played on any modern browser.</p>
<span class = subDemo>
<p>Use the <b>Arrow Keys</b> or <b>WASD</b> to move the player. Make your way
through three unique beaches and grab all the coins to reach
the <b>Golden Paradise</b> at the end.
The bar at the top of the screen represents your temperature.
Complete each level before it runs out!</p>
</span>
<p>Ever wondered how these 1k games are made? Check out the blog
<a class = normal href = /src/blogs/splash_dash_tutorial>
The Splash Dash Tutorial</a> to learn more about it.</p>
<span>Here is the entire source code.
<pre class = code><canvas id=c><script>for(p='(e,d)Q<17&!PeightO0,NNNWLr(KfoKJ=d:Ikey x,y =c. /2 o.fill Rect(+.),4,.1e==>S(e=innerd=(i-1 Styl"#+=-e)*u+H A(d5,e (d,e A )| 5)M[i-d)*u+W ,(&&(=Q=>*Math.sin(+1]==e. Codel=n=>{JW widthWidth6,H hOHO6,o getContext`2d`,u=(W+H) 5,r=,l,f)=>l,u*f,u*fC=d,F=e,g&s?f=-.18:ef.007,h?d-=.1:qd.1t,KLKs=N9,WA &! &! )e%1<fF,s=1,f=0 )|A | |d<0|d5>70C, )f=NF)ePA )&a )>k[~~d*~~e]=1R=Nx=70;x--;)Jy=30;y--;)"+~(5x)-543A( )?K ,1):a( )>&yPk[x*y]ff0",Kx4,y41p/50+x+R++.3));JK-W,NWK7L034",L-m*W/5e3,H/9r +f,.4r Kd3,e0698",i=634;i-=2;o.lineTo(/9]+13))p?(]*>3(]02p*)-) ,~=~/9)&e>12&e<14?f/4:*=.97*<630-=] 5):M.push(N0);KN13,70 (R?++m>5e3?C:p9:T>4?t="#ff0":k=[T*=14,Tm=1],requestAnimationFrame(l)},f=g=h=q=s=u=T=m=p=Nk=[M=[]],t="#3897",S38|87?gI39|68?qI37|65?hINon down,1on upa(1+~~e,~~d,6d*e*9+T)+d5AaQ>Nl()';G=/[^!-HMR-~]/.exec(p);)with(p.split(G))p=join(shift());eval(p)</script></pre></span>
</div>
<span class = date>18.04.2024</span>
<div class = demo>
<div>
<h2>Squirtcopter</h2>
<span class = bio>Squirt your way to victory!</span>
</div>
<div class = big>
<div class = youtube>
<iframe src = "https://www.youtube.com/embed/WdBWAVmWlqE?si=4msp0U8225HGPq54" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
</div>
</div>
<span>
Hello everyone! I've just submitted a new JavaScript game for a competition.
If you scroll down a little way, you'll notice this is a
remake of a smaller version I made for JoBase about a year ago. Hope you enjoy!
</span>
<span><a class = button href = /src/content/squirtcopter><b>PLAY NOW</b></a></span>
</div>
<span class = date>30.12.2023</span>
<div class = demo>
<div>
<h2>Io's Mission</h2>
<span class = bio>The New Online Adventure Game</span>
</div>
<div class = big>
<div class = youtube>
<iframe src = "https://www.youtube.com/embed/MUapUWdwDU8?si=3BvLh4n_qQR_z3un" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
</div>
</div>
<span>
Hello! Check out my new game! You can play it for free at
the link below. Tell me what you think!
</span>
<span><a class = button href = /src/content/ios_mission><b>PLAY NOW</b></a></span>
</div>
<span class = date>10.07.2023</span>
<div class = demo>
<div>
<h2 class = news>Leap Lava</h2>
<span class = bio>An (almost) 1 kilobyte platform game</span>
</div>
<div class = big>
<a href = /src/news/leapLava target = _blank>
<img class = img src = /src/news/leap_lava.png>
<div class = play><img src = /src/images/play.svg></svg></div>
</a>
</div>
<p>Hello everyone! Recently, I entered a competition for projects
under 1024 bytes of code.
It was a great challenge to compress a complete platform game
into this tight size limitation.</p>
<p>Use the arrow keys to leap from the lava! Can you get to 2048 points in time?</p>
<p>Here is the entire 1042 byte source code: (It was originally 1024 bytes
but it's a little longer due to performance and response fixes)</p>
<pre class = code>for(_='=iZ(iYZ=>LYX~~((A key =0: ,c[ for f](p+=->0k.*i+=0)w)/6;i=0;++i<${i}fill/2h-=( && ), g]=)"#fff"`rgb(,q+14,5,5),q+9,14,14)99==q0,S=Math.sin,R=l=>{ (w=a.width,h=a.height,T>m+?(k=F++):(A- A-N)5,t.2 $- $-T+)/15,i;)c[g="Style"]=${*SY},` f="Rect"](5,w,h); Y60;)sZ/12,o=SY)*w/s,M=w+s,r (w-s+o*s-A/300*s)%M+M)%M-sr,$/400*s,s,-h+$)i<59?,,)`:"#000"; (Ty,T|I?u?y12:T?T y y.4p=N+h-A,q=T+-$,5829,r?N4:l (N-=4 I=i= -< +++)d=h-A+60,e S((OZ%9)*O)<.6|(bZ%30==)&i 20*(SY)+i)-~Y/3*2-(b i+SY+t/Y/15))/.7 E$+e,p>d-50&p<d+60&q>E- (Cq+(E- C<-9-5*y?Np-d?4:-4:(TC-y,I=1) c[f](d,E,6e);c.font=`3em"`"#f40c"-$+h,w,m?m m- W=.2+.3*S(t/3+t4<2.4?W:2.4 c[f](p+1637,9,${.6-(m-$)/3e3})`w,h,c.Text(t<2048 k?~~t:(F++,0==k?"LOSE":(m="WIN!") 9,45 requestAnimationFrame(R)},t=y=N=I=F=m=1,T1A=$50k={},L i,f)=>{38= qZ. Code)|90|87 (u=f 39|68?r=f:37|65|81 (l=f)},on downX,1 on upX R()';G=/[- X-Z]/.exec(_);)with(_.split(G))_=join(shift());eval(_)</pre>
</div>
<span class = date>03.05.2023</span>
<div class = demo>
<div>
<h2 class = news>Squirtcopter</h2>
<span class = bio>An Infinite JoBase Shooter</span>
</div>
<div class = big><img class = img src = /src/news/squirtcopter.png></div>
<p>I've just finished another <a class = normal href = https://jobase.org target = _blank>JoBase</a> game!
Use your helicopter to explore a procedural world of procedural enemies with procedural powers!
The game can go on forever, but my current record is 8581m
(I could have carried on, but I'd already spent some hours on it and was getting bored.)</p>
<p>You can play the game by typing
<span class = snip>python -m JoBase.examples.squirtcopter</span> into the terminal.
Hope you enjoy it!
<p>Source code available
<a class = normal href = https://github.com/JoBase/JoBase/tree/main/JoBase/examples/squirtcopter target = blank>here</a>.</p>
<span><a class = button href = https://jobase.org/squirtcopter target = _blank>
<b>TRY IT ONLINE</b></a></span>
</div>
<span class = date>10.12.2022</span>
<div class = demo>
<div>
<h2 class = news>Blue Hue</h2>
<span class = bio>A JoBase Platform Game</span>
</div>
<div class = big><img class = img src = /src/news/blue_hue.png></div>
<p>Hello! I've just finished making a platform game for
<a class = normal href = https://jobase.org target = _blank>JoBase</a>
- a new python library for beginner coders.</p>
<p>You can play <b>Blue Hue</b> by installing JoBase (and Python, if you haven't already) and typing
<span class = snip>python -m JoBase.examples.blue_hue</span> into the terminal.
Check out its code on
<a class = normal href = https://github.com/JoBase/JoBase/tree/main/JoBase/examples/blue_hue target = blank>Github</a>!</p>
<span><a class = button href = https://jobase.org/blue-hue target = _blank>
<b>TRY IT ONLINE</b></a></span>
</div>
</section>
<button class = theme onclick = toggleTheme()>Change Theme</button>
<span class = copyright>
© <span class = year></span> Joachim Ford. All rights reserved.
<a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /src/images/mail.svg></img></a>
</span>
</body>
</html>