Simple AI Script Part 4

by Ozgur Ozer

HTML

<div class='scene'>
	
		<div class='grass' id='topDebug'></div>
		
		<div class='road'>
		
			<div class='ai' id='ai'>
				<div class='sensor_1'>1</div>
				<div class='sensor_2' id='sensor_2'>2</div>
				<div class='sensor_3'>3</div>
			</div>
			
			<div class='wall' id='wall'></div>
		
		</div>
		
		<div class='grass'></div>
	
	</div>

<div class='debugArea'>
        
    <input type='text' id='stepsDone' value='0' style='width:50px' />
    
    <input type='button' value='Start' onClick="runSim('1')" />
    
    <input type='button' value='Stop' onClick="runSim('0')" />
    
    <br>
    <table class='tableDebug'>
      <tr>
        <td>AI zone</td>
        <td>Wall zone</td>
        <td>Experience success</td>
        <td>Experience suggestion</td>
        <td>Trying</td>
      </tr>
      <tr>
        <td id='t_ai_zone'>-</td>
        <td id='t_wall_zone'>-</td>
        <td id='t_exp_success'>-</td>
        <td id='t_exp_sugg'>-</td>
        <td id='t_trying'>-</td>
      </tr>
    </table>
    
    <br><br>
    
    <table class='tableDebugSmall'>
      <tr>
        <td>[AI zone][Wall zone][Do]</td>
        <td>[Success]</td>
      </tr>
      <tr><td id='exp_1'>000</td><td id='succ_000'>0</td></tr>
      <tr><td id='exp_2'>001</td><td id='succ_001'>0</td></tr>
      <tr><td id='exp_3'>010</td><td id='succ_010'>0</td></tr>
      <tr><td id='exp_4'>011</td><td id='succ_011'>0</td></tr>
      <tr><td id='exp_5'>100</td><td id='succ_100'>0</td></tr>
      <tr><td id='exp_6'>101</td><td id='succ_101'>0</td></tr>
      <tr><td id='exp_7'>110</td><td id='succ_110'>0</td></tr>
      <tr><td id='exp_8'>111</td><td id='succ_111'>0</td></tr>
    </table>
    <br><br>
</div>

CSS

body
{
	background-color:#999;
	margin:0px;
	padding:0px;
}

.scene
{
	float:left;
	background-color:#000;
	width:100%;
	height:500px;
}

.grass
{
	float:left;
	background-color:#238C00;
	width:100%;
	height:100px;
    color:#ffffff;
}

.road
{
	float:left;
	background-color:#CCCCCC;
	width:100%;
	height:300px;
}

.ai
{
	position:absolute;
	width:100px;
	height:50px;
	background-color:#fff;
	margin-top:50px;
}

.wall
{
	position:absolute;
	width:50px;
	height:100px;
	background-color:#B32D00;
	right:0px;
}

.sensor_1, .sensor_2, .sensor_3
{
	position:relative;
	background-color:#fff;
	opacity:0.5;
	width:50px;
	height:50px;
	text-align:center;
}

.sensor_1
{
	top:-50px;
	left:50px;
}

.sensor_2
{
	top:-50px;
	left:100px;
	width:500px !important;
}

.sensor_3
{
	top:-50px;
	left:50px;
}

.debugArea
{
    width:100%;
    background-color:#000;
    float:left;
    height:100%;
}

.debugTextareaClass
{
    width:400px;
    height:150px;
}

.tableDebug
{
  width:100%;
  background-color:#fff;
  color:#000;
}

.tableDebugSmall
{
  width:50%;
  background-color:#fff;
  color:#000;
}

JavaScript

var c = 0;
var aiPos = 0;

var walls = 0;
var avoided = 0;
var crash = 0;

function tick()
{
    c++;
    document.getElementById('stepsDone').value = c;
    moveWall(); //move wall to the left
    checkCollision();
    experience();
}

var tickInterval;

function runSim(state)
{
    if(state == 1)//run simulation
    {
        if(c > 100)
        {
            runSim('0'); //force stop
        }else{
                tickInterval = setInterval("tick();", 20);
             } 
        
    }else{
            //stop simulation
            clearInterval(tickInterval);
            c = 0;
            document.getElementById('stepsDone').value = c;
            document.getElementById('wall').style.left = null;
            document.getElementById('wall').style.right = '0px';
        	document.getElementById('ai').style.marginTop = "50px";
        	aiPos = 0;
        	walls = 0;
        	crash = 0;
        	avoided = 0;
        
         }
}

function moveWall()
{
    var getWallX = document.getElementById('wall').offsetLeft;
    var getWallY = document.getElementById('wall').offsetTop;
    
    var getAIX = document.getElementById('sensor_2').offsetLeft+500;
    var getAIY = document.getElementById('ai').offsetTop;
    
    var successRate = Math.floor((avoided/(avoided+crash)*100));   
    
    document.getElementById('topDebug').innerHTML = "&nbsp;["+c+"]<br>&nbsp;Wall ("+getWallX+","+getWallY+")<br>&nbsp;AI ("+getAIX+","+getAIY+")<br>&nbsp;Walls: "+walls+" Avoided: "+avoided+" Crash: "+crash+" Success rate: "+successRate+"%";
        
    if(getWallX <= 0)
    {
        
        walls++;
        
    }else{
            getWallX = getWallX-20;
            document.getElementById('wall').style.left = getWallX+'px';
         }
    
}


function moveCar(direction)
{
    //auto correct
    if(aiPos < 50){aiPos = 50;}
    if(aiPos > 200){aiPos = 200;}
    
    if(direction == 'down')
    {
     	aiPos=aiPos+10;   
    }else{ 
     		aiPos=aiPos-10;   
    	 }    
    
    
...