Pixel Simulator

by obliquely

HTML

<body onload="pixTest()">

  <h1>
Lunar Lander
</h1>

  <p>
    Space for main booster. Comma for left booster. Full stop for right booster. <em>Select the red area with mouse to make sure it's getting keypresses.</em>
  </p>
  <div id="pixels">
  </div>

  <p id="message">...
  </p>

  <a href="#" onClick="pixTest()">Restart</a>


  <p>
  </p>
  <p>
    <em>Work in progress: June / July 2017. Test rig for code to be used on a BBC micro:bit connected to an AdaFruit 1.44" TFT display.</em>
  </p>

</body>

CSS

div#pixels {
  line-height: 4px;
  line-spacing: 0px;
  color: green;
  font-family: Courier;
  font-size: 5px;
  background: red;
  display: inline-block;
}

JavaScript

var buffer = [""];
 var pixWidth = 80;
 var pixHeight = 80;
 var spriteX = 10.0;
 var spriteY = 10.0;

 var spriteYv = 0.0;
 var spriteXv = 0.0;
 var gravity = 0.02;

 var spaceDown = false;
 var leftBoost = false;
 var rightBoost = false;

 var gameOver = false;

 function buildDisplay() {
   var lineArray = Array(pixWidth);
   var emptyLine = lineArray.join(".");
   buffer = [""];
   for (var i = 0; i < pixHeight; i++) {
     buffer[i] = emptyLine;
   }
 }


 function drawLandscape() {
   drawLine(0, pixHeight - 1, 14, pixHeight - 11, true);
   drawLine(15, pixHeight - 11, 29, pixHeight - 11, true);
   drawLine(30, pixHeight - 11, 44, pixHeight - 1, true);
   drawLine(45, pixHeight - 1, 59, pixHeight - 11, true);
   drawLine(60, pixHeight - 11, 74, pixHeight - 11, true);
   drawLine(75, pixHeight - 11, 79, pixHeight - 9, true);
   pixUpdateDisplay();
 }

 function drawLine(x0, y0, x1, y1, state) {

   let xDelta = x1 - x0;
   let yDelta = y1 - y0;

   if (yDelta > xDelta) {

     let xIncrement = xDelta == 0 ? 0 : yDelta / xDelta;
     var xOrigin = y0;

     for (var y = x0; y <= y1; y++) {
       setPixel(Math.round(xOrigin), y, true);
       xOrigin = xOrigin + xIncrement;
     }
     return;
   }

   let yIncrement = yDelta == 0 ? 0 : yDelta / xDelta;
   var yOrigin = y0;

   for (var x = x0; x <= x1; x++) {
     setPixel(x, Math.round(yOrigin), true);
     yOrigin = yOrigin + yIncrement;
   }

 }

 function setPixel(x, y, state) {
   x = Math.round(x);
   y = Math.round(y);

   if ((x < 0) || (x >= pixWidth)) {
     console.log("x out of range in setPixel: x= " + x);
     return;
   }

   if ((y < 0) || (y >= pixHeight)) {
     console.log("y out of range in setPixel: y= " + y);
     return;
   }

   var stateString = state ? "█" : ".";
   var workingLine = buffer[y];

   if (typeof workingLine == 'undefined') {
     console.log("buffer[" + y + "] is undefined.");
     return;
   }

   var part1 = workingLine.substr(0, x);
   var part2 =...