Skip to content

Commit

Permalink
Added Leap Lava & new updates and images.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hope41
Hope41 committed Oct 22, 2023
1 parent 58d3e74 commit 2477731
Show file tree
Hide file tree
Showing 8 changed files with 228 additions and 88 deletions.
Binary file modified images/infinite_zoom.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/infinite_zoom_big.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/snakes_and_ladders.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/the_mitigator.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 6 additions & 3 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ a:hover {color: #037}
transition-duration: var(--transition);
border-radius: var(--radius);
margin: 0 2em 1em 0;
opacity: .9;
box-shadow: 0px 0px 10px #0005
}

Expand Down Expand Up @@ -154,17 +153,21 @@ a:hover {color: #037}


/*-------- other --------*/
div.code > pre {
div.code, div.codeWrap {
background-color: #0241;
box-shadow: 0px 0px 10px #0005;
border-radius: .5em;
font-size: 15px;
font-family: code;
overflow: auto;
padding: 1em;
margin-bottom: 2em;
margin: 2em 0 2em 0;
max-height: 20em
}
.codeWrap {
overflow-wrap: break-word
}

h2, h3 {margin: 0}
h3 {margin-top: .5em}

Expand Down
194 changes: 109 additions & 85 deletions news.html
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,109 @@
<!DOCTYPE html>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width = device-width, initial-scale = 1'>
<meta name = keywords content = 'JoBase, JoBase games, JavaScript games'>

<script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
<script src = js/analytics.js></script>
<script src = js/main.js></script>

<title>Joachim Ford</title>

<link rel = stylesheet href = main.css>
<link href = fontawesome/css/fontawesome.css rel = stylesheet>
<link href = fontawesome/css/solid.css rel = stylesheet>
<link href = fontawesome/css/brands.css rel = stylesheet>
</head>

<body>
<section class = topnav>
<div>
<a class = text href = '/'>Joachim Ford</a>
<i class = 'fa-solid fa-bars' onclick = bar()></i>
<a class = text href = games>Games</a>
<a class = text href = articles>Articles</a>
<a class = text href = news>News</a>
<a class = text href = experiments>Experiments</a>
<a href = https://github.com/Hope41 target = _blank><i class = 'fa-brands fa-github'></i></a>
<a href = mailto:[email protected]><i class = 'fa-solid fa-envelope'></i></a>
</div>
</section>

<section class = main>
<p></p>
<hr>
<p></p>
<span class = date>03.05.2023</span>
<h2>Squirtcopter</h2>
<span class = description>An Infinite JoBase Shooter</span>
<p></p>
<div class = big><img src = /news/squirtcopter.png></div>
<p></p>
I've just finished another <a href = https://jobase.org>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).
Anyway, feel free to <a href = mailto:[email protected]>email me</a> your score if you like,
and I hope you enjoy it!<br>
You can play the game by typing
<span class = snip>python -m JoBase.examples.squirtcopter</span> into the terminal.
Alternatively, you can play it online
<a href = https://jobase.org/games/squirtcopter target = _blank>here</a>.
(I'll just mention that the online version of JoBase can be a bit laggy.
For best performance, download JoBase and run the game from there)
<p></p>
You can find its source code <a href = https://github.com/JoBase/JoBase/tree/main/JoBase/examples/squirtcopter target = blank>here</a>.
<p></p>
<hr>
<p></p>
<span class = date>10.12.2022</span>
<h2>Blue Hue</h2>
<span class = description>A JoBase Platform Game</span>
<p></p>
<div class = big><img src = /news/blue_hue.png></div>
<p></p>
I have just finished making a new platform game for
<a href = https://jobase.org target = _blank>JoBase</a> - a fast python library for beginner coders.
<p></p>
JoBase has been a collaboration between me and <a href = https://greyhope.uk target = _blank>my brother</a>
for a while now, and it's nice to finally have given it a solid contribution.<br>
You can play Blue Hue by installing JoBase (and Python, if you haven't already) and running the command
<span class = snip>python -m JoBase.examples.blue_hue</span> into the terminal.
Feel free to check its source code on
<a href = https://github.com/JoBase/JoBase/tree/main/JoBase/examples/blue_hue target = blank>Github</a>.
<p></p>
<hr>
<p></p>
</section>

<span class = copyright>
© Copyright <span class = year></span>
Joachimford.uk — <a href = mailto:[email protected]>[email protected]</a>
</span>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width = device-width, initial-scale = 1'>
<meta name = keywords content = 'JoBase, JoBase games, JavaScript games'>

<script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
<script src = js/analytics.js></script>
<script src = /js/highlight.min.js></script>
<script src = js/main.js></script>

<title>Joachim Ford</title>

<link rel = stylesheet href = main.css>
<link href = fontawesome/css/fontawesome.css rel = stylesheet>
<link href = fontawesome/css/solid.css rel = stylesheet>
<link href = fontawesome/css/brands.css rel = stylesheet>
</head>

<body>
<section class = topnav>
<div>
<a class = text href = '/'>Joachim Ford</a>
<i class = 'fa-solid fa-bars' onclick = bar()></i>
<a class = text href = games>Games</a>
<a class = text href = articles>Articles</a>
<a class = text href = news>News</a>
<a class = text href = experiments>Experiments</a>
<a href = https://github.com/Hope41 target = _blank><i class = 'fa-brands fa-github'></i></a>
<a href = mailto:[email protected]><i class = 'fa-solid fa-envelope'></i></a>
</div>
</section>

<section class = main>
<p></p>
<span class = date>10.07.2023</span>
<h2>Leap Lava</h2>
<span class = description>An (almost) 1 kilobyte platform game.</span>
<p></p>
<div class = big>
<a href = news/leapLava.html target = _blank>
<img src = /news/leap_lava.png>
<div class = play>PLAY</div>
</a>
</div>
<p></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 1067 byte source code: (It was originally 1024 bytes
but it's a bit longer due to performance and response fixes)
<div class = codeWrap>
_='S=Math.sin,R=l=>{(w=a.width,h=a.height,Y>m+P?(k):(A-A-GU)Z5,t.2^$-$-Y+P)/15,i@P;)c[g="DStyle"]=L${P*SXZK},jK`f="DRect"](j5,w,h);X@60;)s/12,o=SX)*w/s,T=w+s,r(wZ-sZ+o*s-A)%T+T)%T-szr,G$,s,-h+$)vi<59?LB,B,B)`:"#011";(Yy,Y|I?u?y12:Y?Yyy.4zp=U+h-A,q=Y+GP-$,5jPHE8V)E29V^r?U4:lJ(U-=4^I=ji=-<+++)d=h-A+60,eS((O%P9)*O)<.6|(b%30==K)&iJ20*(SX)+i)-~X/3K*2-(bJi+SX+t/X/15))/.7^F$+Ge,p>d-50&p<d+60&q>F-PJ(Cq+(F-P^C<-9-5*y?Up-d?4:-4:(YC-y,I=1))zd,F,6je);c.ft="3em arial"v"#f50b"zj-$+hZ,w,m?mm-W=.2+.3*S(t/3K+tZ4K<2.4?W:2.4)E16QE37QvL255,jj${.6-(m-$)/3e3})`zjjw,hH,c.DText(t<2048?~~t:(m,"YOU WIN!!"^9,45^M>150J0==kJlocati.reload(^requestAnimatiFrame(R)},t=y=U=I=M=m=1,Y1jA=$50jk={},N=X,f)=>{38=q.Code)|90_|87_J(u=f^39_|68_?r=f:37_|65_|81_J(l=f)},down,1^up^R()zf](vg]=j0,_==q^),Z/2X(iV,q+9,14,14Q,q+14,5,5)P99L`rgb(K0)J&&H)v"#fff"GhZ-Ezp+DfillB${i}@=0;++i<w)/6K;i=(+=*i=ik./400*s>0=-onfor,c[=0:key~~((A=jM++=>NX';for(i of'@BDEGHJKLPQVXZ^_jvz')with(_.split(i))_=join(pop());eval(_)
</div>
<p></p>
<hr>
<p></p>
<span class = date>03.05.2023</span>
<h2>Squirtcopter</h2>
<span class = description>An Infinite JoBase Shooter</span>
<p></p>
<div class = big><img src = /news/squirtcopter.png></div>
<p></p>
I've just finished another <a href = https://jobase.org>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).
Anyway, feel free to <a href = mailto:[email protected]>email me</a> your score if you like,
and I hope you enjoy it!<br>
You can play the game by typing
<span class = snip>python -m JoBase.examples.squirtcopter</span> into the terminal.
Alternatively, you can play it online
<a href = https://jobase.org/games/squirtcopter target = _blank>here</a>.
(I'll just mention that the online version of JoBase can be a bit laggy.
For best performance, download JoBase and run the game from there)
<p></p>
You can find its source code <a href = https://github.com/JoBase/JoBase/tree/main/JoBase/examples/squirtcopter target = blank>here</a>.
<p></p>
<hr>
<p></p>
<span class = date>10.12.2022</span>
<h2>Blue Hue</h2>
<span class = description>A JoBase Platform Game</span>
<p></p>
<div class = big><img src = /news/blue_hue.png></div>
<p></p>
I have just finished making a new platform game for
<a href = https://jobase.org target = _blank>JoBase</a> - a fast python library for beginner coders.
<p></p>
JoBase has been a collaboration between me and <a href = https://greyhope.uk target = _blank>my brother</a>
for a while now, and it's nice to finally have given it a solid contribution.<br>
You can play Blue Hue by installing JoBase (and Python, if you haven't already) and running the command
<span class = snip>python -m JoBase.examples.blue_hue</span> into the terminal.
Feel free to check its source code on
<a href = https://github.com/JoBase/JoBase/tree/main/JoBase/examples/blue_hue target = blank>Github</a>.
<p></p>
<hr>
<p></p>
</section>

<span class = copyright>
© Copyright <span class = year></span>
Joachimford.uk — <a href = mailto:[email protected]>[email protected]</a>
</span>
</body>
</html>
113 changes: 113 additions & 0 deletions news/leapLava.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no'>

<style>
body {
background: #fff;
margin: 0;
overflow: hidden
}

canvas {
width: 100%;
height: 100%;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none
}
</style>
</head>
<body>
<canvas id = a></canvas>

<script>
const c = a.getContext('2d')
const resize = () => {
a.width = innerWidth
a.height = innerHeight
}
addEventListener('resize', resize)
resize()

// ~~~ ENTRY ~~~

S=Math.sin
R=_=>{
w=a.width
h=a.height

// death/win
Y>v+99?(k=0,H++):(A-=(A-h/2-X)/25,t+=.2)
B-=(B-Y+99)/15

// ominous haze
for(i=0;++i<99;){
c[Z='fillStyle']=`rgb(${S(i/20)*99},0,0)`
c[f='fillRect'](0,i*5,w,h)
}

// buildings
for(i=0;++i<60;){
s=i*i/12
o=S(i)*w/s
Q=w+s
r=((w/2-s/2+o*s-A/400*s)%Q+Q)%Q-s
c[f](r,h/2-B/400*s,s,-h+B)
c[Z]=i<59?`rgb(${i},${i},${i})`:'#011'}

// hero
Y+=y
Y>0|I?k.u?y=-12:(Y>0?Y=0:y=0):y+=.4
c[f](p=X+h-A,q=Y+h/2-99-B,50,99)
c[Z]='#fff'
c[f](p+8,q+9,14,14)
c[f](p+29,q+9,14,14)
k.r?X+=4:k.l?X-=4:0

// blocks
I=0
for(i=~~((A-w)/60);i<~~((A+w)/60);i++){
d=h-A+i*60
e=(S((O=i%999)*O)<.6|(b=i%30==0))&i>0&&(S(i*i)+i)*20-~(i/30)*i*2-(b&&i+S(i+(t/(i/15)))*i/.7)
E=-B+h/2-e
p>d-50&p<d+60&q>E-99&&(D=-q+(E-99),D<-9-y*5?X+=p-d>0?4:-4:(Y+=D-y,I=1))
c[f](d,E,60,e)
}

c.font='3em arial'

// lava
c[Z]='#f50b'
c[f](0,-B+h/2,w,v>0?v=0:v-=(W=.2+S(t/30)*.3+t/240)<2.4?W:2.4)

// eyes
c[f](p+16,q+14,5,5)
c[f](p+37,q+14,5,5)

// glow
c[Z]=`rgb(255,0,0,${.6-(v-B)/3e3})`
c[f](0,0,w,h)

c[Z]='#fff'
c.fillText(t<2048?~~t:(v=0,H++,'YOU WIN!!'),9,45)

H>150&&k==0&&location.reload()
requestAnimationFrame(R)
}

t=y=X=I=H=v=1
Y=-10
A=B=-500

k={}
P=(e,b)=>{(q=e.keyCode)==38|q==90|q==87?k.u=b:0
q==39|q==68?k.r=b:q==37|q==65|q==81?k.l=b:0}
onkeydown=e=>P(e,1)
onkeyup=e=>P(e)
R()
</script>
</body>
</html>
Binary file added news/leap_lava.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2477731

Please sign in to comment.