Filling the squares on the window by using requestAnimationFrame in JavaScript example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
	</head>
<body>
<h1>Filling the Squares on window (requestAnimationFrame)</h1>
<style>
        #myId {
            background: lightgreen;
        }
    </style>

canvas: document.getElementById("myId"),
            ctx: document.getElementById("myId").getContext('2d'),

//* Suqares size *//
            xd: 0,
            yd: 0,

//* Squares drwaing position *//
            pX: 0,
            pY: 0,

repeat: 0, //* requestAnimationFrame *//

divisions: 30, // breaks frame into X × X squares

init: function () {

// Set up "Two Dimensional" Array to remember what is on and off
                this.memory = new Array(this.divisions - 1);
                for (var i = 0; i < (this.divisions + 1) ; i++) {
                    this.memory[i] = new Array(this.divisions - 1);
                }

// Size the canvas appropriately
                var width = window.innerWidth;
                var height = window.innerHeight;
                fill.canvas.width = width;
                fill.canvas.height = height;

// Size of squares is canvas width broken into equal chunks
                fill.xd = width / fill.divisions;
                fill.yd = height / fill.divisions;

//* Orange color//
                this.ctx.fillStyle = "#ff8040";

// Random starting position
                this.pX = Math.floor(Math.random() * this.divisions);
                this.pY = Math.floor(Math.random() * this.divisions);

// global
                drawLoop = function () {
                    fill.repeat = requestAnimationFrame(drawLoop);
                    fill.oneMovement();
                }
                drawLoop();

drawSquare: function (x, y) {
                fill.ctx.fillRect(x * this.xd, y * this.yd, this.xd, this.yd);
                fill.memory[x][y] = true;
            },

checkPossiblePositions: function () {
                var posToReturn = [];
                if (this.pX == 0) {
                } else if (this.memory[this.pX - 1][this.pY] == true) {  //* left not allowed *//
                } else {
                    posToReturn.push("left"); //* left covered *//
                }
                if (this.pX == this.divisions) {  //* right side not allowed *//
                } else if (this.memory[this.pX + 1][this.pY] == true) {
                } else {
                    posToReturn.push("right");   //* right side occupied *//
                }
                if (this.pY == 0) {
                } else if (this.memory[this.pX][this.pY - 1] == true) {    //* Top side not allowed *//
                } else {
                    posToReturn.push("up");  //* top covered *//
                }
                if (this.posY == this.divisions) {
                } else if (this.memory[this.pX][this.pY + 1] == true) {  //* Down side not allowed *//
                } else {
                    posToReturn.push("down");  //* down covered *//
                }

return posToReturn;

startNewRound: function () {
                cancelAnimationFrame(this.repeat);
                var newSpot = this.findEmpty();  //* new space for aimation *//

if (newSpot == "nope") {
                    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);  //* clear animation *//
                    this.init();  //* start from first *//
                } else {
                    this.pX = newSpot[0];  //* Start from new position *//
                    this.pY = newSpot[1];

drawLoop();   //* Restart Animation*//

}
            },

oneMovement: function () {
                this.drawSquare(this.pX, this.pY);
                var possiblePos = this.checkPossiblePositions();
                var numPossible = possiblePos.length;
                if (numPossible == 0) {
                    this.startNewRound();
                } else {
                    var randomDir = Math.floor(Math.random() * numPossible);
                    if (possiblePos[randomDir] == "left") {
                        this.pX--;
                    }
                    if (possiblePos[randomDir] == "right") {
                        this.pX++;
                    }
                    if (possiblePos[randomDir] == "up") {
                        this.pY--;
                    }
                    if (possiblePos[randomDir] == "down") {
                        this.pY++;
                    }
                }
            },

findEmpty: function () {
                for (var x = 0; x < (this.divisions + 1) ; x++) {
                    for (var y = 0; y < (this.divisions + 1) ; y++) {
                        if (!this.memory[x][y]) {
                            return [x, y];
                        }
                    }
                }
                return "nope";
            }
        }

setTimeout(function () {
            fill.init();
        }, 10);
    </script>
</body>
</html>

Note: We DO NOT save your trial code in our database.

Filling The Squares On The Window By Using Requestanimationframe In Javascript

Write code here

Output