Robot Playground

by aholdorf

HTML

Size of dance floor: <input type="text" id="numberSquares" value="10" /> <input type="button" id="newButton" value="Resize"/>
<div id="draggableDiv" class="blockDiv hidden draggable"></div>
<div id="outerDiv">
  <div id="displayDiv" class="left">
    <canvas id="canvas" width="590" height="625">

    </canvas>
  </div>
  <div id="inputDiv" class="left">
    <div id="codeDiv">
      <span class="unselectable">Main</span>
      <div id="mainDiv" class="selectedFunction">
      
      </div>
      <span class="unselectable">F1</span>
      <div id="fun1Div">
      
      </div>
      <span class="unselectable">F2</span>
      <div id="fun2Div">
      
      </div>
    </div>
    <div id="blocksDiv">
      <div id="forwardBlock" class="forwardBlock blockDiv"></div>
      <div id="leftBlock" class="leftBlock blockDiv"></div>
      <div id="rightBlock" class="rightBlock blockDiv"></div>
      <div id="jumpBlock" class="jumpBlock blockDiv hidden"></div>
      <div id="paintBlockClear" class="paintBlockClear paintBlock blockDiv hidden"></div>
      <div id="paintBlockRed" class="paintBlockRed paintBlock blockDiv hidden"></div>
      <div id="paintBlockBlue" class="paintBlockBlue paintBlock blockDiv hidden"></div>
      <div id="paintBlockGreen" class="paintBlockGreen paintBlock blockDiv hidden"></div>
      <div id="function1Block" class="function1Block blockDiv"></div>
      <div id="function2Block" class="function2Block blockDiv"></div>
    </div>
    <div id="controlDiv">
      <div id="playPauseButton" class="controlButton left">
        RUN
      </div>
      <div id="resetButton" class="controlButton left">
        CLEAR
      </div>
    </div>
  </div>
</div>

CSS

.left{
  float: left;
}

.right{
  float: right;
}

.clear{
  clear: both;
}

.hidden{
  display: none;
}

#outerDiv{
  background-color: black;
  display: block;
  width: 800px;
  height: 627px;
}

#inputDiv{
  width: 200px;
  height: 625px;
  display: block;
  background-color: black;
}

#displayDiv{
  width: 599px;
  height: 625px;
}

#codeDiv{
  width: 199px;
  height: 410px;
  background-color: black;
  color: white;
  padding: 1px;
}

#mainDiv{
  border: 1px solid black;
  border-radius: 10px;
  width: 198px;
  height: 150px;
  background-color: white;
  cursor: pointer;
}

#fun1Div{
  border: 1px solid black;
  border-radius: 10px;
  width: 198px;
  height: 100px;
  background-color: white;
  cursor: pointer;
}

#fun2Div{
  border: 1px solid black;
  border-radius: 10px;
  width: 198px;
  height: 100px;
  background-color: white;
  cursor: pointer;
}

#blocksDiv{
  width: 199px;
  height: 148px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: #AADDFF;
  margin-top: 20px;
}

.selectedFunction{
  background-color: #FFFFDD !important;
}


.paintBlockRed{
  background-color: #FF4444;
}

.paintBlockBlue{
  background-color: #4444FF;
}

.paintBlockGreen{
  background-color: #44FF44;
}

.paintBlockClear{
  background-color: #FFFFFF;
}
/*
.forwardBlock{
  background: url('https://www.freeclipartnow.com/d/40222-1/arrow-blue-outline-up.jpg');
}

.leftBlock{
  background: url('https://www.freeclipartnow.com/d/40218-1/arrow-blue-outline-left.jpg');
}

.rightBlock{
  background: url('https://www.freeclipartnow.com/d/40220-1/arrow-blue-outline-right.jpg');
}

.jumpBlock{
  background: url('https://media.istockphoto.com/vectors/bounce-ball-icon-line-sign-vector-illustration-eps10-vector-id970942842?k=6&m=970942842&s=612x612&w=0&h=paqwX4vcvPPeYGw1v2d0hnTik2sIvJK2kOUfn1MJVqU=');
}

.paintBlockRed{
  background-color: #FF4444;
  background-image: url('https://wp.lps.org/aholdor/files/2021/04/paintBucket.gif');
}

.paintBlockBlue{
  background-color:...

JavaScript

var code = [];
var codef1 = [];
var codef2 = [];
var runningCode = [];
var thisBlock;
var level = 0;
var maxLevel = 0;
var thisLevel;
var levels = [];
var player = [];
var running = false;
var selectedFunc = "main";
var runningCommand = false;
var isDragging = false;
var mousedown = false;
var mousedownLocation = [-1,-1];
var blockHeight = 10;
var blockDiagonal = 50;
var c;
var g;
var playerAnimationAngle = 0;
var playerAnimationX = 0;
var playerAnimationY = 0;
var playerAnimationZ = 0;
var speed = 1;
var speeds = [">",">>",">>>"];
var menuOpen = false;
var levelSelectOpen = false;
var levelSelectPage = 0;
var lastLevelShown = 11;
var inLevelSelectButton = false;
var inPlayerChangeButton = false;
var beatLastLevel = false;
var playerid = "";
var customArt = {};
var myAudio;
var showingCode = true;
var numSquares = 10;

function turn(dir){
  var turnInterval = setInterval(function(){
    playerAnimationAngle += 0.15*dir;
    draw();
    if(Math.abs(playerAnimationAngle) >= Math.PI/2){
      playerAnimationAngle = 0;
      player[2] = (parseInt(player[2])+4+dir)%4;
      clearInterval(turnInterval);
      runningCommand = false;
      draw();
    }
  },50/speed);
}

function setupCustomArt(){
	var forward = 'https://wp.lps.org/aholdor/files/2021/07/arrow-blue-outline-up.jpg';
  var left = 'https://wp.lps.org/aholdor/files/2021/07/arrow-blue-outline-left.jpg';
  var right = 'https://wp.lps.org/aholdor/files/2021/07/arrow-blue-outline-right.jpg';
  var jump = 'https://media.istockphoto.com/vectors/bounce-ball-icon-line-sign-vector-illustration-eps10-vector-id970942842?k=6&m=970942842&s=612x612&w=0&h=paqwX4vcvPPeYGw1v2d0hnTik2sIvJK2kOUfn1MJVqU=';
  var clear = 'https://wp.lps.org/aholdor/files/2021/04/paintBucket.gif';
  var red = 'https://wp.lps.org/aholdor/files/2021/04/paintBucket.gif';
  var blue = 'https://wp.lps.org/aholdor/files/2021/04/paintBucket.gif';
  var green = 'https://wp.lps.org/aholdor/files/2021/04/paintBucket.gif';
  var fun1 = "";
  var fun2 =...