Merged World with Ray Casting in ANINOOB

Canvas Ray Casting Engine for AI

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="stage">
  <canvas id="raycast-map" width="1000" height="1000"></canvas>
  <div class="target"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  <div class="source"></div>
  
  <div class="enemy_sighted">ENEMY SIGHTED</div>
  <div class="enemy_locking">ENEMY LOCKING</div>

</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  position:relative;
  min-height:1000px;
  min-width:1000px;
}
.stage{
  height:1000px;
  margin:0px;
  background-color:#000;
  position:relative;
  width:1000px;
  perspective:500px;
}
.raycast-map{
  width:1000px;
  height:1000px;
  position:absolute;
  left:0px;
  top:0px;
  display:block;
}
.source{
  position:absolute;
  top:50%;
  left:50%;
  width:11px;
  height:11px;
  background-color:#ffffff;
  border-radius:50%;
  margin-top:-5px;
  margin-left:-5px;
  pointer-events:none;
}
.source.hostile{
  background-color:#ff0000;
}
.target{
  position:absolute;
  top:50%;
  left:50%;
  width:11px;
  height:11px;
  background-color:#00cc00;
  border-radius:50%;
  margin-top:-5px;
  margin-left:-5px;
  pointer-events:none;
}

.enemy_sighted{
  position:absolute;
  width:400px;
  font-family:helvetica;
  color:#ff0000;
  font-size:24px;
  text-align:center;
  top:50%;
  left:50%;
  margin-left:-200px;
  margin-top:-30px;
  padding-top:10px;
  padding-bottom:10px;
  background-color:rgba(0,0,0,0.3);
  display:none;
  pointer-events:none;
}
.enemy_locking{
  position:absolute;
  width:400px;
  font-family:helvetica;
  color:#ff0000;
  font-size:24px;
  text-align:center;
  top:50%;
  left:50%;
  margin-left:-200px;
  margin-top:-30px;
  padding-top:10px;
  padding-bottom:10px;
  background-color:rgba(0,0,0,1);
  display:none;
  pointer-events:none;
}
.enemy_locking.show, .enemy_sighted.show{
  display:block;
}

JavaScript

var raycast = {};

raycast.source;
raycast.target;

raycast.target_health = 100;

raycast.canvas_width = 1000;
raycast.canvas_height = 1000;

raycast.source_vector3 = Array();
raycast.target_vector3;
raycast.angle = 0;
raycast.angle_inverse = 0;

raycast.enemy_sighted = $('.enemy_sighted');
raycast.enemy_locking = $('.enemy_locking');

raycast.interval;

raycast.wall_proximity = 20;

raycast.cansee = true;

raycast.init = function(source,source_vector3,target,target_vector3){

	raycast.source = source;
	raycast.target = target;
  
  raycast.source_vector3 = source_vector3;
	raycast.target_vector3 = target_vector3;

raycast.canvas = document.getElementById("raycast-map"); // grabs the canvas element
raycast.context = raycast.canvas.getContext("2d"); // returns the 2d context object
var img=new Image() //creates a variable for a new image
...