ROT stuff

by Sam Fereday

HTML

<script src="https://ondras.github.io/rot.js/rot.js"></script>
<div id="container"></div>

CSS

#container {
  position: relative;
}

.cell {
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  position: absolute;
  background: orange;
}

JavaScript

// http://www.extentofthejam.com/pseudo/#intro
const screen_height = window.innerHeight;//480;
const screen_width = window.innerWidth;//640;

const x_angle = 60;
const y_angle = 60;

const scale_x = screen_width / Math.tan(x_angle / 2);
const scale_y = screen_height / Math.tan(y_angle / 2);

//const z = (y_world*scale) / (y_screen - (screen_height >> 1));
//y_screen = (y_world*scale / z) + (screen_height >> 1)

const Update = (segments) => {
	
  document.getElementById('container').innerHTML = '';

  segments.forEach(segment => {
    let y_screen = (segment.y * scale_y) / segment.z + (screen_height / 2);
    let x_screen = (segment.x * scale_x) / segment.z + (screen_width / 2);

    let scaled_y = Math.abs(segment.y / (y_screen - (screen_height / 2)));
    let scaled_x = Math.abs(segment.x / (x_screen - (screen_width / 2)));

    let d = document.createElement('div');
    d.style.top = y_screen + 'px';
    d.style.left = x_screen + 'px';

    d.style.width = 1 / scaled_x + 'px';
    d.style.height = 1 / scaled_y + 'px';

    d.className = 'cell';

    document.getElementById('container')
      .appendChild(d);
  });
}

document.addEventListener('mousemove', (e) => {
  const {
    clientX,
    clientY
  } = e;

  // Z would be stepped per segment here. So, if we're making a dung, keeping it simple you'd probbaly have a segment per floor tile...
  const segments = [];
  
  console.log(clientX, screen_width);

  // These are just lines right now, you'd need two points to make it more 3D-ish.
  for (let i = 1; i < 10; i++) {
    segments.push({
      y: -1, // Assumes just a flat plane
      x: Math.PI,
      z: i
    });
  }

  Update(segments);
});