Mouse Hunter

In this example below you will see how to do a Mouse Hunter with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by victoriousj, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright victoriousj ©
  • HTML
  • CSS
  • JavaScript
    <div id='arena'>
  <div id='enemy'></div>
  <div id='you'></div>
  <div>
    <p>Score: <span id='score'>000</span> High Score: <span id="highScore">000</span></p>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/victoriousj/mouse-hunter-OXgONr */
    * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  height: 100%;
  width: 100%;
}

body {
  background: #222;
  color: #d93412;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#arena {
  cursor: none;
  height: 50%;
  width: 50%;
  border: 10px solid #555;
  box-sizing:border-box;
  border-radius: 1%;
  margin: 10% auto;
}

#you {
  position: absolute;
  border: 5px solid #96b38a;
  box-sizing: border-box;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  z-index: 1;
}

#enemy {
  position: absolute;
  border: 5px solid #1ab2cc;
  border-radius: 50%;
  box-sizing: border-box;
  height: 30px;
  width: 30px;
}

p {
  margin-left: 1%;
  color: #9a8297;
  font-size: 1rem;
  font-family: monospace;
  z-index: 100;
}

span {
  color: #ddca7e;
}


/*Downloaded from https://www.codeseek.co/victoriousj/mouse-hunter-OXgONr */
    var highScore = document.getElementById('highScore');
var battleField = document.getElementById('arena');
var stalker = document.getElementById('enemy');
var score = document.getElementById('score');
var you = document.getElementById("you");
var xAxisYou = you.style.left.value;
var yAxisYou = you.style.top.value;
var xAxisThem = 1050;
var yAxisThem = 530;
var bestScore = 0;
var timer = 0;


function sideChase() {
	if (xAxisThem > xAxisYou) {
		xAxisThem--;
	} else if (xAxisThem < xAxisYou) {
		xAxisThem++;
	}
	stalker.style.left = xAxisThem + 'px';
}

function vertChase() {
	if (yAxisThem > yAxisYou) {
		yAxisThem--;
	} else if (yAxisThem < yAxisYou) {
		yAxisThem++;
	}
	stalker.style.top = yAxisThem + 'px';
}

function hitBox() {
	if (yAxisThem == yAxisYou && xAxisThem == xAxisYou) {
	timer = 0;
	}
}

function itBegins() {
	setInterval(function() {
		sideChase();
		vertChase();
		hitBox();
		timer += 0.005 ;
		if (timer < 10) {
			score.textContent = '00' + parseInt(timer);
		} else if (timer < 100) {
			score.textContent = '0' + parseInt(timer);
		} else {
			score.textContent = parseInt(timer);
		}
    		if (timer > bestScore) {
			bestScore = timer;
			if (bestScore < 10) {
				highScore.textContent = '00' + parseInt(timer);
			} else if (timer < 100) {
				highScore.textContent = '0' + parseInt(timer);
			} else {
				highScore.textContent = parseInt(timer);
			}
		}
	}, 1);
}

function controls(e) {
	you.style.left = event.clientX + 'px';
	you.style.top = event.clientY + 'px';
	xAxisYou = event.clientX;
	yAxisYou = event.clientY;
}

itBegins();
battleField.addEventListener('mousemove', controls, false);

Comments