Bejeweled type game

fiveworlds · April 25, 2016

Currently making a bejeweled like tile matching game. However I can't seem to make matches in more than one direction for some reason. The checklink function is checking the matches up at the moment and it should work for down if I change the minus to plus it should work but it isn't.

function setCookie(cname, cvalue, exdays) {
    "use strict";
    var d = new Date(), expires = "";
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    "use strict";
    var name = cname + "=", ca = document.cookie.split(';'), c = "", i = "";
    for (i = 0; i < ca.length; i = i + 1) {
        c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    "use strict";
    var id = getCookie("id");
    if (id !== "") {
        return (id);
    }
}

function shuffle(array) {
    "use strict";
    var currentIndex = array.length, temporaryValue, randomIndex;
 
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

function checklink(temp) {
    "use strict";
    var array = ["crystal.png", "greencrystal.png", "bluecrystal.svg", "orangecrystal.png", "redcrystal.png"],
        images = document.getElementsByTagName("img"),
        rootimage = images[temp].src,
        i = "";
    if (images[temp - 10].src === rootimage && images[temp - 20].src === rootimage) {
        for (i = temp; i > 0; i = i - 10) {
            if (i > 30) {
                images[i].src = images[i - 30].src;
            } else {
                images[i].src = shuffle(array)[0];
            }
        }
    }
}

function myFunction(a, b) {
    "use strict";
    var cookieint = parseInt(checkCookie(), 10), images = "", temp = "";
    if (checkCookie() === "") {setCookie("id", b, 30); } else if (cookieint === b + 10 || cookieint === b - 10 || cookieint === b - 1 || cookieint === b + 1) {
        images = document.getElementsByTagName("img");
        temp = document.getElementsByTagName("img")[checkCookie()].src;
        images[checkCookie()].src = a;
        images[b].src = temp;
        checklink(checkCookie());
        checklink(b);
        setCookie("id", "", 30);
    } else {setCookie("id", b, 30); }
}

function tableCreate() {
    "use strict";
    var body = document.getElementsByTagName('body')[0],
        tbl = document.createElement('table'),
        tbdy = document.createElement('tbody'),
        array = ["crystal.png", "greencrystal.png", "bluecrystal.svg", "orangecrystal.png", "redcrystal.png"],
        tr = "",
        td = "",
        image = "",
        i = 0,
        j = 0,
        y = 0;
    
    tbl.setAttribute('border', '1');
    for (i = 0; i < 10; i = i + 1) {
        tr = document.createElement('tr');
        for (j = 0; j < 10; j = j + 1) {
            td = document.createElement('td');
            image = document.createElement("img");
            image.setAttribute("src", array[Math.floor((Math.random() * 5)).toString()]);
            image.setAttribute("id", y);
            y = y + 1;
            td.appendChild(image);
            tr.appendChild(td);
        }
        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    body.appendChild(tbl);
}


function creategame() {
    "use strict";
    tableCreate();
    var i = 0;

    for (i = 0; i < document.getElementsByTagName("img").length; i = i + 1) {
        document.getElementsByTagName("img")[i].addEventListener('click', function () {myFunction(this.src, this.id); }, false);
    }
}

Unity+ · April 27, 2016

Could you link the whole project so I can test with it to find the error? I'm having trouble understanding how you are doing the checking function.

fiveworlds · April 27, 2016

It isn't much different the html is basically 8 lines long.

https://github.com/davidmather/game

**ydoaPs** · April 27, 2016

Your code could be a bit more readable. Comment to the point that you think you're overcommenting, then comment some more. Remember, future you thinks past you is an idiot. Things like "myFunction" are really bad names. Refactor to something more meaningful. And a general rule is that no physical line of code should be longer than a tweet.

Unity+ · April 27, 2016

So, what does it do atm exactly? As ydoa said, it's kind of difficult to see how everything works. I can't even get matches to work in it, if it is supposed to. Clearly there is a click event, so something is supposed to happen.

**ydoaPs** · May 2, 2016

Currently making a bejeweled like tile matching game. However I can't seem to make matches in more than one direction for some reason. The checklink function is checking the matches up at the moment and it should work for down if I change the minus to plus it should work but it isn't.

Did you ever figure out the problem?

fiveworlds · June 2, 2016

Yeah I did I asked big brother and he said that calling cookies too much can cause errors so I rewrote it without the cookies and it was fine.

Things like "myFunction" are really bad names. Refactor to something more meaningful.

I don't really care about the names though since I am making this for my own use. Whenever I am not bothered coming up with a proper name I just call it "myfunction" , "foo", "bar" , "baz". Which are placeholders until I bother coming up with a name.

Anyway I still haven't finished it yet. It is supposed to be a word matching game.

var lastselected;

function shuffle(array) {
    "use strict";
    var currentIndex = array.length, temporaryValue, randomIndex;
 
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

function checklink(temp) {
    "use strict";
    var array = ["crystal.png", "greencrystal.png", "bluecrystal.svg", "orangecrystal.png", "redcrystal.png"],
        images = document.getElementsByTagName("img"),
        rootimage = images[temp].src,
        i = "";
    
    if (temp > 20) {
        if (images[temp - 10].src === rootimage && images[temp - 20].src === rootimage) {
            for (i = temp; i > 0; i = i - 10) {
                if (i > 30) {
                    images[i].src = images[i - 30].src;
                } else {
                    images[i].src = shuffle(array)[0];
                }
            }
        }
    }
    
    if (temp < 80) {
        if (images[temp + 10].src === rootimage && images[temp + 20].src === rootimage) {
            for (i = temp + 20; i > 0; i = i - 10) {
                if (i > 30) {
                    images[i].src = images[i - 30].src;
                } else {
                    images[i].src = shuffle(array)[0];
                }
            }
        }
    }
        
    if (temp.toString().slice(-1).indexOf(8) === -1) {
        if (images[temp + 1].src === rootimage && images[temp + 2].src === rootimage) {
            for (i = temp; i > 0; i = i - 10) {
                if (i > 10) {
                    images[i].src = images[i - 10].src;
                    images[i + 1].src = images[i - 11].src;
                    images[i + 2].src = images[i - 12].src;
                } else {
                    images[i].src = shuffle(array)[0];
                    images[i + 1].src = shuffle(array)[0];
                    images[i + 2].src = shuffle(array)[0];
                }
            }
        }
    }
        
    if (temp.toString().slice(-1).indexOf(2) === -1) {
        if (images[temp - 1].src === rootimage && images[temp - 2].src === rootimage) {
            for (i = temp; i > 0; i = i - 10) {
                if (i > 10) {
                    images[i].src = images[i - 10].src;
                    images[i - 1].src = images[i - 11].src;
                    images[i - 2].src = images[i - 12].src;
                } else {
                    images[i].src = shuffle(array)[0];
                    images[i - 1].src = shuffle(array)[0];
                    images[i - 2].src = shuffle(array)[0];
                }
            }
        }
    }
}

function myFunction(selectedsrc, selectedid) {
    "use strict";
    var images = "", temp = "";
    if (lastselected === "") {
        lastselected = parseInt(selectedid, 10);
    } else if (lastselected === selectedid + 10 || lastselected === selectedid - 10 || lastselected === selectedid - 1 || lastselected === selectedid + 1) {
        selectedid = parseInt(selectedid, 10);
        images = document.getElementsByTagName("img");
        temp = document.getElementsByTagName("img")[lastselected].src;
        images[lastselected].src = selectedsrc;
        images[selectedid].src = temp;
        checklink(lastselected);
        checklink(selectedid);
        lastselected = selectedid;
    } else {
        lastselected = parseInt(selectedid, 10);
    }
    
    
}

function tableCreate() {
    "use strict";
    var body = document.getElementsByTagName('body')[0],
        tbl = document.createElement('table'),
        tbdy = document.createElement('tbody'),
        array = ["crystal.png", "greencrystal.png", "bluecrystal.svg", "orangecrystal.png", "redcrystal.png"],
        tr = "",
        td = "",
        image = "",
        i = 0,
        j = 0,
        y = 0;
    
    tbl.setAttribute('border', '1');
    for (i = 0; i < 10; i = i + 1) {
        tr = document.createElement('tr');
        for (j = 0; j < 10; j = j + 1) {
            td = document.createElement('td');
            image = document.createElement("img");
            image.setAttribute("src", array[Math.floor((Math.random() * 5)).toString()]);
            image.setAttribute("id", y);
            y = y + 1;
            td.appendChild(image);
            tr.appendChild(td);
        }
        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    body.appendChild(tbl);
}


function creategame() {
    "use strict";
    tableCreate();
    var i = 0;

    for (i = 0; i < document.getElementsByTagName("img").length; i = i + 1) {
        document.getElementsByTagName("img")[i].addEventListener('click', function () {myFunction(this.src, this.id); }, false);
    }
}

Edited June 2, 2016 by fiveworlds

Sensei · June 2, 2016

Does JavaScript cookies work the same as in PHP?

If so, you were doing it wrong in the initial source code:

you need to generate all cookies prior anything is printed to output.

http://php.net/manual/en/function.setcookie.php

Cookies are generated and sent in HTTP response header, prior the body of HTML page.

You can use f.e.

<?php header("Set-Cookie: name=user");?>

Instead of setcookie() and it'll perfectly fine.

http://php.net/manual/en/function.header.php

But if it's:

<?php printf( "<html><body>Blah</body></html>" ); header("Set-Cookie: name=user");?>

It won't work as expected!

There is generated body of response, so header is already sent.. It can't be sent the second time.

You probably copied code of setCookie/getCookie/checkCookie from

http://www.w3schools.com/js/js_cookies.asp

as they look nearly the same as yours.

Have you checked what output (in personal firewall packet log for instance, or php script printing HTTP headers) what header you will get if you use multiple times yours JS's setCookie().. ?

Edited June 2, 2016 by Sensei

fiveworlds · June 3, 2016

Does JavaScript cookies work the same as in PHP?

Obviously not php runs server-side javascript runs client side. Therefore if I set a cookie in php to access the cookie the page must be reloaded. In javascript however there is no need to reload the browser as everything occurs in the client side.

You probably copied code of setCookie/getCookie/checkCookie from

http://www.w3schools.../js_cookies.asp

as they look nearly the same as yours.

I don't see how that is even remotely relevant they don't own javascript. Their example looks exactly like http://www.queness.com/post/666/weekly-tips-learn-how-to-use-cookie-with-javascript from 2009 before they even had cookie javascript on their site. Javascript cookies are set in rfc 6265 http://tools.ietf.org/html/rfc6265.

Also I don't believe copying off a site dedicated to teaching thousands if not millions of people should even be considered copying. In fact I think them turning around and saying no you can't use our site to learn off would be a really shitty thing to do. Many people like me haven't gone to college and can't afford to go to college and learn off websites.

Edited June 3, 2016 by fiveworlds

fiveworlds · June 6, 2016

Anyway I haven't run into any other problems so far. The game now keeps score and detects wrong moves.

window.onload = function () {
    
    function ImagePreloader(array) {
        
        function LoadImage(url, index) {
            return new Promise(function (resolve, reject) {
                var img = new Image();
                img.onload = function () {
                    resolve(url);
                };
                img.onerror = function () {
                    reject(url);
                };
                img.src = url;
            });
        }

        function LoadImages(array) {
            return new Promise(function (resolve, reject) {
                var fail = false, index;
                for (index = 0; index < array.length; index = index + 1) {
                    try {
                        LoadImage(array[index], index);
                    } catch (err) {
                        fail = true;
                    }
                }
                if (fail === true) {
                    reject(array);
                } else {
                    resolve(array);
                }
            });
        }

        return new Promise(function (resolve, reject) {
            var fail = false;
            try {
                LoadImages(array);
            } catch (err) {
                fail = true;
            }
            if (fail === true) {
                reject(array);
            } else {
                resolve(array);
            }
        });
    }

    var array = ["crystal.png", "greencrystal.png", "bluecrystal.svg", "orangecrystal.png", "redcrystal.png"];

    array = array.reverse().filter(function (e, i, array) {
        return array.indexOf(e, i + 1) === -1;
    }).reverse();

    new ImagePreloader(array).then(function (array) {

        var lastselected;

        function stylesheet() {
            var headContent = document.getElementsByTagName('head')[0], style = document.createElement('style'), css = "body{margin:0px;}#gamecontainer td{border:0px solid black;}#gamecontainer img{width:50px;height:50px;cursor:pointer;}#gamecontainer img:hover{ transform: rotate(90deg);-ms-transform: rotate(90deg); /* IE 9 */-moz-transform: rotate(90deg); /* Firefox */-webkit-transform: rotate(90deg); /* Safari and Chrome */-o-transform: rotate(90deg);}tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd){background:#98DAD8}tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even){background:#E2FFE1}#gamecontainer table{border: 5px solid orange;border-collapse:collapse; user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;}#gamecontainer #score::before{content: \"Score: \"}#gamecontainer #score{user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;cursor:default;}";
            css = document.createTextNode(css);
            style.appendChild(css);
            headContent.appendChild(style);
        }
        
        function shuffle(array) {
            "use strict";
            var currentIndex = array.length, temporaryValue, randomIndex;

            // While there remain elements to shuffle...
            while (0 !== currentIndex) {

                // Pick a remaining element...
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;

                // And swap it with the current element.
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        }

        function checklink(temp, match) {
          
            var images = document.getElementsByTagName("img"),
                rootimage = images[temp].src,
                i = "";
            
            if (temp > 30) {
                if (images[temp - 10].src === rootimage && images[temp - 20].src === rootimage && images[temp - 30].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 40) {
                            images[i].src = images[i - 40].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                        }
                    }
                }
            }

            if (temp > 10) {
                if (images[temp - 10].src === rootimage && images[temp - 20].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 30) {
                            images[i].src = images[i - 30].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                        }
                    }
                }
            }

            if (temp < 70) {
                if (images[temp + 10].src === rootimage && images[temp + 20].src === rootimage && images[temp + 30].src === rootimage) {
                    match = true;
                    for (i = temp + 30; i > 0; i = i - 10) {
                        if (i > 40) {
                            images[i].src = images[i - 40].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                        }
                    }
                }
            }
            
            if (temp < 80) {
                if (images[temp + 10].src === rootimage && images[temp + 20].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp + 20; i > 0; i = i - 10) {
                        if (i > 30) {
                            images[i].src = images[i - 30].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                        }
                    }
                }
            }
            
            if (temp > 10 && temp < 90) {
                if (images[temp - 10].src === rootimage && images[temp + 10].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp + 10; i > 0; i = i - 10) {
                        if (i > 30) {
                            images[i].src = images[i - 30].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                        }
                    }
                }
            }

            if (temp.toString().slice(-1).indexOf(7) === -1 && temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1) {
                if (images[temp + 1].src === rootimage && images[temp + 2].src === rootimage && images[temp + 3].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            images[i].src = images[i - 10].src;
                            images[i + 1].src = images[i - 11].src;
                            images[i + 2].src = images[i - 12].src;
                            images[i + 3].src = images[i - 13].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                            images[i + 1].src = shuffle(array)[0];
                            images[i + 2].src = shuffle(array)[0];
                            images[i + 3].src = shuffle(array)[0];
                        }
                    }
                }
            }
            
            if (temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1) {
                if (images[temp + 1].src === rootimage && images[temp + 2].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;                    
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            images[i].src = images[i - 10].src;
                            images[i + 1].src = images[i - 11].src;
                            images[i + 2].src = images[i - 12].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                            images[i + 1].src = shuffle(array)[0];
                            images[i + 2].src = shuffle(array)[0];
                        }
                    }
                }
            }

            if (temp.toString().slice(-1).indexOf(2) === -1 && temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1) {
                if (images[temp - 1].src === rootimage && images[temp - 2].src === rootimage && images[temp - 3].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            images[i].src = images[i - 10].src;
                            images[i - 1].src = images[i - 11].src;
                            images[i - 2].src = images[i - 12].src;
                            images[i - 3].src = images[i - 13].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                            images[i - 1].src = shuffle(array)[0];
                            images[i - 2].src = shuffle(array)[0];
                            images[i - 3].src = shuffle(array)[0];
                        }
                    }
                }
            }
            
            if (temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1) {
                if (images[temp - 1].src === rootimage && images[temp - 2].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            images[i].src = images[i - 10].src;
                            images[i - 1].src = images[i - 11].src;
                            images[i - 2].src = images[i - 12].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                            images[i - 1].src = shuffle(array)[0];
                            images[i - 2].src = shuffle(array)[0];
                        }
                    }
                }
            }
            
            if (temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1) {
                if (images[temp - 1].src === rootimage && images[temp + 1].src === rootimage) {
                    match = true;
                    document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            images[i].src = images[i - 10].src;
                            images[i - 1].src = images[i - 11].src;
                            images[i + 1].src = images[i + 11].src;
                        } else {
                            images[i].src = shuffle(array)[0];
                            images[i - 1].src = shuffle(array)[0];
                            images[i + 1].src = shuffle(array)[0];
                        }
                    }
                }
            }
            
            
            return match;
        }

        function myFunction(selectedsrc, selectedid) {
            
            
            var images = "", temp = "", match, tempselected;
            
            if (parseInt(selectedid, 10) !== lastselected) {
                if (lastselected === "") {
                    tempselected = lastselected;
                    lastselected = parseInt(selectedid, 10);
                } else if (lastselected === selectedid + 10 || lastselected === selectedid - 10 || lastselected === selectedid - 1 || lastselected === selectedid + 1) {
                    selectedid = parseInt(selectedid, 10);
                    images = document.getElementsByTagName("img");
                    temp = document.getElementsByTagName("img")[lastselected].src;
                    images[lastselected].src = selectedsrc;
                    images[selectedid].src = temp;
                    match = false;
                    match = checklink(lastselected, match);
                    match = checklink(selectedid, match);
                    if (match === false) {
                        images[lastselected].src = temp;
                        images[selectedid].src = selectedsrc;
                    }
                    tempselected = lastselected;
                    lastselected = selectedid;

                } else {
                    tempselected = lastselected;
                    lastselected = parseInt(selectedid, 10);
                }
                
                
                document.getElementById(selectedid).parentElement.style.background = "yellow";
               
                if(tempselected !== undefined)
                {
                    if (tempselected % 2 === 0) {
                            document.getElementById(tempselected).parentElement.style.background = "#E2FFE1";
                    } else {
                         document.getElementById(tempselected).parentElement.style.background = "#98DAD8";
                    }
                }
                tempselected = null;
                
            }

            
        }

        function tableCreate() {
           
            var gamecontainer = document.getElementById('gamecontainer'),
                tbl = document.createElement('table'),
                tbdy = document.createElement('tbody'),
                tr = "",
                td = "",
                image = "",
                i = 0,
                j = 0,
                y = 0;

            
            for (i = 0; i < 10; i = i + 1) {
                tr = document.createElement('tr');
                for (j = 0; j < 10; j = j + 1) {
                    td = document.createElement('td');
                    image = document.createElement("img");
                    image.setAttribute("src", array[Math.floor((Math.random() * 5)).toString()]);
                    image.setAttribute("id", y);
                    y = y + 1;
                    td.appendChild(image);
                    tr.appendChild(td);
                    if(j===9 && i===0){
                        td = document.createElement('td');
                        td.setAttribute("rowspan","10");
                        td.setAttribute("colspan","1");
                        td.style.borderLeft="5px solid orange";
                        div = document.createElement("div");
                        score = document.createElement("div");
                        score.setAttribute("id","score");
                        score.innerHTML = "0";
                        div.appendChild(score);
                        td.appendChild(div);                        
                        tr.appendChild(td);
                    }
                }
                tbdy.appendChild(tr);
            }
            tbl.appendChild(tbdy);
            gamecontainer.appendChild(tbl);
            
        }

        ///self executing function similar to php's __Constuct
        (function creategame() {
            
            tableCreate();
            stylesheet();
            var i = 0;

            for (i = 0; i < document.getElementsByTagName("img").length; i = i + 1) {
                document.getElementsByTagName("img")[i].addEventListener('click', function () {
                    myFunction(this.src, this.id); 
                }, false);
            }
        })();


    });
};

Endy0816 · June 7, 2016

Glad your project is coming together. What are you envisioning for the word matching aspect?

Edited June 7, 2016 by Endy0816

fiveworlds · June 7, 2016

My mom is a primary school teacher but she is getting old now and so she moved into some special needs assistant work at her school. She wanted me to make a game for her school ipad where she could have the kid match words from a list she could set.

Endy0816 · June 7, 2016

Nice, always fun when you can use tech to help out.

Just need to look at switching out the images now. Then figure out how you want your mom(or any other instructors) to enter in words and be all done

Thorham · June 7, 2016

You really need to get rid of all that duplicate code.

This:

if (temp > 30) {
    if (images[temp - 10].src === rootimage && images[temp - 20].src === rootimage && images[temp - 30].src === rootimage) {
        match = true;
        document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
        for (i = temp; i > 0; i = i - 10) {
            if (i > 40) {
                images[i].src = images[i - 40].src;
            } else {
                images[i].src = shuffle(array)[0];
            }
        }
    }
}

And this:

if (temp.toString().slice(-1).indexOf(7) === -1 && temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1) {
    if (images[temp + 1].src === rootimage && images[temp + 2].src === rootimage && images[temp + 3].src === rootimage) {
        match = true;
        document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;
        for (i = temp; i > 0; i = i - 10) {
            if (i > 10) {
                images[i].src = images[i - 10].src;
                images[i + 1].src = images[i - 11].src;
                images[i + 2].src = images[i - 12].src;
                images[i + 3].src = images[i - 13].src;
            } else {
                images[i].src = shuffle(array)[0];
                images[i + 1].src = shuffle(array)[0];
                images[i + 2].src = shuffle(array)[0];
                images[i + 3].src = shuffle(array)[0];
            }
        }
    }
}

Don't copy paste these five times. It makes code harder to read and harder to maintain. Copy paste seems easy, but it isn't. Making a function and calling the function is easy. Get rid of habits like this as quickly as possible.

fiveworlds · June 7, 2016

Don't copy paste these five times. It makes code harder to read and harder to maintain. Copy paste seems easy, but it isn't. Making a function and calling the function is easy. Get rid of habits like this as quickly as possible.

It'll fail on cannot find .src of undefined. See for yourself. The problem being that images[temp].src is being evaluated in the array. I don't know if there is a way to pass a variable to an if statement in a function without it being evaluated beforehand. "" won't work because it will convert the variable to a string. I would need to use a non existant variable type unevaluated boolean.

window.onload = function () {

var count=0;

function ImagePreloader(array) {

function LoadImage(url, index) {

var img = new Image();

img.onload = function () {

count=count+1;

if(count === array.length){game();}

};

img.onerror = function () {

};

img.src = url;

}

function LoadImages(array) {

var index;

for (index = 0; index < array.length; index = index + 1) {

LoadImage(array[index], index);

}

}

LoadImages(array);

}

var array = ["crystal.png", "greencrystal.png", "bluecrystal.png", "orangecrystal.png", "redcrystal.png"];

array = array.reverse().filter(function (e, i, array) {

return array.indexOf(e, i + 1) === -1;

}).reverse();

ImagePreloader(array);

function game(){

var lastselected;

function stylesheet() {

var headContent = document.getElementsByTagName('head')[0], style = document.createElement('style'), css = "body{margin:0px;}#gamecontainer td{border:0px solid black;}#gamecontainer img{width:50px;height:50px;cursor:pointer;}#gamecontainer img:hover{ transform: rotate(90deg);-ms-transform: rotate(90deg); /* IE 9 */-moz-transform: rotate(90deg); /* Firefox */-webkit-transform: rotate(90deg); /* Safari and Chrome */-o-transform: rotate(90deg);}tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd){background:#98DAD8}tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even){background:#E2FFE1}#gamecontainer table{border: 5px solid orange;border-collapse:collapse; user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;}#gamecontainer #score::before{content: \"Score: \"}#gamecontainer #score{user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;cursor:default;}";

css = document.createTextNode(css);

style.appendChild(css);

headContent.appendChild(style);

}

function shuffle(array) {

"use strict";

var currentIndex = array.length, temporaryValue, randomIndex;

// While there remain elements to shuffle...

while (0 !== currentIndex) {

// Pick a remaining element...

randomIndex = Math.floor(Math.random() * currentIndex);

currentIndex -= 1;

// And swap it with the current element.

temporaryValue = array[currentIndex];

array[currentIndex] = array[randomIndex];

array[randomIndex] = temporaryValue;

}

return array;

}

function checklink(temp, match) {

var images = document.getElementsByTagName("img"),

rootimage = images[temp].src,

i = "";

linkarray = [temp > 30,images[temp - 10].src === rootimage && images[temp - 20].src === rootimage && images[temp - 30].src === rootimage,temp,images,undefined,undefined,undefined,undefined,undefined,undefined,-10,0,temp > 10,images[temp - 10].src === rootimage && images[temp - 20].src === rootimage,temp,images,undefined,undefined,undefined,undefined,undefined,undefined,-10,0,temp < 70,images[temp + 10].src === rootimage && images[temp + 20].src === rootimage && images[temp + 30].src === rootimage,temp,images,undefined,undefined,undefined,undefined,undefined,undefined,-40,30,temp < 80,images[temp + 10].src === rootimage && images[temp + 20].src === rootimage,temp,images,undefined,undefined,undefined,undefined,undefined,undefined,-30,20,temp < 80,images[temp + 10].src === rootimage && images[temp + 20].src === rootimage,temp,images,undefined,undefined,undefined,undefined,undefined,undefined,-30,20,temp > 10 && temp < 90,images[temp - 10].src === rootimage && images[temp + 10].src === rootimage,temp,images,undefined,undefined,undefined,undefined,undefined,undefined,-30,10,temp.toString().slice(-1).indexOf(7) === -1 && temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1,images[temp + 1].src === rootimage && images[temp + 2].src === rootimage && images[temp + 3].src === rootimage,temp,images,1,2,-11,-12,3,-13,-10,0,temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1,images[temp + 1].src === rootimage && images[temp + 2].src === rootimage,temp,images,1,2,-11,-12,undefined,undefined,-10,0,temp.toString().slice(-1).indexOf(2) === -1 && temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1,images[temp - 1].src === rootimage && images[temp - 2].src === rootimage && images[temp - 3].src === rootimage,temp,images,-1,-2,-11,-12,-3,-13,-10,0,temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1,images[temp - 1].src === rootimage && images[temp - 2].src === rootimage,temp,images,-1,-2,-11,-12,undefined,undefined,-10,0,temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1,images[temp - 1].src === rootimage && images[temp + 1].src === rootimage,temp,images,-1,1,-11,11,undefined,undefined,-10,0];

for (i=0; i<linkarray.length; i=i+12){

match=link(linkarray,linkarray[i+1],linkarray[i+2],linkarray[i+3],linkarray[i+4],linkarray[i+5],linkarray[i+6],linkarray[i+6],linkarray[i+7],linkarray[i+8],linkarray[i+9],linkarray[i+10],linkarray[i+11]);

}

return match;

}

function myFunction(selectedsrc, selectedid) {

var images = "", temp = "", match, tempselected;

if (parseInt(selectedid, 10) !== lastselected) {

if (lastselected === "") {

tempselected = lastselected;

lastselected = parseInt(selectedid, 10);

} else if (lastselected === selectedid + 10 || lastselected === selectedid - 10 || lastselected === selectedid - 1 || lastselected === selectedid + 1) {

selectedid = parseInt(selectedid, 10);

images = document.getElementsByTagName("img");

temp = document.getElementsByTagName("img")[lastselected].src;

images[lastselected].src = selectedsrc;

images[selectedid].src = temp;

match = false;

match = checklink(lastselected, match);

match = checklink(selectedid, match);

if (match === false) {

images[lastselected].src = temp;

images[selectedid].src = selectedsrc;

}

tempselected = lastselected;

lastselected = selectedid;

} else {

tempselected = lastselected;

lastselected = parseInt(selectedid, 10);

}

document.getElementById(selectedid).parentElement.style.background = "yellow";

if(tempselected !== undefined)

{

if (tempselected % 2 === 0) {

document.getElementById(tempselected).parentElement.style.background = "#E2FFE1";

} else {

document.getElementById(tempselected).parentElement.style.background = "#98DAD8";

}

}

tempselected = null;

}

}

function link(firstif,secondif,temp,images,a,b,c,d,e,f,g,h){

if (firstif) {

if (secondif) {

match = true;

document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+100;

for (i = temp + h; i > 0; i = i - 10) {

if (i > g*-1) {

images.src = images[i + g].src;

if(a){

images[i + a].src = images[i + c].src;

}

if(b){

images[i + b].src = images[i + d].src;

}

if(e){

images[i + e].src = images[i - f].src;

}

} else {

images.src = shuffle(array)[0];

if(a){

images[i + a].src = shuffle(array)[0];

}

if(b){

images[i + b].src = shuffle(array)[0];

}

if(e){

images[i + e].src = shuffle(array)[0];

}

}

}

}

}

}

function tableCreate() {

var gamecontainer = document.getElementById('gamecontainer'),

tbl = document.createElement('table'),

tbdy = document.createElement('tbody'),

tr = "",

td = "",

image = "",

i = 0,

j = 0,

y = 0;

for (i = 0; i < 10; i = i + 1) {

tr = document.createElement('tr');

for (j = 0; j < 10; j = j + 1) {

td = document.createElement('td');

image = document.createElement("img");

image.setAttribute("src", array[Math.floor((Math.random() * 5)).toString()]);

image.setAttribute("id", y);

y = y + 1;

td.appendChild(image);

tr.appendChild(td);

if(j===9 && i===0){

td = document.createElement('td');

td.setAttribute("rowspan","10");

td.setAttribute("colspan","1");

td.style.borderLeft="5px solid orange";

div = document.createElement("div");

score = document.createElement("div");

score.setAttribute("id","score");

score.innerHTML = "0";

div.appendChild(score);

td.appendChild(div);

tr.appendChild(td);

}

}

tbdy.appendChild(tr);

}

tbl.appendChild(tbdy);

gamecontainer.appendChild(tbl);

}

///self executing function similar to php's __Constuct

(function creategame() {

tableCreate();

stylesheet();

var i = 0;

for (i = 0; i < document.getElementsByTagName("img").length; i = i + 1) {

document.getElementsByTagName("img").addEventListener('click', function () {

myFunction(this.src, this.id);

}, false);

}

})();

}

};

I took out the promises because when I tested it on the ipad the promises were unsupported and caused a whitescreen.

Just need to look at switching out the images now.

I was either going to use tiles like scrabble letters or just switch .src with .innerhtml.

Then figure out how you want your mom(or any other instructors) to enter in words and be all done

Pretty much i think i will have to put the words in instead of expecting the game to generate the words because there are so few vowels compared to constants. I will also need to look at removing letters that aren't used. If I just put all the letters of the alphabet in I'd be lucky to get a single word out of it.

Edited June 7, 2016 by fiveworlds

fiveworlds · June 9, 2016

Okay, there is one way of making the function work .... using eval(). I tend not to use eval as it is considered bad practice.

function checklink(temp, match) {

var images = document.getElementsByTagName("img"),
rootimage = images[temp].src,
i = "",
array = [
{
"firstif": "temp > 30",
"secondif": "images[temp - 10].src === rootimage && images[temp - 20].src === rootimage && images[temp - 30].src === rootimage",
"g": 40, "h": 0, "score": 100
},
{
"firstif": "temp > 20",
"secondif": "images[temp - 10].src === rootimage && images[temp - 20].src === rootimage",
"g": 30, "h": 0, "score": 100
},
{
"firstif": "temp < 70",
"secondif": "images[temp + 10].src === rootimage && images[temp + 20].src === rootimage && images[temp + 30].src === rootimage",
"g": 40, "h": 30, "score": 100
},
{
"firstif": "temp < 80",
"secondif": "images[temp + 10].src === rootimage && images[temp + 20].src === rootimage",
"g": 30, "h": 20, "score": 100
},
{
"firstif": "temp > 10 && temp < 90",
"secondif": "images[temp - 10].src === rootimage && images[temp + 10].src === rootimage",
"g": 30, "h": 10, "score": 100
},
{
"firstif": "temp.toString().slice(-1).indexOf(7) === -1 && temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1",
"secondif": "images[temp + 1].src === rootimage && images[temp + 2].src === rootimage && images[temp + 3].src === rootimage",
"a": 1, "b": 2, "c": 11, "d": 12, "e": 3, "f": 12, "g": 10, "h": 0, "score": 100
},
{
"firstif": "temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1",
"secondif": "images[temp + 1].src === rootimage && images[temp + 2].src === rootimage",
"a": 1,"b": 2,"c": 11,"d": 12,"g": 10,"h": 0,"score": 100
},
{
"firstif": "temp.toString().slice(-1).indexOf(2) === -1 && temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1",
"secondif": "images[temp - 1].src === rootimage && images[temp - 2].src === rootimage && images[temp - 3].src === rootimage",
"a": -1,"b": -2,"c": 11,"d": 12,"e": -3,"f": 13,"g": 10,"h": 0,"score": 100
},
{
"firstif": "temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1",
"secondif": "images[temp - 1].src === rootimage && images[temp - 2].src === rootimage",
"a": -1, "b": -2, "c": 11, "d": 12, "g": 10, "h": 0, "score": 100
},
{
"firstif": "temp.toString().slice(-1).indexOf(9) === -1 && temp.toString().slice(-1).indexOf(0) === -1",
"secondif": "images[temp - 1].src === rootimage && images[temp + 1].src === rootimage",
"a": -1, "b": 1, "c": 11, "d": -11, "g": 10, "h": 0, "score": 100
}

];

for(i=0; i<array.length; i=i+1){
a=array;
match = link(a.firstif,a.secondif,temp,images,a.a,a.b,a.c,a.d,a.e,a.f,a.g,a.h,match,rootimage,a.score);
}

return match;
}

function link(firstif,secondif,temp,images,a,b,c,d,e,f,g,h,match,rootimage,score){
firstif = window.eval.call(window,'(function (images,temp,rootimage) {return '+firstif+';})')(images,temp,rootimage);
if (Boolean(firstif)) {
secondif = window.eval.call(window,'(function (images,temp,rootimage) {return '+secondif+';})')(images,temp,rootimage);
if (Boolean(secondif)) {
match = true;
document.getElementById("score").innerHTML = parseInt(document.getElementById("score").innerHTML, 10)+score;
for (i = temp + h; i > 0; i = i - 10) {
if (i > g) {
images.src = images[i - g].src;
if(a){images[i + a].src = images[i - c].src;}
if(b){images[i + b].src = images[i - d].src;}
if(e){images[i + e].src = images[i - f].src;}
} else {
images.src = shuffle(array)[0];
if(a){images[i + a].src = shuffle(array)[0];}
if(b){images[i + b].src = shuffle(array)[0];}
if(e){images[i + e].src = shuffle(array)[0];}
}
}
}
}

return match;

}

fiveworlds · June 19, 2016

My latest error. I have the following code working fine.

window.onload = function () {
    var canvas = document.getElementById('myCanvas'),
        context = canvas.getContext('2d'),
        boundingrect = canvas.getBoundingClientRect(),
        count = 0,
        imageObj = new Image(),
        t,
        canvas_img = [],
        offscreenCanvas = document.createElement("canvas"),
        offscreenContext = offscreenCanvas.getContext("2d"),
        j,
        i,
        mousePos,
        canvasdata,
        array = ["crystal.png", "greencrystal.png", "bluecrystal.png", "orangecrystal.png", "redcrystal.png"],
        lastselected,
        selectedid,
        shufflearray = [];
      
    function getMousePos(e) {
        return {
            x: e.clientX - boundingrect.left,
            y: e.clientY - boundingrect.top
        };
    }
    
    function game() {
      
        (function () {

            for (i = 0; i < array.length; i = i + 1) {
                offscreenCanvas[i] = document.createElement("canvas");
                offscreenCanvas[i].width = 90;
                offscreenCanvas[i].height = 116;
                offscreenContext[i] = offscreenCanvas[i].getContext("2d");            
                imageObj.src = array[i];
                offscreenContext[i].drawImage(imageObj, 0, 0, 90, 116);
                canvasdata = offscreenContext[i].getImageData(0, 0, offscreenCanvas[i].width, offscreenCanvas[i].height);
                shufflearray[i] = {
                    data      : imageObj,
                    imagedata : canvasdata,
                    src       : imageObj.src,
                    width     : imageObj.naturalWidth,
                    height    : imageObj.naturalHeight
                }
            }
            
            t = canvas_img.length;
            for (j = 10; j < (canvas.height - imageObj.naturalHeight); j = j + 10 + imageObj.naturalHeight) {
                for (i = 20; i < (canvas.width - imageObj.naturalWidth); i = i + 10 + imageObj.naturalWidth) {
                    index = Math.floor((Math.random() * 5)).toString();
                    imageObj.src = array[index];
                    canvasdata = offscreenContext[index].getImageData(0, 0, offscreenCanvas[index].width, offscreenCanvas[index].height);
                    canvas_img[t] = {
                        x         : i,
                        y         : j,
                        data      : imageObj,
                        imagedata : canvasdata,
                        src          : imageObj.src,
                        width     : imageObj.naturalWidth,
                        height    : imageObj.naturalHeight
                    };
                    context.fillRect(i,j,imageObj.naturalWidth+10,imageObj.naturalHeight+10);
                    context.drawImage(imageObj, i, j);
                    t = t + 1;
                }
            }
            

        })();
        
        canvas.addEventListener('click', function (e) {
            mousePos = getMousePos(e);
          
            for (i = 0; i < canvas_img.length; i = i + 1) {
                if (mousePos.x > canvas_img[i].x && mousePos.y > canvas_img[i].y) {
                    if (mousePos.x < (canvas_img[i].x + canvas_img[i].width) && mousePos.y < (canvas_img[i].y + canvas_img[i].height)) {
                        if (canvas_img[i].imagedata.data[((mousePos.y - canvas_img[i].y) * canvas_img[i].width + (mousePos.x - canvas_img[i].x)) * 4 + 3] !== 0) {
                            select(i);
                            
                        }
    
                    }
                }
            }
        });
        
        function select (selectedid) {

             if (parseInt(selectedid, 10) !== lastselected) {
                if (lastselected === undefined) {
                  lastselected = selectedid;
                  canvas_draw_image("gold",lastselected);
                } else if (lastselected === selectedid + 10 || lastselected === selectedid - 10 || lastselected === selectedid - 1 || lastselected === selectedid + 1) {
                   canvas_img = array_index_swap(canvas_img, selectedid, lastselected);
                   match = false;
                   match = checklink(lastselected, match);
                   match = checklink(selectedid, match);
                   if (match === false) {
                        canvas_img = array_index_swap(canvas_img, selectedid, lastselected);
                   }
                    
                    
                   lastselected = undefined;
                } else {
                   canvas_draw_image("black",lastselected);
                   lastselected = parseInt(selectedid, 10);
                   canvas_draw_image("gold",lastselected);
                }              
                
            }
        }
        
        function checklink(temp, match) {
          
            var rootimage = canvas_img[temp].src,
                i = "";
            
            if (temp > 30) {
                if (canvas_img[temp - 10].src === rootimage && canvas_img[temp - 20].src === rootimage && canvas_img[temp - 30].src === rootimage) {
                    match = true;
                    
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 40) {
                            canvas_img = array_index_swap(canvas_img, i, i-40);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                        }
                    }
                }
            }
            
            
             if (temp > 20) {
                if (canvas_img[temp - 10].src === rootimage && canvas_img[temp - 20].src === rootimage) {
                    match = true;
                   
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 30) {
                            canvas_img = array_index_swap(canvas_img, i, i-30);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                        }
                    }
                }
            }

            if (temp < 70) {
                if (canvas_img[temp + 10].src === rootimage && canvas_img[temp + 20].src === rootimage && canvas_img[temp + 30].src === rootimage) {
                    match = true;
                    for (i = temp + 30; i > 0; i = i - 10) {
                        if (i > 40) {
                            canvas_img = array_index_swap(canvas_img, i, i-40);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                        }
                    }
                }
            }
            
            if (temp < 80) {
                if (canvas_img[temp + 10].src === rootimage && canvas_img[temp + 20].src === rootimage) {
                    match = true;
                    
                    for (i = temp + 20; i > 0; i = i - 10) {
                        if (i > 30) {
                            canvas_img = array_index_swap(canvas_img, i, i-30);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                        }
                    }
                }
            }
            
            if (temp > 10 && temp < 90) {
                if (canvas_img[temp - 10].src === rootimage && canvas_img[temp + 10].src === rootimage) {
                    match = true;
                    
                    for (i = temp + 10; i > 0; i = i - 10) {
                        if (i > 30) {
                            canvas_img = array_index_swap(canvas_img, i, i-30);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                        }
                    }
                }
            }

            if (temp.toString().slice(-1).indexOf(7) === -1 && temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1) {
                if (canvas_img[temp + 1].src === rootimage && canvas_img[temp + 2].src === rootimage && canvas_img[temp + 3].src === rootimage) {
                    match = true;
                    
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            canvas_img = array_index_swap(canvas_img, i, i-10);
                            canvas_img = array_index_swap(canvas_img, i+1, i-11);
                            canvas_img = array_index_swap(canvas_img, i+2, i-12);
                            canvas_img = array_index_swap(canvas_img, i+3, i-13);

                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                            canvas_img = array_index_random_shuffle_swap(i+1);
                            canvas_img = array_index_random_shuffle_swap(i+2);                            
                        }
                    }
                }
            }
            
            if (temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1) {
                if (canvas_img[temp + 1].src === rootimage && canvas_img[temp + 2].src === rootimage) {
                    match = true;
                                   
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            canvas_img = array_index_swap(canvas_img, i, i-10);
                            canvas_img = array_index_swap(canvas_img, i+1, i-11);
                            canvas_img = array_index_swap(canvas_img, i+2, i-12);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                            canvas_img = array_index_random_shuffle_swap(i+1);
                            canvas_img = array_index_random_shuffle_swap(i+2);        
                        }
                    }
                }
            }

            if (temp.toString().slice(-1).indexOf(2) === -1 && temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1) {
                if (canvas_img[temp - 1].src === rootimage && canvas_img[temp - 2].src === rootimage && canvas_img[temp - 3].src === rootimage) {
                    match = true;
                  
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            canvas_img = array_index_swap(canvas_img, i, i-10);
                            canvas_img = array_index_swap(canvas_img, i-1, i-11);
                            canvas_img = array_index_swap(canvas_img, i-2, i-12);
                            canvas_img = array_index_swap(canvas_img, i-3, i-13);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                            canvas_img = array_index_random_shuffle_swap(i-1);
                            canvas_img = array_index_random_shuffle_swap(i-2);
                            canvas_img = array_index_random_shuffle_swap(i-3);
                        }
                    }
                }
            }
            
            if (temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1) {
                if (canvas_img[temp - 1].src === rootimage && canvas_img[temp - 2].src === rootimage) {
                    match = true;
                   
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            canvas_img = array_index_swap(canvas_img, i, i-10);
                            canvas_img = array_index_swap(canvas_img, i-1, i-11);
                            canvas_img = array_index_swap(canvas_img, i-2, i-12);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                            canvas_img = array_index_random_shuffle_swap(i-1);
                            canvas_img = array_index_random_shuffle_swap(i-2);
                        }
                    }
                }
            }
            
            if (temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1) {
                if (canvas_img[temp - 1].src === rootimage && canvas_img[temp + 1].src === rootimage) {
                    match = true;
                   
                    for (i = temp; i > 0; i = i - 10) {
                        if (i > 10) {
                            canvas_img = array_index_swap(canvas_img, i, i-10);
                            canvas_img = array_index_swap(canvas_img, i-1, i-11);
                            canvas_img = array_index_swap(canvas_img, i+1, i+11);
                        } else {
                            canvas_img = array_index_random_shuffle_swap(i);
                            canvas_img = array_index_random_shuffle_swap(i-1);
                            canvas_img = array_index_random_shuffle_swap(i+1);
                        }
                    }
                }
            }
            
            
            return match;
        }
        

        
        function array_index_random_shuffle_swap(i) {
            randomindex = Math.floor((Math.random() * 5)).toString();
            canvas_img[i].data = shufflearray[randomindex].data;
            canvas_img[i].imagedata = shufflearray[randomindex].imagedata;
            canvas_img[i].src = shufflearray[randomindex].src;
            canvas_img[i].width = shufflearray[randomindex].width;
            canvas_img[i].height = shufflearray[randomindex].height;
            canvas_draw_image("black",i);
            return canvas_img;
        }
    
        function array_index_swap(array, selectedid, lastselected){
            temp =  [array[selectedid].src, array[selectedid].data, array[selectedid].imagedata];
            array[selectedid].src = array[lastselected].src;
            array[selectedid].data = array[lastselected].data;
            array[selectedid].imagedata = array[lastselected].imagedata;
            array[lastselected].src = temp[0];
            array[lastselected].data = temp[1];
            array[lastselected].imagedata = temp[2];
            canvas_draw_image("black",lastselected);
            canvas_draw_image("black",selectedid);
            return array;
        }
    
        function canvas_draw_image(fillStyle,index){        
                context.fillStyle=fillStyle; context.fillRect(canvas_img[index].x,canvas_img[index].y,canvas_img[index].width,canvas_img[index].height);
                imageObj.src=canvas_img[index].src;
                context.drawImage(imageObj, canvas_img[index].x, canvas_img[index].y);
        }
    }
    

    
    function ImagePreloader(array) {
        
        function LoadImage(url, index) {
            
            var img = new Image();
            img.onload = function () {
                count = count + 1;
                if (count === array.length) {game(); }
            };
            img.onerror = function () {};
            img.src = url;
           
        }

        function LoadImages(array) {
           
            var index;
            for (index = 0; index < array.length; index = index + 1) {
                LoadImage(array[index], index);
            }
 
        }
        LoadImages(array);
    }

    array = array.reverse().filter(function (e, i, array) {
        return array.indexOf(e, i + 1) === -1;
    }).reverse();
    ImagePreloader(array);
};

But when I try writing the if statements as a single function I am getting a scoping error where canvas_img is undefined.

window.onload = function () {
    var canvas = document.getElementById('myCanvas'),
        context = canvas.getContext('2d'),
        boundingrect = canvas.getBoundingClientRect(),
        count = 0,
        imageObj = new Image(),
        t,
        canvas_img = [],
        offscreenCanvas = document.createElement("canvas"),
        offscreenContext = offscreenCanvas.getContext("2d"),
        j,
        i,
        mousePos,
        canvasdata,
        array = ["crystal.png", "greencrystal.png", "bluecrystal.png", "orangecrystal.png", "redcrystal.png"],
        lastselected,
        selectedid,
        shufflearray = [];
      
    function getMousePos(e) {
        return {
            x: e.clientX - boundingrect.left,
            y: e.clientY - boundingrect.top
        };
    }
    
    function game() {
      
        (function () {

            for (i = 0; i < array.length; i = i + 1) {
                offscreenCanvas[i] = document.createElement("canvas");
                offscreenCanvas[i].width = 90;
                offscreenCanvas[i].height = 116;
                offscreenContext[i] = offscreenCanvas[i].getContext("2d");            
                imageObj.src = array[i];
                offscreenContext[i].drawImage(imageObj, 0, 0, 90, 116);
                canvasdata = offscreenContext[i].getImageData(0, 0, offscreenCanvas[i].width, offscreenCanvas[i].height);
                shufflearray[i] = {
                    data      : imageObj,
                    imagedata : canvasdata,
                    src       : imageObj.src,
                    width     : imageObj.naturalWidth,
                    height    : imageObj.naturalHeight
                }
            }
            
            t = canvas_img.length;
            for (j = 10; j < (canvas.height - imageObj.naturalHeight); j = j + 10 + imageObj.naturalHeight) {
                for (i = 20; i < (canvas.width - imageObj.naturalWidth); i = i + 10 + imageObj.naturalWidth) {
                    index = Math.floor((Math.random() * 5)).toString();
                    imageObj.src = array[index];
                    canvasdata = offscreenContext[index].getImageData(0, 0, offscreenCanvas[index].width, offscreenCanvas[index].height);
                    canvas_img[t] = {
                        x         : i,
                        y         : j,
                        data      : imageObj,
                        imagedata : canvasdata,
                        src          : imageObj.src,
                        width     : imageObj.naturalWidth,
                        height    : imageObj.naturalHeight
                    };
                    context.fillRect(i,j,imageObj.naturalWidth+10,imageObj.naturalHeight+10);
                    context.drawImage(imageObj, i, j);
                    t = t + 1;
                }
            }
            

        })();
        
        canvas.addEventListener('click', function (e) {
            mousePos = getMousePos(e);
          
            for (i = 0; i < canvas_img.length; i = i + 1) {
                if (mousePos.x > canvas_img[i].x && mousePos.y > canvas_img[i].y) {
                    if (mousePos.x < (canvas_img[i].x + canvas_img[i].width) && mousePos.y < (canvas_img[i].y + canvas_img[i].height)) {
                        if (canvas_img[i].imagedata.data[((mousePos.y - canvas_img[i].y) * canvas_img[i].width + (mousePos.x - canvas_img[i].x)) * 4 + 3] !== 0) {
                            select(i);
                            
                        }
    
                    }
                }
            }
        });
        
        function select (selectedid) {

             if (parseInt(selectedid, 10) !== lastselected) {
                if (lastselected === undefined) {
                  lastselected = selectedid;
                  canvas_draw_image("gold",lastselected);
                } else if (lastselected === selectedid + 10 || lastselected === selectedid - 10 || lastselected === selectedid - 1 || lastselected === selectedid + 1) {
                   canvas_img = array_index_swap(canvas_img, selectedid, lastselected);
                   match = false;
                   returned_variables = checklink(lastselected, match);
                   match = returned_variables[0];
                   canvas_img = returned_variables[1];
                   returned_variables = checklink(selectedid, match);
                   match = returned_variables[0];
                   canvas_img = returned_variables[1];
                   if (match === false) {
                        canvas_img = array_index_swap(canvas_img, selectedid, lastselected);
                   }
                                       
                   lastselected = undefined;
                   
                } else {
                   canvas_draw_image("black",lastselected);
                   lastselected = parseInt(selectedid, 10);
                   canvas_draw_image("gold",lastselected);
                }              
                
            }
        }
        
        function checklink(temp, match) {
          
            var rootimage = canvas_img[temp].src,
                i = "",
            
            linkarray = [
                    {
                        "firstif": "temp > 30",
                        "secondif": "canvas_img[temp - 10].src === rootimage && canvas_img[temp - 20].src === rootimage && canvas_img[temp - 30].src === rootimage",
                        "g": 40, "h": 0, "score": 100
                    },
                    {
                        "firstif": "temp > 20",
                        "secondif": "canvas_img[temp - 10].src === rootimage && canvas_img[temp - 20].src === rootimage",
                        "g": 30, "h": 0, "score": 100
                    },
                    {
                        "firstif": "temp < 70",
                        "secondif": "canvas_img[temp + 10].src === rootimage && canvas_img[temp + 20].src === rootimage && canvas_img[temp + 30].src === rootimage",
                        "g": 40, "h": 30, "score": 100
                    },
                     {
                        "firstif": "temp < 80",
                        "secondif": "canvas_img[temp + 10].src === rootimage && canvas_img[temp + 20].src === rootimage",
                        "g": 30, "h": 20, "score": 100
                    },
                    {
                        "firstif": "temp > 10 && temp < 90",
                        "secondif": "canvas_img[temp - 10].src === rootimage && canvas_img[temp + 10].src === rootimage",
                        "g": 30, "h": 10, "score": 100
                    },
                    {
                        "firstif": "temp.toString().slice(-1).indexOf(7) === -1 && temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1",
                        "secondif": "canvas_img[temp + 1].src === rootimage && canvas_img[temp + 2].src === rootimage && canvas_img[temp + 3].src === rootimage",
                        "a": 1, "b": 2, "c": 11, "d": 12, "e": 3, "f": 12, "g": 10, "h": 0, "score": 100
                    },
                    {
                        "firstif": "temp.toString().slice(-1).indexOf(8) === -1 && temp.toString().slice(-1).indexOf(9) === -1",
                        "secondif": "canvas_img[temp + 1].src === rootimage && canvas_img[temp + 2].src === rootimage",
                        "a": 1,"b": 2,"c": 11,"d": 12,"g": 10,"h": 0,"score": 100
                    },
                    {
                        "firstif": "temp.toString().slice(-1).indexOf(2) === -1 && temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1",
                        "secondif": "canvas_img[temp - 1].src === rootimage && canvas_img[temp - 2].src === rootimage && canvas_img[temp - 3].src === rootimage",
                        "a": -1,"b": -2,"c": 11,"d": 12,"e": -3,"f": 13,"g": 10,"h": 0,"score": 100
                    },
                    {
                        "firstif": "temp.toString().slice(-1).indexOf(1) === -1 && temp.toString().slice(-1).indexOf(0) === -1",
                        "secondif": "canvas_img[temp - 1].src === rootimage && canvas_img[temp - 2].src === rootimage",
                        "a": -1, "b": -2, "c": 11, "d": 12, "g": 10, "h": 0, "score": 100
                    },
                     {
                        "firstif": "temp.toString().slice(-1).indexOf(9) === -1 && temp.toString().slice(-1).indexOf(0) === -1",
                        "secondif": "canvas_img[temp - 1].src === rootimage && canvas_img[temp + 1].src === rootimage",
                        "a": -1, "b": 1, "c": 11, "d": -11, "g": 10, "h": 0, "score": 100
                    }
                    
                ];
            
            
            for(i=0; i<array.length; i=i+1){
               a=linkarray[i];
               returned_variables = link(a.firstif,a.secondif,temp,canvas_img,a.a,a.b,a.c,a.d,a.e,a.f,a.g,a.h,match,rootimage,a.score);
               match = returned_variables[0];
               canvas_img = returned_variables[1];
                
            }        
            
            return returned_variables;
        }
        
        function link(firstif,secondif,temp,canvas_img,a,b,c,d,e,f,g,h,match,rootimage,score){
            firstif = window.eval.call(window,'(function (canvas_img,temp,rootimage) {return '+firstif+';})')(canvas_img,temp,rootimage);
            if (Boolean(firstif)) {
                secondif = window.eval.call(window,'(function (canvas_img,temp,rootimage) {return '+secondif+';})')(canvas_img,temp,rootimage);
                if (Boolean(secondif)) {
                    match = true;
                    for (i = temp + h; i > 0; i = i - 10) {
                        if (i > g) {
                            canvas_img = array_index_swap(canvas_img, i, i-g);
                            if(a){canvas_img = array_index_swap(canvas_img, i+a, i-c);}
                            if(b){canvas_img = array_index_swap(canvas_img, i+b, i-d);}
                            if(e){canvas_img = array_index_swap(canvas_img, i+e, i-f);}
                        } else {
                            array_index_random_shuffle_swap(i);
                            if(a){canvas_img = array_index_random_shuffle_swap(i+a);}
                            if(b){canvas_img = array_index_random_shuffle_swap(i+b);}
                            if(e){canvas_img = array_index_random_shuffle_swap(i+e);}
                        }
                    }
                }
            }
            
            returned_variables = [match,canvas_img];
            return returned_variables;
            
        }
        
        function array_index_random_shuffle_swap(i) {
            randomindex = Math.floor((Math.random() * 5)).toString();
            canvas_img[i].data = shufflearray[randomindex].data;
            canvas_img[i].imagedata = shufflearray[randomindex].imagedata;
            canvas_img[i].src = shufflearray[randomindex].src;
            canvas_img[i].width = shufflearray[randomindex].width;
            canvas_img[i].height = shufflearray[randomindex].height;
            canvas_draw_image("black",i);
            return canvas_img;
        }
    
        function array_index_swap(array, selectedid, lastselected){
            temp =  [array[selectedid].src, array[selectedid].data, array[selectedid].imagedata];
            array[selectedid].src = array[lastselected].src;
            array[selectedid].data = array[lastselected].data;
            array[selectedid].imagedata = array[lastselected].imagedata;
            array[lastselected].src = temp[0];
            array[lastselected].data = temp[1];
            array[lastselected].imagedata = temp[2];
            canvas_draw_image("black",lastselected);
            canvas_draw_image("black",selectedid);
            return array;
        }
    
        function canvas_draw_image(fillStyle,index){        
                context.fillStyle=fillStyle; context.fillRect(canvas_img[index].x,canvas_img[index].y,canvas_img[index].width,canvas_img[index].height);
                imageObj.src=canvas_img[index].src;
                context.drawImage(imageObj, canvas_img[index].x, canvas_img[index].y);
        }
    }
    

    
    function ImagePreloader(array) {
        
        function LoadImage(url, index) {
            
            var img = new Image();
            img.onload = function () {
                count = count + 1;
                if (count === array.length) {game(); }
            };
            img.onerror = function () {};
            img.src = url;
           
        }

        function LoadImages(array) {
           
            var index;
            for (index = 0; index < array.length; index = index + 1) {
                LoadImage(array[index], index);
            }
 
        }
        LoadImages(array);
    }

    array = array.reverse().filter(function (e, i, array) {
        return array.indexOf(e, i + 1) === -1;
    }).reverse();
    ImagePreloader(array);
};

Sensei · June 20, 2016

Are you aware that if you open your html in Chrome, you can click "Tools for Programmers" (or so),

and it'll highlight on red the all lines which are causing problems.. ?

We cannot do it for you, as you didn't provide the whole game, and all resources..

But when I try writing the if statements as a single function I am getting a scoping error where canvas_img is undefined.

This error happens in line 195, which in my case is this line:
secondif = window.eval.call(window,'(function (canvas_img,temp,rootimage) {return '+secondif+';})')(canvas_img,temp,rootimage);

Even my Firefox is mentioning which line is guilty, but you have to watch carefully. Edited June 20, 2016 by Sensei

fiveworlds · June 20, 2016

We cannot do it for you, as you didn't provide the whole game, and all resources..

Yes I did. The error you are getting is one thrown by chrome etc as a result of not loading the game in a server. I use brackets for development which comes with a builtin server http://brackets.io/. The game src files are all on the github page. https://github.com/davidmather/game

This error happens in line 195, which in my case is this line:

secondif = window.eval.call(window,'(function (canvas_img,temp,rootimage) {return '+secondif+';})')(canvas_img,temp,rootimage);

This is the error with the link function I am not getting the scope exactly right so it is causing errors because canvas_img is undefined,

Sign In

Bejeweled type game

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information