0

I want to make a Maze Game that that a learning AI player which should randomly moves and be able to learn the path that will solve the maze. the maze will have obstacles, colored in RED. when the AI reaches an obstacle, it will start again from the beginning but will have to remember that that path was a bad one. and the Goal Will be Colored in GREEN, then the AI should remember that path to the Goal.

maze image link Click Here

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Canvas Maze Game</title>
    </head>
    <body>
    <header> </header>
    <nav> </nav>
    <section>

    <div>
    <canvas id="canvas" width="415" height="415">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
    </div>

    <script type="text/javascript">
    var canvas;
    var ctx;
    var dx = 10;
    var dy = 10;
    var x = 315;
    var y = 400;
    var WIDTH = 415;
    var HEIGHT = 415;
    var img = new Image();
    var collision = 0;

    function rect(x,y,w,h) {
        ctx.beginPath();
        ctx.rect(x,y,w,h);
        ctx.closePath();
        ctx.fill();
    }

    function clear() {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        ctx.drawImage(img, 0, 0);
    }

    function init() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        img.src = "maze.gif";
        return setInterval(draw, 10);
    }

    function doKeyDown(evt){
        switch (evt.keyCode) {
            case 38:  /* Up arrow was pressed */
                if (y - dy > 0){
                    y -= dy;
                    clear();
                    collision = checkcollision();
                    if (collision == 1){
                        y += dy;
                        collision = 0;
                    }
                }
                break;
            case 40:  /* Down arrow was pressed */
                if (y + dy < HEIGHT ){
                    y += dy;
                    clear();
                    checkcollision();
                    if (collision == 1){
                        y -= dy;
                        collision = 0;
                    }
                }
                break;
             case 37:  /* Left arrow was pressed */
                if (x - dx > 0){
                    x -= dx;
                    clear();
                    checkcollision();
                    if (collision == 1){
                        x += dx;
                        collision = 0;
                    }
                }
                break;
            case 39:  /* Right arrow was pressed */
                    if ((x + dx < WIDTH)){
                        x += dx;
                        clear();
                        checkcollision();
                        if (collision == 1){
                            x -= dx;
                            collision = 0;
                        }
                    }
                break;
        }
    }

    function checkcollision() {
        var imgd = ctx.getImageData(x, y, 15, 15);
        var pix = imgd.data;
        /* for (var i = 0; n = pix.length, i < n; i += 4) {
            if (pix[i] == 0) {
                collision = 1;
            }
            if (pix[i] == 0 && pix[i + 1] == 255 && pix[i + 2] == 0) { // #00FF00

                    collision = 2;
            }
        } */
         for (var i = 0; i < 4 * 15 * 15; i += 4) {
                        if (pix[i] === 0 && pix[i + 1] === 0 && pix[i + 2] === 0) { // black
                            collision = 1; // 0 means: the rectangle can't move
                            break;
                        }
                        if (pix[i] === 0 && pix[i + 1] ===255 && pix[i + 2] === 0) { // #00FF00
                            collision = 2; // 2 means: the end point is reached

                            break;
                        }
                        if (pix[i] === 255 && pix[i + 1] ===0 && pix[i + 2] === 0) { // #00FF00
                            collision = 2; // 2 means: the end point is reached

                            break;
                        }
        }
        return collision;
    }

    function draw() {
        clear();
        ctx.fillStyle = "purple";
        rect(x, y, 15,15);
    }

    init();
    window.addEventListener('keydown',doKeyDown,true);

    </script>
    </section>
    <aside> </aside>
    <footer> </footer>
    </body>
    </html>

For now the code doesn't have an AI yet, the player basically moves using the keyboards. I would like it to be generated randomly. and store those moves somewhere in an array perhaps.
what should I do next?

2
Contributors
1
Reply
7
Views
3 Years
Discussion Span
Last Post by renoldscott
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.