From ca51bc21486a972ff4e4c0a2d6356703bf274ab1 Mon Sep 17 00:00:00 2001
From: Joyje <Joel.I.Sahlin@Gmail.com>
Date: Mon, 10 Apr 2023 02:25:17 +0200
Subject: [PATCH 1/2] Moved code to seperate files to make it more readable

---
 VoxelSpace.html | 397 +-----------------------------------------------
 js/camera.js    |  57 +++++++
 js/input.js     | 152 ++++++++++++++++++
 js/map.js       |  66 ++++++++
 js/render.js    | 128 ++++++++++++++++
 5 files changed, 407 insertions(+), 393 deletions(-)
 create mode 100644 js/camera.js
 create mode 100644 js/input.js
 create mode 100644 js/map.js
 create mode 100644 js/render.js

diff --git a/VoxelSpace.html b/VoxelSpace.html
index d3a8951..7f07f07 100755
--- a/VoxelSpace.html
+++ b/VoxelSpace.html
@@ -88,406 +88,17 @@
     Your browser does not support the canvas element.
 </canvas>
 
+<script src="./js/camera.js"></script>
+<script src="./js/input.js"></script>
+<script src="./js/map.js"></script>
+<script src="./js/render.js"></script>
 <script>
 "use strict";
 
-// ---------------------------------------------
-// Viewer information
-
-var camera =
-{
-    x:        512., // x position on the map
-    y:        800., // y position on the map
-    height:    78., // height of the camera
-    angle:      0., // direction of the camera
-    horizon:  100., // horizon position (look up and down)
-    distance: 800   // distance of map
-};
-
-// ---------------------------------------------
-// Landscape data
-
-var map =
-{
-    width:    1024,
-    height:   1024,
-    shift:    10,  // power of two: 2^10 = 1024
-    altitude: new Uint8Array(1024*1024), // 1024 * 1024 byte array with height information
-    color:    new Uint32Array(1024*1024) // 1024 * 1024 int array with RGB colors
-};
-
-// ---------------------------------------------
-// Screen data
-
-var screendata =
-{
-    canvas:    null,
-    context:   null,
-    imagedata: null,
-
-    bufarray:  null, // color data
-    buf8:      null, // the same array but with bytes
-    buf32:     null, // the same array but with 32-Bit words
-
-    backgroundcolor: 0xFFE09090
-};
-
-// ---------------------------------------------
-// Keyboard and mouse interaction
-
-var input =
-{
-    forwardbackward: 0,
-    leftright:       0,
-    updown:          0,
-    lookup:          false,
-    lookdown:        false,
-    mouseposition:   null,
-    keypressed:      false
-}
-
-var updaterunning = false;
-
-var time = new Date().getTime();
-
-
 // for fps display
 var timelastframe = new Date().getTime();
 var frames = 0;
 
-// Update the camera for next frame. Dependent on keypresses
-function UpdateCamera()
-{
-    var current = new Date().getTime();
-
-    input.keypressed = false;
-    if (input.leftright != 0)
-    {
-        camera.angle += input.leftright*0.1*(current-time)*0.03;
-        input.keypressed = true;
-    }
-    if (input.forwardbackward != 0)
-    {
-        camera.x -= input.forwardbackward * Math.sin(camera.angle) * (current-time)*0.03;
-        camera.y -= input.forwardbackward * Math.cos(camera.angle) * (current-time)*0.03;
-        input.keypressed = true;
-    }
-    if (input.updown != 0)
-    {
-        camera.height += input.updown * (current-time)*0.03;
-        input.keypressed = true;
-    }
-    if (input.lookup)
-    {
-        camera.horizon += 2 * (current-time)*0.03;
-        input.keypressed = true;
-    }
-    if (input.lookdown)
-    {
-        camera.horizon -= 2 * (current-time)*0.03;
-        input.keypressed = true;
-    }
-
-    // Collision detection. Don't fly below the surface.
-    var mapoffset = ((Math.floor(camera.y) & (map.width-1)) << map.shift) + (Math.floor(camera.x) & (map.height-1))|0;
-    if ((map.altitude[mapoffset]+10) > camera.height) camera.height = map.altitude[mapoffset] + 10;
-
-    time = current;
-
-}
-
-// ---------------------------------------------
-// Keyboard and mouse event handlers
-// ---------------------------------------------
-// Keyboard and mouse event handlers
-
-function GetMousePosition(e)
-{
-    // fix for Chrome
-    if (e.type.startsWith('touch'))
-    {
-        return [e.targetTouches[0].pageX, e.targetTouches[0].pageY];
-    } else
-    {
-        return [e.pageX, e.pageY];
-    }
-}
-
-
-function DetectMouseDown(e)
-{
-    input.forwardbackward = 3.;
-    input.mouseposition = GetMousePosition(e);
-    time = new Date().getTime();
-
-    if (!updaterunning) Draw();
-    return;
-}
-
-function DetectMouseUp()
-{
-    input.mouseposition = null;
-    input.forwardbackward = 0;
-    input.leftright = 0;
-    input.updown = 0;
-    return;
-}
-
-function DetectMouseMove(e)
-{
-    e.preventDefault();
-    if (input.mouseposition == null) return;
-    if (input.forwardbackward == 0) return;
-
-    var currentMousePosition = GetMousePosition(e);
-
-    input.leftright = (input.mouseposition[0] - currentMousePosition[0]) / window.innerWidth * 2;
-    camera.horizon  = 100 + (input.mouseposition[1] - currentMousePosition[1]) / window.innerHeight * 500;
-    input.updown    = (input.mouseposition[1] - currentMousePosition[1]) / window.innerHeight * 10;
-}
-
-
-function DetectKeysDown(e)
-{
-    switch(e.keyCode)
-    {
-    case 37:    // left cursor
-    case 65:    // a
-        input.leftright = +1.;
-        break;
-    case 39:    // right cursor
-    case 68:    // d
-        input.leftright = -1.;
-        break;
-    case 38:    // cursor up
-    case 87:    // w
-        input.forwardbackward = 3.;
-        break;
-    case 40:    // cursor down
-    case 83:    // s
-        input.forwardbackward = -3.;
-        break;
-    case 82:    // r
-        input.updown = +2.;
-        break;
-    case 70:    // f
-        input.updown = -2.;
-        break;
-    case 69:    // e
-        input.lookup = true;
-        break;
-    case 81:    //q
-        input.lookdown = true;
-        break;
-    default:
-        return;
-        break;
-    }
-
-    if (!updaterunning) {
-        time = new Date().getTime();
-        Draw();
-    }
-    return false;
-}
-
-function DetectKeysUp(e)
-{
-    switch(e.keyCode)
-    {
-    case 37:    // left cursor
-    case 65:    // a
-        input.leftright = 0;
-        break;
-    case 39:    // right cursor
-    case 68:    // d
-        input.leftright = 0;
-        break;
-    case 38:    // cursor up
-    case 87:    // w
-        input.forwardbackward = 0;
-        break;
-    case 40:    // cursor down
-    case 83:    // s
-        input.forwardbackward = 0;
-        break;
-    case 82:    // r
-        input.updown = 0;
-        break;
-    case 70:    // f
-        input.updown = 0;
-        break;
-    case 69:    // e
-        input.lookup = false;
-        break;
-    case 81:    //q
-        input.lookdown = false;
-        break;
-    default:
-        return;
-        break;
-    }
-    return false;
-}
-
-// ---------------------------------------------
-// Fast way to draw vertical lines
-
-function DrawVerticalLine(x, ytop, ybottom, col)
-{
-    x = x|0;
-    ytop = ytop|0;
-    ybottom = ybottom|0;
-    col = col|0;
-    var buf32 = screendata.buf32;
-    var screenwidth = screendata.canvas.width|0;
-    if (ytop < 0) ytop = 0;
-    if (ytop > ybottom) return;
-
-    // get offset on screen for the vertical line
-    var offset = ((ytop * screenwidth) + x)|0;
-    for (var k = ytop|0; k < ybottom|0; k=k+1|0)
-    {
-        buf32[offset|0] = col|0;
-        offset = offset + screenwidth|0;
-    }
-}
-
-// ---------------------------------------------
-// Basic screen handling
-
-function DrawBackground()
-{
-    var buf32 = screendata.buf32;
-    var color = screendata.backgroundcolor|0;
-    for (var i = 0; i < buf32.length; i++) buf32[i] = color|0;
-}
-
-// Show the back buffer on screen
-function Flip()
-{
-    screendata.imagedata.data.set(screendata.buf8);
-    screendata.context.putImageData(screendata.imagedata, 0, 0);
-}
-
-// ---------------------------------------------
-// The main render routine
-
-function Render()
-{
-    var mapwidthperiod = map.width - 1;
-    var mapheightperiod = map.height - 1;
-
-    var screenwidth = screendata.canvas.width|0;
-    var sinang = Math.sin(camera.angle);
-    var cosang = Math.cos(camera.angle);
-
-    var hiddeny = new Int32Array(screenwidth);
-    for(var i=0; i<screendata.canvas.width|0; i=i+1|0)
-        hiddeny[i] = screendata.canvas.height;
-
-    var deltaz = 1.;
-
-    // Draw from front to back
-    for(var z=1; z<camera.distance; z+=deltaz)
-    {
-        // 90 degree field of view
-        var plx =  -cosang * z - sinang * z;
-        var ply =   sinang * z - cosang * z;
-        var prx =   cosang * z - sinang * z;
-        var pry =  -sinang * z - cosang * z;
-
-        var dx = (prx - plx) / screenwidth;
-        var dy = (pry - ply) / screenwidth;
-        plx += camera.x;
-        ply += camera.y;
-        var invz = 1. / z * 240.;
-        for(var i=0; i<screenwidth|0; i=i+1|0)
-        {
-            var mapoffset = ((Math.floor(ply) & mapwidthperiod) << map.shift) + (Math.floor(plx) & mapheightperiod)|0;
-            var heightonscreen = (camera.height - map.altitude[mapoffset]) * invz + camera.horizon|0;
-            DrawVerticalLine(i, heightonscreen|0, hiddeny[i], map.color[mapoffset]);
-            if (heightonscreen < hiddeny[i]) hiddeny[i] = heightonscreen;
-            plx += dx;
-            ply += dy;
-        }
-        deltaz += 0.005;
-    }
-}
-
-
-// ---------------------------------------------
-// Draw the next frame
-
-function Draw()
-{
-    updaterunning = true;
-    UpdateCamera();
-    DrawBackground();
-    Render();
-    Flip();
-    frames++;
-
-    if (!input.keypressed)
-    {
-        updaterunning = false;
-    } else
-    {
-        window.requestAnimationFrame(Draw, 0);
-    }
-}
-
-// ---------------------------------------------
-// Init routines
-
-// Util class for downloading the png
-function DownloadImagesAsync(urls) {
-    return new Promise(function(resolve, reject) {
-
-        var pending = urls.length;
-        var result = [];
-        if (pending === 0) {
-            resolve([]);
-            return;
-        }
-        urls.forEach(function(url, i) {
-            var image = new Image();
-            //image.addEventListener("load", function() {
-            image.onload = function() {
-                var tempcanvas = document.createElement("canvas");
-                var tempcontext = tempcanvas.getContext("2d");
-                tempcanvas.width = map.width;
-                tempcanvas.height = map.height;
-                tempcontext.drawImage(image, 0, 0, map.width, map.height);
-                result[i] = tempcontext.getImageData(0, 0, map.width, map.height).data;
-                pending--;
-                if (pending === 0) {
-                    resolve(result);
-                }
-            };
-            image.src = url;
-        });
-    });
-}
-
-function LoadMap(filenames)
-{
-    var files = filenames.split(";");
-    DownloadImagesAsync(["maps/"+files[0]+".png", "maps/"+files[1]+".png"]).then(OnLoadedImages);
-}
-
-function OnLoadedImages(result)
-{
-    var datac = result[0];
-    var datah = result[1];
-    for(var i=0; i<map.width*map.height; i++)
-    {
-        map.color[i] = 0xFF000000 | (datac[(i<<2) + 2] << 16) | (datac[(i<<2) + 1] << 8) | datac[(i<<2) + 0];
-        map.altitude[i] = datah[i<<2];
-    }
-    Draw();
-}
-
 function OnResizeWindow()
 {
     screendata.canvas = document.getElementById('fullscreenCanvas');
diff --git a/js/camera.js b/js/camera.js
new file mode 100644
index 0000000..eb174f0
--- /dev/null
+++ b/js/camera.js
@@ -0,0 +1,57 @@
+
+// ---------------------------------------------
+// Viewer information
+// ---------------------------------------------
+
+var camera =
+{
+    x:        512., // x position on the map
+    y:        800., // y position on the map
+    height:    78., // height of the camera
+    angle:      0., // direction of the camera
+    horizon:  100., // horizon position (look up and down)
+    distance: 800   // distance of map
+};
+// ---------------------------------------------
+
+// Update the camera for next frame. Dependent on keypresses
+function UpdateCamera()
+{
+    var current = new Date().getTime();
+
+    input.keypressed = false;
+    if (input.leftright != 0)
+    {
+        camera.angle += input.leftright*0.1*(current-time)*0.03;
+        input.keypressed = true;
+    }
+    if (input.forwardbackward != 0)
+    {
+        camera.x -= input.forwardbackward * Math.sin(camera.angle) * (current-time)*0.03;
+        camera.y -= input.forwardbackward * Math.cos(camera.angle) * (current-time)*0.03;
+        input.keypressed = true;
+    }
+    if (input.updown != 0)
+    {
+        camera.height += input.updown * (current-time)*0.03;
+        input.keypressed = true;
+    }
+    if (input.lookup)
+    {
+        camera.horizon += 2 * (current-time)*0.03;
+        input.keypressed = true;
+    }
+    if (input.lookdown)
+    {
+        camera.horizon -= 2 * (current-time)*0.03;
+        input.keypressed = true;
+    }
+
+    // Collision detection. Don't fly below the surface.
+    var mapoffset = ((Math.floor(camera.y) & (map.width-1)) << map.shift) + (Math.floor(camera.x) & (map.height-1))|0;
+    if ((map.altitude[mapoffset]+10) > camera.height) camera.height = map.altitude[mapoffset] + 10;
+
+    time = current;
+
+}
+
diff --git a/js/input.js b/js/input.js
new file mode 100644
index 0000000..a3f1f9a
--- /dev/null
+++ b/js/input.js
@@ -0,0 +1,152 @@
+
+// ---------------------------------------------
+// Keyboard and mouse interaction
+// ---------------------------------------------
+
+var input =
+{
+    forwardbackward: 0,
+    leftright:       0,
+    updown:          0,
+    lookup:          false,
+    lookdown:        false,
+    mouseposition:   null,
+    keypressed:      false
+}
+// ---------------------------------------------
+
+var time = new Date().getTime();
+
+// ---------------------------------------------
+// Keyboard and mouse event handlers
+// ---------------------------------------------
+
+function GetMousePosition(e)
+{
+    // fix for Chrome
+    if (e.type.startsWith('touch'))
+    {
+        return [e.targetTouches[0].pageX, e.targetTouches[0].pageY];
+    } else
+    {
+        return [e.pageX, e.pageY];
+    }
+}
+
+
+function DetectMouseDown(e)
+{
+    input.forwardbackward = 3.;
+    input.mouseposition = GetMousePosition(e);
+    time = new Date().getTime();
+
+    if (!updaterunning) Draw();
+    return;
+}
+
+function DetectMouseUp()
+{
+    input.mouseposition = null;
+    input.forwardbackward = 0;
+    input.leftright = 0;
+    input.updown = 0;
+    return;
+}
+
+function DetectMouseMove(e)
+{
+    e.preventDefault();
+    if (input.mouseposition == null) return;
+    if (input.forwardbackward == 0) return;
+
+    var currentMousePosition = GetMousePosition(e);
+
+    input.leftright = (input.mouseposition[0] - currentMousePosition[0]) / window.innerWidth * 2;
+    camera.horizon  = 100 + (input.mouseposition[1] - currentMousePosition[1]) / window.innerHeight * 500;
+    input.updown    = (input.mouseposition[1] - currentMousePosition[1]) / window.innerHeight * 10;
+}
+
+
+function DetectKeysDown(e)
+{
+    switch(e.keyCode)
+    {
+    case 37:    // left cursor
+    case 65:    // a
+        input.leftright = +1.;
+        break;
+    case 39:    // right cursor
+    case 68:    // d
+        input.leftright = -1.;
+        break;
+    case 38:    // cursor up
+    case 87:    // w
+        input.forwardbackward = 3.;
+        break;
+    case 40:    // cursor down
+    case 83:    // s
+        input.forwardbackward = -3.;
+        break;
+    case 82:    // r
+        input.updown = +2.;
+        break;
+    case 70:    // f
+        input.updown = -2.;
+        break;
+    case 69:    // e
+        input.lookup = true;
+        break;
+    case 81:    //q
+        input.lookdown = true;
+        break;
+    default:
+        return;
+        break;
+    }
+
+    if (!updaterunning) {
+        time = new Date().getTime();
+        Draw();
+    }
+    return false;
+}
+
+function DetectKeysUp(e)
+{
+    switch(e.keyCode)
+    {
+    case 37:    // left cursor
+    case 65:    // a
+        input.leftright = 0;
+        break;
+    case 39:    // right cursor
+    case 68:    // d
+        input.leftright = 0;
+        break;
+    case 38:    // cursor up
+    case 87:    // w
+        input.forwardbackward = 0;
+        break;
+    case 40:    // cursor down
+    case 83:    // s
+        input.forwardbackward = 0;
+        break;
+    case 82:    // r
+        input.updown = 0;
+        break;
+    case 70:    // f
+        input.updown = 0;
+        break;
+    case 69:    // e
+        input.lookup = false;
+        break;
+    case 81:    //q
+        input.lookdown = false;
+        break;
+    default:
+        return;
+        break;
+    }
+    return false;
+}
+
diff --git a/js/map.js b/js/map.js
new file mode 100644
index 0000000..3dd7a44
--- /dev/null
+++ b/js/map.js
@@ -0,0 +1,66 @@
+
+// ---------------------------------------------
+// Landscape data
+// ---------------------------------------------
+
+var map =
+{
+    width:    1024,
+    height:   1024,
+    shift:    10,  // power of two: 2^10 = 1024
+    altitude: new Uint8Array(1024*1024), // 1024 * 1024 byte array with height information
+    color:    new Uint32Array(1024*1024) // 1024 * 1024 int array with RGB colors
+};
+// ---------------------------------------------
+
+// ---------------------------------------------
+// Init routines
+
+// Util class for downloading the png
+function DownloadImagesAsync(urls) {
+    return new Promise(function(resolve, reject) {
+
+        var pending = urls.length;
+        var result = [];
+        if (pending === 0) {
+            resolve([]);
+            return;
+        }
+        urls.forEach(function(url, i) {
+            var image = new Image();
+            //image.addEventListener("load", function() {
+            image.onload = function() {
+                var tempcanvas = document.createElement("canvas");
+                var tempcontext = tempcanvas.getContext("2d");
+                tempcanvas.width = map.width;
+                tempcanvas.height = map.height;
+                tempcontext.drawImage(image, 0, 0, map.width, map.height);
+                result[i] = tempcontext.getImageData(0, 0, map.width, map.height).data;
+                pending--;
+                if (pending === 0) {
+                    resolve(result);
+                }
+            };
+            image.src = url;
+        });
+    });
+}
+
+function LoadMap(filenames)
+{
+    var files = filenames.split(";");
+    DownloadImagesAsync(["maps/"+files[0]+".png", "maps/"+files[1]+".png"]).then(OnLoadedImages);
+}
+
+function OnLoadedImages(result)
+{
+    var datac = result[0];
+    var datah = result[1];
+    for(var i=0; i<map.width*map.height; i++)
+    {
+        map.color[i] = 0xFF000000 | (datac[(i<<2) + 2] << 16) | (datac[(i<<2) + 1] << 8) | datac[(i<<2) + 0];
+        map.altitude[i] = datah[i<<2];
+    }
+    Draw();
+}
+
diff --git a/js/render.js b/js/render.js
new file mode 100644
index 0000000..66e9a72
--- /dev/null
+++ b/js/render.js
@@ -0,0 +1,128 @@
+
+// ---------------------------------------------
+// Screen data
+// ---------------------------------------------
+
+var screendata =
+{
+    canvas:    null,
+    context:   null,
+    imagedata: null,
+
+    bufarray:  null, // color data
+    buf8:      null, // the same array but with bytes
+    buf32:     null, // the same array but with 32-Bit words
+
+    backgroundcolor: 0xFFE09090
+};
+// ---------------------------------------------
+
+var updaterunning = false;
+
+// ---------------------------------------------
+// Fast way to draw vertical lines
+
+function DrawVerticalLine(x, ytop, ybottom, col)
+{
+    x = x|0;
+    ytop = ytop|0;
+    ybottom = ybottom|0;
+    col = col|0;
+    var buf32 = screendata.buf32;
+    var screenwidth = screendata.canvas.width|0;
+    if (ytop < 0) ytop = 0;
+    if (ytop > ybottom) return;
+
+    // get offset on screen for the vertical line
+    var offset = ((ytop * screenwidth) + x)|0;
+    for (var k = ytop|0; k < ybottom|0; k=k+1|0)
+    {
+        buf32[offset|0] = col|0;
+        offset = offset + screenwidth|0;
+    }
+}
+
+// ---------------------------------------------
+// Basic screen handling
+
+function DrawBackground()
+{
+    var buf32 = screendata.buf32;
+    var color = screendata.backgroundcolor|0;
+    for (var i = 0; i < buf32.length; i++) buf32[i] = color|0;
+}
+
+// Show the back buffer on screen
+function Flip()
+{
+    screendata.imagedata.data.set(screendata.buf8);
+    screendata.context.putImageData(screendata.imagedata, 0, 0);
+}
+
+// ---------------------------------------------
+// The main render routine
+
+function Render()
+{
+    var mapwidthperiod = map.width - 1;
+    var mapheightperiod = map.height - 1;
+
+    var screenwidth = screendata.canvas.width|0;
+    var sinang = Math.sin(camera.angle);
+    var cosang = Math.cos(camera.angle);
+
+    var hiddeny = new Int32Array(screenwidth);
+    for(var i=0; i<screendata.canvas.width|0; i=i+1|0)
+        hiddeny[i] = screendata.canvas.height;
+
+    var deltaz = 1.;
+
+    // Draw from front to back
+    for(var z=1; z<camera.distance; z+=deltaz)
+    {
+        // 90 degree field of view
+        var plx =  -cosang * z - sinang * z;
+        var ply =   sinang * z - cosang * z;
+        var prx =   cosang * z - sinang * z;
+        var pry =  -sinang * z - cosang * z;
+
+        var dx = (prx - plx) / screenwidth;
+        var dy = (pry - ply) / screenwidth;
+        plx += camera.x;
+        ply += camera.y;
+        var invz = 1. / z * 240.;
+        for(var i=0; i<screenwidth|0; i=i+1|0)
+        {
+            var mapoffset = ((Math.floor(ply) & mapwidthperiod) << map.shift) + (Math.floor(plx) & mapheightperiod)|0;
+            var heightonscreen = (camera.height - map.altitude[mapoffset]) * invz + camera.horizon|0;
+            DrawVerticalLine(i, heightonscreen|0, hiddeny[i], map.color[mapoffset]);
+            if (heightonscreen < hiddeny[i]) hiddeny[i] = heightonscreen;
+            plx += dx;
+            ply += dy;
+        }
+        deltaz += 0.005;
+    }
+}
+
+
+// ---------------------------------------------
+// Draw the next frame
+
+function Draw()
+{
+    updaterunning = true;
+    UpdateCamera();
+    DrawBackground();
+    Render();
+    Flip();
+    frames++;
+
+    if (!input.keypressed)
+    {
+        updaterunning = false;
+    } else
+    {
+        window.requestAnimationFrame(Draw, 0);
+    }
+}
+

From fa68caaa1e8729707e33f9d457ccbee58b24e5af Mon Sep 17 00:00:00 2001
From: Joyje <Joel.I.Sahlin@Gmail.com>
Date: Wed, 12 Apr 2023 00:01:31 +0200
Subject: [PATCH 2/2] Fixed minor bug with conflicting inputs and made code
 more coherent. Also introduced strafing which is now the default behaviour of
 'a' & 'd' keys.

---
 js/camera.js | 17 +++++++++--------
 js/input.js  | 23 +++++++++++------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/js/camera.js b/js/camera.js
index eb174f0..f5e363c 100644
--- a/js/camera.js
+++ b/js/camera.js
@@ -20,9 +20,9 @@ function UpdateCamera()
     var current = new Date().getTime();
 
     input.keypressed = false;
-    if (input.leftright != 0)
+    if (input.lookleftright != 0)
     {
-        camera.angle += input.leftright*0.1*(current-time)*0.03;
+        camera.angle += input.lookleftright*0.1*(current-time)*0.03;
         input.keypressed = true;
     }
     if (input.forwardbackward != 0)
@@ -31,19 +31,20 @@ function UpdateCamera()
         camera.y -= input.forwardbackward * Math.cos(camera.angle) * (current-time)*0.03;
         input.keypressed = true;
     }
-    if (input.updown != 0)
+    if (input.leftright != 0)
     {
-        camera.height += input.updown * (current-time)*0.03;
+        camera.x -= input.leftright * Math.sin(1.57+camera.angle) * (current-time)*0.03;
+        camera.y -= input.leftright * Math.cos(1.57+camera.angle) * (current-time)*0.03;
         input.keypressed = true;
     }
-    if (input.lookup)
+    if (input.updown != 0)
     {
-        camera.horizon += 2 * (current-time)*0.03;
+        camera.height += input.updown * (current-time)*0.03;
         input.keypressed = true;
     }
-    if (input.lookdown)
+    if (input.lookupdown)
     {
-        camera.horizon -= 2 * (current-time)*0.03;
+        camera.horizon += input.lookupdown * (current-time)*0.03;
         input.keypressed = true;
     }
 
diff --git a/js/input.js b/js/input.js
index a3f1f9a..d4392f6 100644
--- a/js/input.js
+++ b/js/input.js
@@ -8,8 +8,8 @@ var input =
     forwardbackward: 0,
     leftright:       0,
     updown:          0,
-    lookup:          false,
-    lookdown:        false,
+    lookleftright:   0,
+    lookupdown:      0,
     mouseposition:   null,
     keypressed:      false
 }
@@ -48,7 +48,7 @@ function DetectMouseUp()
 {
     input.mouseposition = null;
     input.forwardbackward = 0;
-    input.leftright = 0;
+    input.lookleftright = 0;
     input.updown = 0;
     return;
 }
@@ -57,11 +57,10 @@ function DetectMouseMove(e)
 {
     e.preventDefault();
     if (input.mouseposition == null) return;
-    if (input.forwardbackward == 0) return;
 
     var currentMousePosition = GetMousePosition(e);
 
-    input.leftright = (input.mouseposition[0] - currentMousePosition[0]) / window.innerWidth * 2;
+    input.lookleftright = (input.mouseposition[0] - currentMousePosition[0]) / window.innerWidth * 2;
     camera.horizon  = 100 + (input.mouseposition[1] - currentMousePosition[1]) / window.innerHeight * 500;
     input.updown    = (input.mouseposition[1] - currentMousePosition[1]) / window.innerHeight * 10;
 }
@@ -73,15 +72,15 @@ function DetectKeysDown(e)
     {
     case 37:    // left cursor
     case 65:    // a
-        input.leftright = +1.;
+        input.leftright = +2.;
         break;
     case 39:    // right cursor
     case 68:    // d
-        input.leftright = -1.;
+        input.leftright = -2.;
         break;
     case 38:    // cursor up
     case 87:    // w
-        input.forwardbackward = 3.;
+        input.forwardbackward = +3.;
         break;
     case 40:    // cursor down
     case 83:    // s
@@ -94,10 +93,10 @@ function DetectKeysDown(e)
         input.updown = -2.;
         break;
     case 69:    // e
-        input.lookup = true;
+        input.lookupdown = +2;
         break;
     case 81:    //q
-        input.lookdown = true;
+        input.lookupdown = -2;
         break;
     default:
         return;
@@ -138,10 +137,10 @@ function DetectKeysUp(e)
         input.updown = 0;
         break;
     case 69:    // e
-        input.lookup = false;
+        input.lookupdown = 0;
         break;
     case 81:    //q
-        input.lookdown = false;
+        input.lookupdown = 0;
         break;
     default:
         return;