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?
