Programming Tutorials

  • Newest
  • Popular Tags
  • Famous Commodore maze program in JavaScript
    There was a single line of code written in BASIC on the original Commodore 64 that, when executed, created an intricate maze. Below is the original code.
    10 PRINT CHR$(205.5+RND(1)); : GOTO 10
    
    It basically sets up an infinite loop (GOTO 10) that randomly displays either the character 205 or 206, namely the slash or backslash character. We're going to create a similar loop in JavaScript and display the maze in the browser.

    Setup

    We'll do this all in one HTML file, so create a new HTML file with the following code.
    <!DOCTYPE html>
    <html>  
    <head>
    <title>Maze Pattern</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    
    <textarea id="maze"></textarea>
    
    </body>  
    </html>
    

    Become a member to have access to the full tutorial.
    mrdaniel wrote this tutorial on 6/9/14 | javascript, maze
    Comments
  • +
  • 2
  • -
  • I wanted to get the logic down to a single line, so I had a play on codepen, and it ended up getting a bit of love, so i've added in a link back to here. http://codepen.io/themitchnz/pen/ovtBb
  • +
  • 1
  • -
  • Also:
    for (var i=0;i<3000;i++) {
      document.getElementById("maze").innerHTML+= (Math.random() > 0.5) ? '\u27CB' : '\u27CD';
    }
  • +
  • 1
  • -
  • @lumberjack87 You're right it wasn't displaying the slash in the tutorial code, fixed it now though, thanks!
  • +
  • 0
  • -
  • +
  • 0
  • -
  • Need to add backslash to the maze return:
    maze+= '\u27CB'
  • +
  • 0
  • -
  • Hello guys, For some reason my maze is not displaying. Instead it just displays the text "u27CB" and "u27CD" all over in the text area. I'm writing my code in plnkr.co. Here is the link: http://plnkr.co/edit/iBszllmOwbGAij2Fpe61?p=preview
    Login to submit a comment