<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="training-bot.js"></script>
<script src="training-bot-ui.js"></script>
<script src="training-platform.js"></script>
<script src="training-platform-ui.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas");
var trainingBot = new TrainingBot({
width: 600,
height: 420
});
var trainingBotUI = new TrainingBotUI(canvas, trainingBot);
var platformUI = new TrainingPlatformUI(canvas, trainingBotUI);
var totalMove = 0;
var hitMove = 0;
var botHitBox = __trainingBot.getHitBoxSize();
var accuracy = document.getElementById("accuracy");
var startBtn = document.getElementById("start_btn");
startBtn.addEventListener("click", function(e) {
setTimeout(function() {
platformUI.ready();
trainingBot.start();
canvas.addEventListener("mousemove", function(e) {
totalMove++;
var botPosition = trainingBot.getPosition();
var d = Math.sqrt(Math.pow(e.offsetX - botPosition.x, 2) + Math.pow(e.offsetY - botPosition.y, 2));
if (d < botHitBox.radius) {
hitMove++;
}
accuracy.innerText = Math.round(hitMove / totalMove * 1000) / 10;
});
var startTime = Date.now();
var gameTime = document.getElementById("game_time");
setInterval(function() {
var playTime = Date.now() - startTime;
gameTime.innerText = parseInt(playTime / 60000) + ":" + Math.round((playTime / 1000) % 60);
}, 50);
}, 1000);
});
var speedInput = document.getElementById("speed_input");
speed_input.value = trainingBot.getSpeed();
speed_input.addEventListener("change", function(e) {
trainingBot.setSpeed(speed_input.value);
});
});
</script>
</head>
<body>
<h1>Tracking aim training v0.1</h1>
<label>Time:</label><span id="game_time"></span>
<br>
<label>Accuracy:</label><span id="accuracy"></span>
<label>%</label>
<br>
<canvas id="canvas" width="600" height="420" style="border:1px solid #000000;"></canvas>
<br>
<label>set your speed(50-500)</label>
<input type="text" id="speed_input" value="" />
<br>
<input type="button" id="start_btn" value="start game" />
<hr>
<div>Up coming features</div>
<ul>
<li>Show your accuracy -- done(need clean up code for it)</li>
<li>Highlight target when your mouse on track</li>
<li>Dynamic speed variety</li>
<li>better algorithm for bouncing</li>
<li>Adjust target size</li>
</ul>
</body>
</html>
(function(window) {
var TrainingBotUI = function(canvas, trainingBot) {
var
__canvas = canvas;
__context = __canvas.getContext('2d');
__trainingBot = trainingBot;
var render = function() {
var botPosition = __trainingBot.getPosition();
var botHitBox = __trainingBot.getHitBoxSize();
__context.beginPath();
__context.arc(botPosition.x, botPosition.y, botHitBox.radius, 0, 2 * Math.PI, false);
__context.fillStyle = 'green';
__context.fill();
__context.closePath();
};
return {
render: render
};
};
window.TrainingBotUI = TrainingBotUI;
}(window));
/* Styles go here */
(function(window) {
var TrainingBot = function(boundary, config) {
var MOVE_INTERVAL = 0.8;
var __direction = {
radian: 0,
timeSpan: 500
},
__speed = 80,
__position = {
x: 0,
y: 0
},
__boundary = {
width: 0,
height: 0
},
__hitBoxSize = {
radius: 10
},
__directionSubs = {},
__subId = 0,
__startHandle;
var setDirection = function(radian, timeSpan) {
__direction = {
radian: radian,
timeSpan: timeSpan || __direction.timeSpan
};
};
var getDirection = function() {
return __direction;
};
var setPosition = function(top, left) {
__position = {
x: top,
y: left
};
};
var getPosition = function() {
return __position;
};
var setSpeed = function(speed) {
__speed = speed;
restart();
};
var getSpeed = function() {
return __speed;
};
var setBoundary = function(width, height) {
__boundary = {
width: width,
height: height
};
};
var getBoundary = function() {
return __boundary;
};
var setHitBoxSize = function(radius) {
__hitBoxSize = {
radius: radius
};
};
var getHitBoxSize = function() {
return __hitBoxSize;
};
var start = function() {
var changeDirectionHandle = null;
__startHandle = setInterval(function() {
var newPosition = {
x: __position.x + Math.cos(__direction.radian) * MOVE_INTERVAL,
y: __position.y + Math.sin(__direction.radian) * MOVE_INTERVAL
}
if(isPositionInBound(newPosition)){
setPosition(newPosition.x, newPosition.y);
}
else{
setDirection(__direction.radian + Math.PI);
}
if (!changeDirectionHandle) {
changeDirectionHandle = setTimeout(function() {
setDirection(changeRadian(), changeTimeSpan());
changeDirectionHandle = null;
}, __direction.timeSpan);
}
}, convertSpeedToTimeSpan(__speed));
};
var restart = function(){
clearInterval(__startHandle);
start();
}
var changeDirection = function(){
}
function changeRadian() {
return Math.random() * Math.PI * 2;
}
function changeTimeSpan() {
return Math.random() * 3000 + 500;
}
function isPositionInBound(position){
return position.x <= __boundary.width - __hitBoxSize.radius && position.y <= __boundary.height - __hitBoxSize.radius && position.x >= __hitBoxSize.radius && position.y >= __hitBoxSize.radius;
}
function convertSpeedToTimeSpan(speed) {
return 1000 / speed;
}
(function init() {
if (boundary) {
setBoundary(boundary.width, boundary.height);
setPosition(__hitBoxSize.radius, __hitBoxSize.radius);
}
}());
return {
start: start,
setDirection: setDirection,
getDirection: getDirection,
setPosition: setPosition,
getPosition: getPosition,
setSpeed: setSpeed,
getSpeed: getSpeed,
getHitBoxSize: getHitBoxSize
};
};
window.TrainingBot = TrainingBot;
}(window));
(function(window){
var MessageQueue = function(){
};
window.MessageQueue = MessageQueue;
}(window));
(function(window) {
var TrainingPlatform = function(trainingBot) {
var
__trainingBot = trainingBot;
__trackOnTargetCount = 0,
__trackCount = 0,
__startTime = 0,
__currentTime = 0;
var trackTarget = function(onTarget) {
__trackCount++;
if (onTarget) {
__trackOnTargetCount++;
}
};
var getAccuracy = function() {
return Math.round(__trackOnTargetCount / __trackCount * 100) / 100;
};
var startGame = function(){
__startTime = Date.now();
};
var endGame = function(){
__currentTime = Date.now();
};
var getTime = function(){
return (Date.now() - __startTime)/1000;
};
var getTrainingBot = function(){
return __trainingBot;
};
return {
trackTarget: trackTarget,
getAccuracy: getAccuracy,
startGame: startGame,
endGame: endGame,
getTime: getTime,
getTrainingBot: getTrainingBot
};
};
window.TrainingPlatform = TrainingPlatform;
}(window));
(function(window) {
var TrainingPlatformUI = function(canvas, trainingBotUI) {
var
__canvas = canvas;
__context = __canvas.getContext('2d');
var ready = function() {
window.requestAnimationFrame(render);
};
var render = function() {
clearBoard();
trainingBotUI.render();
ready();
};
var clearBoard = function() {
__context.clearRect(0, 0, __canvas.width, __canvas.height);
};
(function init(){
}());
return {
ready: ready
};
};
window.TrainingPlatformUI = TrainingPlatformUI;
}(window));