Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<h1>FROGGER in the browser&#39;s console :)</h1>
​
<p>By <a href="https://twitter.com/jschomay">@jschomay</a></p>
​
<p>Here&#39;s a neat programming trick - <code>console.clear()</code> can be used to create animations in the console!  But why stop there?  We can make a simple ASCII game that you can play in the console.</p>
​
<a style="display:none" href="https://twitter.com/share" class="twitter-share-button" data-url="http://jsbin.com/kaluxuma/5/edit?js,console,output" data-text="Neat coding trick: play &quot;Frogger&quot; in the browser's console" data-via="jschomay" data-size="large" data-related="jschomay" data-hashtags="javascript">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
​
​
<p>How to play:</p>
​
<ul><li>Try it on <a href="http://jsbin.com/kaluxuma/5/edit?js,console,output">jsbin.com</a> (includes coffeescript source) - click "Run with JS" at the top</li></ul>
​
<p>Or for the best hands-on geeky experience:</p>
​
<ul><li><p>Copy this javascript code and paste it into your browser&#39;s console.  You will need to click outside of the console after pressing enter so the arrow keys will work: </p><p><code>
var a,b,d,e,f,g,h,k,l,m,n,p,q,r;h=&quot;&lt;0&gt;-----------------------&lt;0&gt;--------------&quot;;f=[0,20];p=[];n=!1;m=d=0;q=1;e=function(c){var s;s=p[c[0]].substr(c[1]+1,1);p[c[0]]=p[c[0]].substr(0,c[1])+&quot;X&quot;+p[c[0]].substr(c[1]+1);return s};b=function(c){return/[&lt;0&gt;]/.test(c)};k=function(){n=!0;return setTimeout(function(){alert(&quot;Oops, you got squashed.\n\nTry again&quot;);n=!1;f=[0,20];return q++},60)};
r=function(){n=!0;setTimeout(function(){alert(&quot;YAY!  You made it!  Nice.\n\nIt took you &quot;+q+&quot; tries, &quot;+m+&quot; moves, and &quot;+d+&quot; draw cycles&quot;);n=!1;m=d=0;q=1;return f=[0,20]},60)};g=null;l={38:function(){if(f[0]&lt;p.length-1)return f[0]++},40:function(){if(0&lt;f[0])return f[0]--},37:function(){if(0&lt;f[1])return f[1]--},39:function(){if(f[1]&lt;h.length-1)return f[1]++}};document.onkeydown=function(c){g=c.keyCode;return m++};
a=setInterval(function(){var c;if(!n)if(d++,l[g]&amp;&amp;(l[g](),g=null),27===g)clearInterval(a);else if(h=h.substr(-1)+h.substr(0,h.length-1),p=[&quot;ooooooooooooooooooooooooooooooooooooooooooo&quot;,h,h.split(&quot;&quot;).reverse().join(&quot;&quot;),h.substr(-11)+h.substr(0,h.length-11),h.split(&quot;&quot;).reverse().join(&quot;&quot;).substr(-11)+h.split(&quot;&quot;).reverse().join(&quot;&quot;).substr(0,h.length-11),&quot;ooooooooooooooooooooooooooooooooooooooooooo&quot;],c=e(f),console.clear(),console.log(&quot;\n\nFROGGER in the browser&#39;s console :)\n\nYour Goal: Use the arrow keys to move the &#39;X&#39; across the street and avoid the cars.\nPress &#39;Esc&#39; to stop the game.\n\n(Note, if your cursor is in the console you&#39;ll need to click on the page outside the console so the arrow keys will work)\n\n\n&quot;),
console.log(p[5]),console.log(p[4]),console.log(p[3]),console.log(p[2]),console.log(p[1]),console.log(p[0]),console.log("\n\nFull source at http://jsbin.com/kaluxuma/5/edit?js,console,output"),f[0]&gt;=p.length-1&amp;&amp;r(),b(c))return k()},60);
</code></p></li></ul>
​
<h2>Inspiration:</h2>
​
<p>I&#39;ve seen ascii art games in node.js that you can play right in the terminal, then I discovered <code>console.clear()</code> and I thought, why not?  </p>
​
<p>On a game design philosophy note, I&#39;ve seen game prototypes made in such a way to force the game designer to focus on the gameplay and mechanics rather than the art.  After the game is super fun to play with ascii art, you know it will be awesome with full art and and sound added in.  (Of course, that doesn&#39;t mean skimp on the conceptual art, even if you are only coding in ascii.)</p>
 
###
Neat Programming Trick: animation in the console
For extra geekiness appreciation, open your browser's console (command+option+j on mac/chrome)
By @jschomay
###
​
### noprotect ###
laneTemplate = "<0>-----------------------<0>--------------"
start = goal = "ooooooooooooooooooooooooooooooooooooooooooo"
frogChar = 'X'
frogPos = [0,20]
street = []
paused = false
drawCycles = 0
moves = 0
tries = 1
drawFrog = (frogPos) ->
  laneCharUnderFrog = street[frogPos[0]].substr(frogPos[1]+1,1)
  street[frogPos[0]] = street[frogPos[0]].substr(0, frogPos[1]) + frogChar + street[frogPos[0]].substr(frogPos[1]+frogChar.length)
  laneCharUnderFrog
checkCollision = (laneCharUnderFrog) ->
  /[<0>]/.test laneCharUnderFrog
lose = () ->
  paused = true
  setTimeout -> 
    alert "Oops, you got squashed.\n\nTry again"
    paused = false
    frogPos = [0,20]
    tries++
  , 60
win = () ->
  paused = true
  setTimeout -> 
    alert "YAY!  You made it!  Nice.\n\nIt took you #{tries} tries, #{moves} moves, and #{drawCycles} draw cycles"
    paused = false
    moves = drawCycles = 0
    tries = 1
    frogPos = [0,20]
  , 60
keypressed = null
movements =
  38: -> frogPos[0]++ if frogPos[0] < street.length-1
  40: -> frogPos[0]-- if frogPos[0] > 0
  37: -> frogPos[1]-- if frogPos[1] > 0
  39: -> frogPos[1]++ if frogPos[1] < laneTemplate.length-1  
document.onkeydown = ({keyCode}) ->
  keypressed = keyCode
  moves++
  
# animation loop
animate = setInterval ->
  return if paused
  drawCycles++
  # get input
  if movements[keypressed]
    movements[keypressed]()
    keypressed = null
  if keypressed is 27
    clearInterval animate
    return
  
  # update
  laneTemplate = laneTemplate.substr(-1)+laneTemplate.substr(0,laneTemplate.length-1)
  street = [
    start
    laneTemplate
    laneTemplate.split("").reverse().join("")
    laneTemplate.substr(-11) + laneTemplate.substr(0,laneTemplate.length-11)
    laneTemplate.split("").reverse().join("").substr(-11) + laneTemplate.split("").reverse().join("").substr(0,laneTemplate.length-11)
    goal
  ]
  laneCharUnderFrog = drawFrog frogPos
​
  # render
  console.clear()
  console.log "\n\nFROGGER in the browser's console :)\n\nYour Goal: Use the arrow keys to move the '"+frogChar+"' across the street and avoid the cars.\nPress 'Esc' to stop the game.\n\n(Note, if your cursor is in the console you'll need to click on the page outside the console so the arrow keys will work)\n\n\n"
  console.log street[5]
  console.log street[4]
  console.log street[3]
  console.log street[2]
  console.log street[1]
  console.log street[0]
  console.log "\n\nFull source at http://jsbin.com/kaluxuma/5/edit?js,console,output"
  
  win() if frogPos[0] >= street.length-1
  lose() if checkCollision laneCharUnderFrog
, 60
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers