Programming Tutorials

  • Newest
  • Popular Tags
  • Write A Tutorial
  • 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.


    We'll do this all in one HTML file, so create a new HTML file with the following code.
    <!DOCTYPE html>
    <title>Maze Pattern</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <textarea id="maze"></textarea>
    Instead of using the default backslash and slash characters, we're going to use specific unicode characters that represent the "mathematical rising diagonal" and "mathematical falling diagonal" with a special font to make it look nicer. The font we'll be using is called "Symbola." Let's add the font to our HTML file within the head tags.
    @font-face { font-family: "Symbola"; src: url(""); }  
    Then also add the font-family and other CSS styles to the textarea where we'll be displaying our maze.
    <textarea id="maze" style='width:100%;height:600px;font-family:Symbola;font-size:21px;'></textarea>

    The JavaScript

    So all we need to do now really is imitate the BASIC code by creating a loop that prints either one of the mathematical symbols.
    var maze = "";
    for (var i=0;i<1800;i++) {
        var m = Math.random();
        if (m>0.5) { maze+='\u27CB'; }
        else { maze+='\u27CD'; } 
    Live DemoDownload Files
    Become a member to have access to the full tutorial.
    mrdaniel wrote this tutorial on 6/9/14 | javascript, maze
  • +
  • 3
  • -
  • 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.
  • +
  • 2
  • -
  • Also:
    for (var i=0;i<3000;i++) {
      document.getElementById("maze").innerHTML+= (Math.random() > 0.5) ? '\u27CB' : '\u27CD';
  • +
  • 2
  • -
  • @lumberjack87 You're right it wasn't displaying the slash in the tutorial code, fixed it now though, thanks!
  • +
  • 1
  • -
  • +
  • 1
  • -
  • Need to add backslash to the maze return:
    maze+= '\u27CB'
  • +
  • 1
  • -
  • 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 Here is the link:
    Login to submit a comment