Laser Puzzle

by nim_a101

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
  <div id="00" class='pt'></div>
  <div id="10" class='pt'></div>
  <div id="20" class='pt'></div>
  <div id="30" class='pt'></div>
  <div id="01" class='pt'></div>
  <div id="11" class='pt'></div>
  <div id="21" class='pt'></div>
  <div id="31" class='pt'></div>
  <div id="02" class='pt'></div>
  <div id="12" class='pt'></div>
  <div id="22" class='pt'></div>
  <div id="32" class='pt'></div>
  <div id="03" class='pt'></div>
  <div id="13" class='pt'></div>
  <div id="23" class='pt'></div>
  <div id="33" class='pt'></div>

  <div id="laser" class='pt'></div>
  <div id="person" class='pt'></div>


  <div class='box'></div>

  <br />
</body>

CSS

body {
  margin: 10px;
  background-color: #2471A3;
}

.box {
  height: 300px;
  width: 300px;
  padding: 0px;
  margin: 0px;
  float: left;
  border: 1px solid black;
  background-color: #A9CCE3;
}

.pt {
  position: absolute;
  border: 3px solid blue;
  top: 110;
  left: 110;
  border-radius: 50%;
}

#person {
  border: 6px solid green;
}

#laser {
  border: 6px solid red;
}

JavaScript

sz = {x: 300, y: 300};
m = 11
R = 6
r = 3

function refr(p) {
  dx = p.x % sz.x || sz.x;
	return {x: p.x + (sz.x - dx) * 2, y: p.y};
}

function refl(p) {
  dx = p.x % sz.x || sz.x; 
	return {x: p.x - (dx) * 2, y: p.y};
}

function refd(p) {
  dy = p.y % sz.y || sz.y;
	return {x: p.x, y: p.y + (sz.y - dy) * 2};
}

function refu(p) {
  dy = p.y % sz.y || sz.y;
	return {x: p.x, y: p.y - (dy) * 2};
}

function ref_back(p) {
 while (p.x > sz.x)
 	p = refl(p);
 while (p.y > sz.y)
 	p = refu(p);  
 return p;
}

function mid(p1, p2) {
	return {x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2};
}

$(document).ready(function() { 
$(document).mousemove(function (ev) {  
  mouseX = Math.min(Math.max(ev.pageX - 10, 0), sz.x);
  mouseY = Math.min(Math.max(ev.pageY - 10, 0), sz.y);
  laser = {x: 25, y: 70};
  person = {x: mouseX, y: mouseY};

  $("#laser").css("top", laser.y - R + m).css("left", laser.x - R + m);
  $("#person").css("top", person.y - R + m).css("left", person.x - R + m);

  person0 = person
  for (i = 0; i < 4; i++) {
    person = person0
    for (j = 0; j < 4; j++) {
      p = ref_back(mid(laser, person))
      $("#"+i+j).css("top", p.y - r + m).css("left", p.x - r + m);
      person = refr(person);
    }
    person0 = refd(person0);
  }
});
});