jpetto · October 17, 2012 01:21
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Whack-A-Fighter II</title>

  <style type="text/css">
    #left { float: left; }

    #field {
      width: 500px;
      height: 500px;
      position: relative;
      background: url('field.png') top left no-repeat;
    }

    #scores {
      float: left;
      margin-left: 20px;
      width: 300px;
    }

    .mole {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0px;
      left: 0px;
      background: url('ken.png') top left no-repeat;
      -webkit-transition: all 0.2s ease;
    }

    .captured {
      background: url('ken-whacked.png') top left no-repeat;
    }

    #start {
      border: 2px solid #000;
      padding: 0;
      width: 93px;
      height: 37px;
      cursor: pointer;
      border-radius: 4px;
      margin: 10px auto;
      display: block;
      -webkit-transition: all 0.3s ease;
    }

    #start:disabled {
      opacity: 0.5;
    }
  </style>
 </head>
 <body>
  <div id="left">
    <section id="field">
      <div id="mole1" class="mole"></div>
      <div id="mole2" class="mole"></div>
      <div id="mole3" class="mole"></div>
      <div id="mole4" class="mole"></div>
      <div id="mole5" class="mole"></div>
    </section>
    <button type="button" id="start"><img src="fight.png" width="89" height="33" /></button>
  </div>

  <ul id="scores"></ul>

  <script type="text/javascript">
    var start = document.querySelector('#start');
    var scores = document.querySelector('#scores');

    var max_x = 450;
    var max_y = 450;
    var max_jump = 1000;

    var mole1 = { elem: document.querySelector('#mole1'), captured: false };
    var mole2 = { elem: document.querySelector('#mole2'), captured: false };
    var mole3 = { elem: document.querySelector('#mole3'), captured: false };
    var mole4 = { elem: document.querySelector('#mole4'), captured: false };
    var mole5 = { elem: document.querySelector('#mole5'), captured: false };

    var moles = [mole1, mole2, mole3, mole4, mole5];

    var start_time;
    var end_time;

    var jump = function(mole) {
      var random_x, random_y, new_x, new_y, random_jump, new_jump;

      if (mole.captured === false) {
        random_x = Math.random() * max_x;
        random_y = Math.random() * max_y;

        new_x = Math.floor(random_x + 1);
        new_y = Math.floor(random_y + 1);

        random_jump = Math.random() * max_jump;

        new_jump = Math.floor(random_jump + 1) + 500;

        mole.elem.setAttribute("style", "top: " + new_y + "px; left: " + new_x + "px");

        setTimeout(function() {
          jump(mole);
        }, new_jump);
      }
    };

    var capture_mole = function(mole) {
      if (mole.captured === false) {
        mole.elem.setAttribute('class', 'mole captured');
        mole.captured = true;

        // see if all moles are captured
        if (mole1.captured && mole2.captured && mole3.captured && mole4.captured && mole5.captured) {
          end_time = new Date();

          var total_time = (end_time.getTime() - start_time.getTime())/1000;

          var li = document.createElement('li');
          li.appendChild(document.createTextNode(total_time));

          scores.insertBefore(li, scores.firstChild);

          // make sure start button is enabled
          start.removeAttribute('disabled');
        }
      }
    };

    var start_game = function() {
      // disable start button
      start.setAttribute('disabled', 'disabled');

      start_time = new Date();

      // reset all moles to uncaptured state
      for (var i = 0; i < moles.length; i++) {
        moles[i].captured = false;
        moles[i].elem.setAttribute('class', 'mole');
      }

      jump(mole1);

      setTimeout(function() {
        jump(mole2);
      }, 200);

      setTimeout(function() {
        jump(mole3);
      }, 400);

      setTimeout(function() {
        jump(mole4);
      }, 600);

      setTimeout(function() {
        jump(mole5);
      }, 800);
    };

    mole1.elem.addEventListener('click', function() {
      capture_mole(mole1);
    });

    mole2.elem.addEventListener('click', function() {
      capture_mole(mole2);
    });

    mole3.elem.addEventListener('click', function() {
      capture_mole(mole3);
    });

    mole4.elem.addEventListener('click', function() {
      capture_mole(mole4);
    });

    mole5.elem.addEventListener('click', function() {
      capture_mole(mole5);
    });

    start.addEventListener('click', function() {
      start_game();
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Whack-A-Fighter II</title>

	<style type="text/css">
	#left { float: left; }

	#field {
	width: 500px;
	height: 500px;
	position: relative;
	background: url('field.png') top left no-repeat;
	}

	#scores {
	float: left;
	margin-left: 20px;
	width: 300px;
	}

	.mole {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url('ken.png') top left no-repeat;
	-webkit-transition: all 0.2s ease;
	}

	.captured {
	background: url('ken-whacked.png') top left no-repeat;
	}

	#start {
	border: 2px solid #000;
	padding: 0;
	width: 93px;
	height: 37px;
	cursor: pointer;
	border-radius: 4px;
	margin: 10px auto;
	display: block;
	-webkit-transition: all 0.3s ease;
	}

	#start:disabled {
	opacity: 0.5;
	}
	</style>
	</head>
	<body>
	<div id="left">
	<section id="field">
	<div id="mole1" class="mole"></div>
	<div id="mole2" class="mole"></div>
	<div id="mole3" class="mole"></div>
	<div id="mole4" class="mole"></div>
	<div id="mole5" class="mole"></div>
	</section>
	<button type="button" id="start"><img src="fight.png" width="89" height="33" /></button>
	</div>

	<ul id="scores"></ul>

	<script type="text/javascript">
	var start = document.querySelector('#start');
	var scores = document.querySelector('#scores');

	var max_x = 450;
	var max_y = 450;
	var max_jump = 1000;

	var mole1 = { elem: document.querySelector('#mole1'), captured: false };
	var mole2 = { elem: document.querySelector('#mole2'), captured: false };
	var mole3 = { elem: document.querySelector('#mole3'), captured: false };
	var mole4 = { elem: document.querySelector('#mole4'), captured: false };
	var mole5 = { elem: document.querySelector('#mole5'), captured: false };

	var moles = [mole1, mole2, mole3, mole4, mole5];

	var start_time;
	var end_time;

	var jump = function(mole) {
	var random_x, random_y, new_x, new_y, random_jump, new_jump;

	if (mole.captured === false) {
	random_x = Math.random() * max_x;
	random_y = Math.random() * max_y;

	new_x = Math.floor(random_x + 1);
	new_y = Math.floor(random_y + 1);

	random_jump = Math.random() * max_jump;

	new_jump = Math.floor(random_jump + 1) + 500;

	mole.elem.setAttribute("style", "top: " + new_y + "px; left: " + new_x + "px");

	setTimeout(function() {
	jump(mole);
	}, new_jump);
	}
	};

	var capture_mole = function(mole) {
	if (mole.captured === false) {
	mole.elem.setAttribute('class', 'mole captured');
	mole.captured = true;

	// see if all moles are captured
	if (mole1.captured && mole2.captured && mole3.captured && mole4.captured && mole5.captured) {
	end_time = new Date();

	var total_time = (end_time.getTime() - start_time.getTime())/1000;

	var li = document.createElement('li');
	li.appendChild(document.createTextNode(total_time));

	scores.insertBefore(li, scores.firstChild);

	// make sure start button is enabled
	start.removeAttribute('disabled');
	}
	}
	};

	var start_game = function() {
	// disable start button
	start.setAttribute('disabled', 'disabled');

	start_time = new Date();

	// reset all moles to uncaptured state
	for (var i = 0; i < moles.length; i++) {
	moles[i].captured = false;
	moles[i].elem.setAttribute('class', 'mole');
	}

	jump(mole1);

	setTimeout(function() {
	jump(mole2);
	}, 200);

	setTimeout(function() {
	jump(mole3);
	}, 400);

	setTimeout(function() {
	jump(mole4);
	}, 600);

	setTimeout(function() {
	jump(mole5);
	}, 800);
	};

	mole1.elem.addEventListener('click', function() {
	capture_mole(mole1);
	});

	mole2.elem.addEventListener('click', function() {
	capture_mole(mole2);
	});

	mole3.elem.addEventListener('click', function() {
	capture_mole(mole3);
	});

	mole4.elem.addEventListener('click', function() {
	capture_mole(mole4);
	});

	mole5.elem.addEventListener('click', function() {
	capture_mole(mole5);
	});

	start.addEventListener('click', function() {
	start_game();
	});
	</script>
	</body>
	</html>