Skip to content

Instantly share code, notes, and snippets.

@tkojitu

tkojitu/controlPad.html

Last active August 29, 2015 13:57
Show Gist options
  • Save tkojitu/9451513 to your computer and use it in GitHub Desktop.
Save tkojitu/9451513 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
controlPad.html
<html>
<head>
<style>
#controlPad {
border: 1px solid #000000;
}
</style>
<script src="controlPad.js"></script>
</head>
<body onload="onLoad()">
<canvas id="controlPad" width=300 height=300></canvas>
<p id="output"></p>
</body>
</html>
Raw
controlPad.js
var gPointer = {
canvasId: null,
x: 0,
y: 0,
oldX: 0,
oldY: 0,
touchX: 0,
touchY: 0,
moving: false,
HALF_SIZE: 50,
getControlPad: function() {
return document.getElementById(this.canvasId);
},
onTouchStart: function(event) {
event.preventDefault();
var touch = event.changedTouches[0];
if (!this.hitsPointer(touch)) {
return;
}
this.touchX = touch.clientX;
this.touchY = touch.clientY;
this.oldX = this.x;
this.oldY = this.y;
this.moving = true;
},
hitsPointer: function(touch) {
return this.x - this.HALF_SIZE <= touch.clientX
&& touch.clientX <= this.x + this.HALF_SIZE
&& this.y - this.HALF_SIZE <= touch.clientY
&& touch.clientY <= this.y + this.HALF_SIZE;
},
onTouchMove: function(event) {
event.preventDefault();
if (!this.moving) {
return;
}
var touch = event.changedTouches[0];
this.x = this.oldX + touch.clientX - this.touchX;
this.y = this.oldY + touch.clientY - this.touchY;
this.limitPointer();
},
limitPointer: function() {
var pad = this.getControlPad();
if (this.x - this.HALF_SIZE < 0) {
this.x = this.HALF_SIZE;
} else if (pad.clientWidth < this.x + this.HALF_SIZE) {
this.x = pad.clientWidth - this.HALF_SIZE;
}
if (this.y - this.HALF_SIZE < 0) {
this.y = this.HALF_SIZE;
} else if (pad.clientHeight < this.y + this.HALF_SIZE) {
this.y = pad.clientHeight - this.HALF_SIZE;
}
},
onTouchEnd: function(event) {
event.preventDefault();
this.moving = false;
},
initControlPad: function(canvasId) {
this.canvasId = canvasId;
this.addEventListeners();
this.initPointer();
},
addEventListeners: function() {
var pad = this.getControlPad();
pad.addEventListener("touchstart",
function(event) {gPointer.onTouchStart(event);},
false);
pad.addEventListener("touchmove",
function(event) {gPointer.onTouchMove(event);},
false);
pad.addEventListener("touchend",
function(event) {gPointer.onTouchEnd(event);},
false);
},
initPointer: function() {
var pad = this.getControlPad();
this.x = pad.clientWidth / 2;
this.y = pad.clientHeight / 2;
},
drawControlPad: function() {
this.clearPad();
this.drawPointer();
},
clearPad: function() {
var pad = this.getControlPad();
var context = pad.getContext("2d");
context.clearRect(0, 0, pad.clientWidth, pad.clientHeight);
},
drawPointer: function() {
var pad = this.getControlPad();
var context = pad.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(gPointer.x - this.HALF_SIZE, gPointer.y - this.HALF_SIZE,
this.HALF_SIZE * 2, this.HALF_SIZE * 2);
},
movePointer: function() {
this.movePointerX();
this.movePointerY();
},
movePointerX: function() {
if (this.moving) {
return;
}
var centerX = this.getCenterX();
if (this.x < centerX) {
this.x += 1;
} else if (this.x > centerX) {
this.x -= 1;
}
},
movePointerY: function() {
if (this.moving) {
return;
}
var centerY = this.getCenterY();
if (this.y < centerY) {
this.y += 1;
} else if (this.y > centerY) {
this.y -= 1;
}
},
getCenterX: function() {
var pad = this.getControlPad();
return pad.clientWidth / 2;
},
getCenterY: function() {
var pad = this.getControlPad();
return pad.clientHeight / 2;
},
getAngle: function() {
var centerX = this.getCenterX();
var centerY = this.getCenterY();
return Math.atan2(this.y - centerY, this.x - centerX) * 180.0 / Math.PI;
},
get8direction: function() {
var angle = this.getAngle();
if (0 <= angle && angle < 22.5) {
return 2;
} else if (22.5 <= angle && angle < 67.5) {
return 3;
} else if (67.5 <= angle && angle < 112.5) {
return 4;
} else if (112.5 <= angle && angle < 157.5) {
return 5;
} else if (157.5 <= angle && angle <= 180.0) {
return 6;
} else if (-22.5 <= angle && angle <= 0) {
return 2;
} else if (-67.5 <= angle && angle < -22.5) {
return 1;
} else if (-112.5 <= angle && angle < -67.5) {
return 0;
} else if (-157.5 <= angle && angle < -112.5) {
return 7;
} else if (-180 <= angle && angle < -157.5) {
return 6;
} else {
return -1;
}
}
};
function onLoad() {
gPointer.initControlPad("controlPad");
mainLoop();
}
function mainLoop() {
gPointer.movePointer();
gPointer.drawControlPad();
outputAngle();
window.requestAnimationFrame(mainLoop);
}
function outputAngle() {
var output = document.getElementById("output");
output.innerHTML = gPointer.get8direction();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment