Third draft


<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="300"

style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>

<script>

window.addEventListener('keydown',this.check,false);

//Initialize variables

var n=20,p=0,r=0,s=15,x=0,y=0;

//initialize strings

const str = 'quick brown fox jumps over the lazy dog';

const words = str.split(' ');

const words_size=8;

const wa = [];

const xa = [];

const ya = [];

const ra = [];

const la = [];

var m = Math.floor(Math.random() * words_size);

var q=words[m];

var l=q.length;

//initialize canvas

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.font='15px Courier New';

update();

function check(e) {

    var code = e.keyCode;

    switch (code) {

        case 13: if (p==0) {

                add_word();

            }
            else if (check_word()) {

                add_word();

            }
            break;

        case 37: x--; break; //Left key

        case 38: y--; break; //Up key

        case 39: x++; break; //Right key

        case 40: y++; break; //Down key

        case 82: if (r==0){r=1;}else{r=0;} break; //Rotate

        default: alert(code); //Everything else

    }

    update();

}

function check_word(){

    var letter_match = false;

    var word_match = true;

    //loop through all letters of the current word

    for (var i=0;i<l;i++){

        //loop through all old words

        for (var j=0;j<p;j++){

            //loop through all letters in the j:th old word and compare to i:th letter in the current word

            for (var k=0;k<la[j];k++){

                // Does coordinates of letters match?
                if (x+i*r == xa[j]+k*ra[j] && y+i*(1-r) == ya[j]+k*(1-ra[j])){

                    // in that case chack if the characters match

                    if (q.charAt(i) === words[wa[j]].charAt(k)){

                        letter_match=true;

                    } else {

                        word_match=false;

                    }

                }

            }

        }

    }

    return letter_match * word_match;

}

//function compare(wordOne, wordTwo, index) {

//   return wordOne.charAt(index) === wordTwo.charAt(index);

//}

function add_word(){

    wa[p]=m;

    xa[p]=x;

    ya[p]=y;

    ra[p]=r;

    la[p]=l;

    //next word

    m = Math.floor(Math.random() * words_size);

    q=words[m];

    l=q.length;

    p=p+1;   

}

function update(){

    //keep word inside canvas

    x=Math.max(x,0);

    y=Math.max(y,0);

    x=Math.min(x,n-(l-1)*r-1);

    y=Math.min(y,n+(l-1)*(r-1)-1);

    //update canvas

    ctx.beginPath();

    ctx.rect(0, 0, 300, 300);

    ctx.fillStyle = "white";

    ctx.fill();

    //print all previous words

    ctx.fillStyle = "black";

    var qt,lt;

    //loop through all words

    for (var j=0;j<p;j++){

        qt=words[wa[j]];

        //loop through all letters in j:th word

        for (var i=0;i<la[j];i++){

            ctx.fillText(qt.charAt(i),(xa[j]+i*ra[j])*s+3,(ya[j]+i*(1-ra[j]))*s+s-3);

        }

    }

    //print present word

    ctx.fillStyle = "red";

    for (var i=0;i<l;i++){

        ctx.fillText(q.charAt(i),(x+i*r)*s+3,(y+i*(1-r))*s+s-3);

    }

}

</script>

</body>

</html>

Leave a comment

Log in with itch.io to leave a comment.