rush hour

HTML

<div class="title">rush hour</div>

<button onclick='start()' onkeydown='keyPress(event)'>Start</button>
<div id="message">Welcome!</div>

<div id="world" class="world"></div>

CSS

.title {
  color: green;
  font-size:40px;
}

.log {
  height: 14px;
  width: 14px;
  position: absolute;
  border: 3px solid darkgray;
  background-color: purple;
  font-size: 12px;
  text-align: center;
}

.world {
  border: 5px dashed orange;
  background-color: lightblue;
  height: 400px;
  width: 400px;
  text-align: center;
  font-size: 30px;
  position: absolute;
}

.player {
  height: 14px;
  width: 14px;
  position: absolute;
  border: 3px solid;
  font-size: 12px;
  text-align: center;
}

JavaScript

var currentPlayer;
var world;
var worldState = [];
var clock;
var beats = 1;
var logs = 0;
var score = 0;

function moveLogs(){
	beats = beats + 1;
  if (logs == 0){
  	logs = logs + 1;
  	addBlock("log", 0, 100);

		addBlock("log", 0, 200);
  	addBlock("log", 20, 200);
  	addBlock("log", 40, 200);
  	addBlock("log", 60, 200);
  	addBlock("log", 140, 200);
  	addBlock("log", 160, 200);
  	addBlock("log", 180, 200);
  	addBlock("log", 200, 200);

		addBlock("log", 20, 300);
    addBlock("log", 120, 300);
    addBlock("log", 60, 300);
    addBlock("log", 100, 300);
    addBlock("log", 160, 300);
    addBlock("log", 200, 300);

 		addBlock("log", 20, 160);
    addBlock("log", 200, 160);
  	addBlock("log", 0, 180);

	}
  for (i = 0; i < worldState.length; i++) {
  	if(worldState[i].top == 100){
    	moveBlock("right", worldState[i]);
    }
  	if(worldState[i].top == 180){
    	moveBlock("right", worldState[i]);
    }
  	if(worldState[i].top == 200 && (parseInt(beats/3) == beats/3.0)){
    	moveBlock("right", worldState[i]);
    }
  	if(worldState[i].top == 300 && (parseInt(beats/2) == beats/2.0)){
    	moveBlock("right", worldState[i]);
    }
  	if(worldState[i].top == 160 && (parseInt(beats/2) == beats/2.0)){
    	moveBlock("right", worldState[i]);
    }
	}
} 

function keyPress(e){
  bob = document.getElementById("message");
  bob.innerHTML = e.which;
	if(e.which){
		if (e.which == 65){
    	movePlayer(-20, 0); // left
    }
		if (e.which == 70){
    	movePlayer(20, 0);  // right
    }
    
		if (e.which == 83){
    	movePlayer(0, -20); // up
    }
		if (e.which == 68){
    	if (e.shiftKey){
    	  movePlayer(0, 80); // down
      } else {
        movePlayer(0, 20); // down
      }
    }
  }
  e.preventDefault();
  return false;
}

function movePlayer(x, y) {
	if (currentPlayer) {
  	newLeft = parseInt(currentPlayer.style.left) + x;
    if ((newLeft >= 0) && (newLeft <= 380) ) {
      currentPlayer.style.left = newLeft + "px";
    }
  	newTop =...