Collision Elevation Engine

by Michael Prosser

HTML

<div id="output">3D</div>
<div class="engine-map">
    <img...

CSS

body {background: lightblue;padding: 20px;}
#output{
    color:#000000;
}

        
        
.engine-map{
    width:200px;
    height:200px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    position:relative;
    background-color:#ebebeb;
    overflow:hidden;
}
.engine-map img{
    position:absolute;
    top:-300px;
    left:-400px;
    width:1000px;
    height:1000px;
    display:block;
    
}
.engine-map .beacon{
    position:absolute;
    top:90px;
    left:90px;
    width:20px;
    height:20px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA1LzEyLzE1tU8pGAAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAAAR9JREFUOI2t07FthDAYQOGni2QarCBR2U2oqHAR4T6McBIDHBvkRvAIGSEj3CgZgRGyASnAyJdA8HH3Sy6Q4eNhCYibDPiKvDdqHDAA3SOwDPiewP4RoJswv7p7sLDOr/4e8AMYhBBD27Yhelx74PAPVgDvAMYY8jynLEu/d94DOgAhBMYYAKy1fu8NaG4BC+Dk64QQAKRpGla6W8A/dX62KpfAxtdZa+c6P2maUhSFv+xiQAcgpaSqqqX6sPrEeDyrYMP4KdR1vYgBKKXQWl8FrIFzXXD4ixO88KoyBKPqtipD8BNAa71Z5ye478j4m85gB7zE1oWglBLgmenv8aDzdUqpaPBXwBnIDnvr1iqfgAuQaa13gQBJktD3PcDrDxvwNmkQx94bAAAAAElFTkSuQmCC');
}

JavaScript

$(function() {
    
    var keycontroller_current_x = 0;
	var keycontroller_current_z = 0;
    
    var controller_distance_x = 0;
    var controller_distance_z = 0;
    
    var x = 0;
    var z = 0;
    var rx = 0;
    var ry = 0;
    
    var x_accelerate = .1;
    var z_accelerate = .1;
    
    var x_accelerated = .2;
    var z_accelerated = .2;
    
    var x_max_accelerate = 5;
    var z_max_accelerate = 5;
    
    var x_max_speed = 10;
    var z_max_speed = 10;
    
    var forward_interval;
    var backward_interval;
    var left_interval;
    var right_interval;
    
    var controller_interval;
    
    var forward_interval_running = false;
    var backward_interval_running = false;
    var left_interval_running = false;
    var right_interval_running = false;
    
    var fps = 60;
    
    var sensitivity = 3;
    
    $('img').mousemove(function(e) {
        
        if(!this.canvas) {
            this.canvas = $('<canvas />')[0];
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
        }
        
        
        
       // var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
        
         var pixelData = this.canvas.getContext('2d').getImageData(parseInt(parseInt($('.engine-map img').css('left'))+800), parseInt(parseInt($('.engine-map img').css('top'))+800), 1, 1).data;
        
        
        
        var rgb = '(' + pixelData[0] + ',' + pixelData[1] + ',' + pixelData[2] +')';
        
        var alpha = pixelData[3];
        
    });
    

    $(document).keydown(function(event) {
        //alert(event.keyCode);
         
        switch(event.keyCode){
                
            case 87: 
            //forward
                
            if(!forward_interval_running){ 
            
            forward_interval_running = true;
                
           ...