WyCraft

HTML

<div class="title">
  <h2>ZtCraft</h2></div>

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

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

CSS

.title {
  color: green;
}

.world {
  border: 5px dashed green;
  background-color: orange;
  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;
}

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

.poop {
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: brown;
}

.Bpoop {
  height: 40px;
  width: 60px;
  position: absolute;
  background-color: black;
}

JavaScript

var currentPlayerName;
var worldState = [];
var clock;
var nextWD = 1;
var score = 1;
var timeToNextWD = 5;

function keyPress(e){
	if(e.which){
		if (e.which == 37){
    	moveLeft();
    }
		if (e.which == 39){
    	moveRight();
    }
		if (e.which == 38){
    	moveUp();
    }
		if (e.which == 40){
    	moveDown();
    }
		if (e.which == 32){
    	Poop();
    }
		if (e.which == 88){
    	ClearPoop();
    }
  }
  e.preventDefault();
  return false;
}

function start(){
	spawn();
  controlPlayer("Zach");
}

function killWD(block) {
  score = score + 1;
  message = document.getElementById("message");
  message.innerHTML = score;
  removeBlock(block);
}

function spawn() {
  addBlock("wonkydidder", 200, 200, "wonkydidder" + nextWD);
  nextWD++;
  if (!clock) {
		clock = setInterval(moveWD, 1000);
	}
}

function moveWD() {
  for (i = 0; i < worldState.length; i++) {
    if (worldState[i].type == "wonkydidder") {
      direction = "down";
      d = Math.random();
      if (d < 0.25) {
        direction = "left";
      } else if (d < 0.50) {
        direction = "right";
      } else if (d < 0.75) {
        direction = "up";
      }
      moveBlock(direction, worldState[i]);
    }
  }
  timeToNextWD--;
  if (timeToNextWD <= 0)
  {
  	timeToNextWD = 5;
    spawn();
  }
}

function addBlock(blocktype, left, top, blockid) {
  var block = [];
  block.type = blocktype;
  block.left = left;
  block.top = top;
  if (blockid) {
    block.id = blockid;
  } else {
    block.id = blocktype + "." + left + "." + top;
  }
  worldState.push(block);
  world = document.getElementById("world");
  b = document.createElement("div");
  world.appendChild(b);
  b.id = block.id;
  b.className = blocktype;
  b.style.left = left + "px";
  b.style.top = top + "px";
}

function removeBlock(block) {
  for (i = 0; i < worldState.length; i++) {
    if (worldState[i].left == block.left && worldState[i].top == block.top) {
      worldState.splice(i, 1);
      b = document.getElementById(block.id);
    ...