Labyrinths

Creates Labyrinths

by Grant

HTML

<!DOCTYPE html>
<title>Labyrinths!</title>
<body>
    <canvas id="canvas" width="300" height="300" style="border: 2px solid cyan" title="Click to start">Go get yourself some HTML5.
        <input id="keyboard" type="text" maxlength="1">
    </canvas>
    <p>
        <button id="reset" tpye="button">Reset</button>Zoom:
        <input id="zoom" type="number" value="10" min="4">Player Color:
        <input id="playercolor" type="text" value="brown">
        <p id="settings">Columns:
            <input id="c" type="number" value="30" min="4">Rows:
            <input id="r" type="number" value="30" min="4">Seed:
            <input id="seede" type="text" placeholder="Random seed" title="Every seed generates the same labyrinth. You can have more than numbers here-you can have text here as well">
            <p>Background:
                <input id="empty" type="text" value="white">Footstep color:
                <input id="footstep" type="text" value="grey">Wall color:
                <input id="wall" type="text" value="cyan">
                <p>Crown:
                    <input id="crown" type="text" value="goo.gl/HXwV8U">Gold:
                    <input id="gold" type="text" value="goo.gl/7wMSKN">
                    <p>
                        <img id="crownpic" alt="Error: Picture not found" style="visibility:hidden" src="http://goo.gl/HXwV8U" hight="10" width="10">
                        <img id="goldpic" alt="Error: Picture not found" style="visibility:hidden" src="http://goo.gl/7wMSKN" hight="10" width="10">

JavaScript

console.clear();
var my_canvas = document.getElementById("canvas");
var context = my_canvas.getContext("2d");
var textSize = 30;
var s = 10;
var parent = document.getElementById("canvas").parentNode;
var data = [];
var x;
var y;
var seed = Math.floor(Math.random() * 65535);
var UP = 1;
var LEFT = 2;
var YOU = 3;
var FOOTSTEP = 4;
var CROWN = 5;
var GOLD = 6;
var PATH = 7;
var FOOLGOLD = 8; //Not part of data array, but I didn't want to create another array, so I just used data
var PATHDIRECTION = 9;
var so;
var game = false;
var color = [];
var is = false;
var imageCrown;
var sn = 1;

//setInterval(background,200);

document.getElementById("crownpic").onerror = function () {
    document.getElementById("crown").value = "goo.gl/HXwV8U";
    document.getElementById("crownpic").src = "http://goo.gl/HXwV8U";
}

document.getElementById("crown").onclick = function () {
    document.getElementById("crownpic").style.visibility = "visible";
}

document.getElementById("crown").onblur = function () {
    setTimeout(function () {
        if (document.activeElement != document.getElementById("crown")) {
            document.getElementById("crownpic").style.visibility = "hidden";
        }
    }, 1000)
    var crownurl = document.getElementById("crown").value;
    if (crownurl.split("/" + "/")[0] != "http:" && crownurl.split("/" + "/")[0] != "https:") {
        crownurl = "http://" + crownurl;
    }
    document.getElementById("crownpic").src = crownurl;
}

document.getElementById("gold").onblur = function () {
    setTimeout(function () {
        if (document.activeElement != document.getElementById("crown")) {
            document.getElementById("goldpic").style.visibility = "hidden";
        }
    }, 1000)
    var crownurl = document.getElementById("gold").value;
    if (crownurl.split("/" + "/")[0] != "http:" && crownurl.split("/" + "/")[0] != "https:") {
        crownurl = "http://" + crownurl;
    }
    document.getElementById("goldpic").src =...