61 lines
3.4 KiB
HTML
61 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<title>Drive A Car - Experiments - srifqi</title>
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="srifqi">
|
|
<meta name="description" content="Drive a car and avoid obstacles!">
|
|
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
|
|
<link rel="stylesheet" href="/main.css">
|
|
</head>
|
|
<body style="border: 0; max-width: 100%;">
|
|
<header><h1>Drive A Car Experiment</h1></header>
|
|
<main>
|
|
<nav>
|
|
<ul class="left-menu">
|
|
<li><div><a href="/">Home</a></div></li>
|
|
<li><div><a href="./">Experiments</a></div><ul>
|
|
<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
|
|
<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
|
|
<li><a href="dip_edge_detection.html">Edge Detection</a></li>
|
|
<li><a href="dip_smoothing.html">Image Smoothing</a></li>
|
|
<li><a href="dip_grey_transform.html">Grey Transform</a></li>
|
|
<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
|
|
<li><a href="vibration_test.html">Web Vibration API</a></li>
|
|
<li><a href="addition_game.html">Addition Game</a></li>
|
|
<li><a href="negative_lens.html">Negative Lens</a></li>
|
|
<li><a href="positive_lens.html">Positive Lens</a></li>
|
|
<li><a href="waterdrop.html">Waterdrop</a></li>
|
|
<li class="active"><a href="drive_a_car.html">Drive A Car</a></li>
|
|
</ul></li>
|
|
<li><div><a href="/minetest.html">Minetest</a></div></li>
|
|
<li><div><a href="/library.html">Libraries</a></div></li>
|
|
</ul>
|
|
</nav>
|
|
<section style="max-width: calc(100% - 16px);">
|
|
<aside>
|
|
<table>
|
|
<thead>
|
|
<tr><th colspan="2">Drive A Car<br><span class="exp-kilo">1024</span></th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><th>Type</th><td>JS game</td></tr>
|
|
<tr><th>Date</th><td><time datetime="2014">2014</time></td></tr>
|
|
<tr><th>Size</th><td>984 bytes</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</aside>
|
|
<p>This is my attempt to create a demo using less than 1 KB of JavaScript. It was an attempt for JS1K entry.</p>
|
|
<p>Use arrow (<kbd>←</kbd> and <kbd>→</kbd>) or touch (left side and right side) to change lane.</p>
|
|
<p>This is the minified code:</p>
|
|
<pre>
|
|
var f=50/3,g=t=y=0,j=k=1,m=[0,0,0,0,0],h=500,w=800,p=w/8,o=w/4,r=h/5,e=250;for(n in a)a[n[0]+n[n.length>>1]]=a[n];setInterval(function(){if(j<1){return;}with(g++,a){function z(n){a.fillStyle="#"+n;}if(t>=e){t-=e;y=(y>0)?0:1;for(var A=4;A>0;)m[A]=m[--A];if(m[0]=y<1?Math.random()*3+.5|0:0,m[4]===k){j=0;font="20px sans-serif";fT("refresh for new game",w/3,h/3*2);z("f00");font="90px sans-serif";fT("crashed",w/3,h/2);return;}}t+=f;z("5e1");fR(0,0,w,h);z("b93");fR(p,0,w/4*3,h);z("6ee");fR(p+(k-1)*o,4*r,o,r);z("aaf");for(var i=0;i<5;i++){m[i]===0?0:fR(p+(m[i]-1)*o,(i-1+t/e)*r,o,r);}z("000");font="12px sans-serif";fT(g+"m",w/32,h/8)}},f);window.onkeyup=function(e){e=e.keyCode;switch(e){case 37:s(-1);break;case 39:s(1);break;}};function s(a){a>0&&k<3&&k++,a<0&&k>1&&k--}function v(x){var u=window.innerWidth,q=u*.3;x<q?s(-1):x>u-q&&s(1)}document.addEventListener("touchstart",function(e){v(e.touches[0].clientX);},!1);document.addEventListener("click",function(e){v(e.clientX);},!1);
|
|
</pre>
|
|
<p><span class="italic">Drive a car and avoid obstacles!</span></p>
|
|
<p><a href="bare/drive_a_car.html" target="_blank">open in new window</a></p>
|
|
<iframe style="width: 804px; height: 504px;" src="bare/drive_a_car.html" title="The experiment"></iframe>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|