forked from sent/waves
464 lines
18 KiB
JavaScript
464 lines
18 KiB
JavaScript
|
|
|
|
var touchOn = false;
|
|
var touchStartX = null;
|
|
var touchStartY = null;
|
|
var touchMoveX = null;
|
|
var touchMoveY = null;
|
|
|
|
var touchAngle = 0;
|
|
|
|
var testText = "default";
|
|
|
|
var touchSensitivity = 10;
|
|
var diagSensitivity = 15;
|
|
var touchDistance = 0;
|
|
|
|
var cursorSize = 30;
|
|
var cursorLineSize = 10;
|
|
var arrowMainSize = 50;
|
|
var arrowPointSize = 15;
|
|
|
|
var cursorColor = "#888";
|
|
var arrowColor = "#000";
|
|
|
|
/*
|
|
// old mobile controls
|
|
canvasElement.addEventListener("touchstart", function(event) {
|
|
if (state == "game" && !paused) {
|
|
if (event.targetTouches.length == 1) {
|
|
if (event.targetTouches[0].pageY >= cwh(BAR_HEIGHT) + os.y &&
|
|
event.targetTouches[0].pageY <= cwh(CANVAS_HEIGHT - BAR_HEIGHT) + os.y) {
|
|
touchOn = true;
|
|
touchStartX = event.targetTouches[0].pageX;
|
|
touchStartY = event.targetTouches[0].pageY;
|
|
touchMoveX = event.targetTouches[0].pageX;
|
|
touchMoveY = event.targetTouches[0].pageY;
|
|
}
|
|
}
|
|
}
|
|
}, false);
|
|
|
|
canvasElement.addEventListener("touchend", function(event) {
|
|
touchOn = false;
|
|
keyUp = false;
|
|
keyDown = false;
|
|
keyRight = false;
|
|
keyLeft = false;
|
|
}, false);
|
|
|
|
canvasElement.addEventListener("touchmove", function(event) {
|
|
if (state == "game" && !paused) {
|
|
if (event.targetTouches.length == 1) {
|
|
touchMoveX = event.targetTouches[0].pageX;
|
|
touchMoveY = event.targetTouches[0].pageY;
|
|
}
|
|
}
|
|
}, false);
|
|
*/
|
|
|
|
if (mobile) {
|
|
canvasElement.addEventListener("touchstart", function (event) {
|
|
if (state == "game" && !paused && !hideKeys) {
|
|
for (var i = 0; i < event.targetTouches.length; i++) {
|
|
// down
|
|
if (event.targetTouches[i].pageX > cwh(coords_down[0]) + os.x &&
|
|
event.targetTouches[i].pageX < cwh(coords_down[1]) + os.x &&
|
|
event.targetTouches[i].pageY > cwh(coords_down[2]) + os.y &&
|
|
event.targetTouches[i].pageY < cwh(coords_down[3]) + os.y) {
|
|
keyDown = true;
|
|
}
|
|
|
|
// right
|
|
else if (event.targetTouches[i].pageX > cwh(coords_right[0]) + os.x &&
|
|
event.targetTouches[i].pageX < cwh(coords_right[1]) + os.x &&
|
|
event.targetTouches[i].pageY > cwh(coords_right[2]) + os.y &&
|
|
event.targetTouches[i].pageY < cwh(coords_right[3]) + os.y) {
|
|
keyRight = true;
|
|
}
|
|
|
|
// up
|
|
else if (event.targetTouches[i].pageX > cwh(coords_up[0]) + os.x &&
|
|
event.targetTouches[i].pageX < cwh(coords_up[1]) + os.x &&
|
|
event.targetTouches[i].pageY > cwh(coords_up[2]) + os.y &&
|
|
event.targetTouches[i].pageY < cwh(coords_up[3]) + os.y) {
|
|
keyUp = true;
|
|
}
|
|
|
|
// left
|
|
else if (event.targetTouches[i].pageX > cwh(coords_left[0]) + os.x &&
|
|
event.targetTouches[i].pageX < cwh(coords_left[1]) + os.x &&
|
|
event.targetTouches[i].pageY > cwh(coords_left[2]) + os.y &&
|
|
event.targetTouches[i].pageY < cwh(coords_left[3]) + os.y) {
|
|
keyLeft = true;
|
|
}
|
|
}
|
|
}
|
|
}, false);
|
|
|
|
|
|
canvasElement.addEventListener("touchend", function (event) {
|
|
if (state == "game" && !paused && !hideKeys) {
|
|
for (var i = 0; i < event.changedTouches.length; i++) {
|
|
// down
|
|
if (event.changedTouches[i].pageX > cwh(coords_down[0]) + os.x &&
|
|
event.changedTouches[i].pageX < cwh(coords_down[1]) + os.x &&
|
|
event.changedTouches[i].pageY > cwh(coords_down[2]) + os.y &&
|
|
event.changedTouches[i].pageY < cwh(coords_down[3]) + os.y) {
|
|
keyDown = false;
|
|
}
|
|
|
|
// right
|
|
else if (event.changedTouches[i].pageX > cwh(coords_right[0]) + os.x &&
|
|
event.changedTouches[i].pageX < cwh(coords_right[1]) + os.x &&
|
|
event.changedTouches[i].pageY > cwh(coords_right[2]) + os.y &&
|
|
event.changedTouches[i].pageY < cwh(coords_right[3]) + os.y) {
|
|
keyRight = false;
|
|
}
|
|
|
|
// up
|
|
else if (event.changedTouches[i].pageX > cwh(coords_up[0]) + os.x &&
|
|
event.changedTouches[i].pageX < cwh(coords_up[1]) + os.x &&
|
|
event.changedTouches[i].pageY > cwh(coords_up[2]) + os.y &&
|
|
event.changedTouches[i].pageY < cwh(coords_up[3]) + os.y) {
|
|
keyUp = false;
|
|
}
|
|
|
|
// left
|
|
else if (event.changedTouches[i].pageX > cwh(coords_left[0]) + os.x &&
|
|
event.changedTouches[i].pageX < cwh(coords_left[1]) + os.x &&
|
|
event.changedTouches[i].pageY > cwh(coords_left[2]) + os.y &&
|
|
event.changedTouches[i].pageY < cwh(coords_left[3]) + os.y) {
|
|
keyLeft = false;
|
|
}
|
|
}
|
|
}
|
|
}, false);
|
|
|
|
var coords_down = [580, 680, 440, 540];
|
|
var coords_right = [690, 790, 440, 540];
|
|
var coords_up = [580, 680, 330, 430];
|
|
var coords_left = [470, 570, 440, 540];
|
|
|
|
//var coords_down = [690, 790, 440, 540];
|
|
//var coords_right = [580, 680, 440, 540];
|
|
//var coords_up = [470, 570, 440, 540];
|
|
//var coords_left = [360, 460, 440, 540];
|
|
|
|
function drawMobileControls() {
|
|
if (!hideKeys) {
|
|
var size = 100;
|
|
var keyFill = "rgba(255, 255, 255, 0.5)";
|
|
var keyFillOn = "rgba(255, 255, 0, 0.5)";
|
|
var keyTextFill = "rgba(0, 0, 0, 0.5)";
|
|
var keyTextFillOn = "rgba(255, 0, 0, 0.5)";
|
|
var keyTextSize = 50;
|
|
|
|
// down
|
|
canvas.beginPath();
|
|
canvas.rect(
|
|
cwh(580) + os.x,
|
|
cwh(440) + os.y,
|
|
cwh(size),
|
|
cwh(size)
|
|
);
|
|
if (keyDown) {
|
|
canvas.fillStyle = keyFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyFill;
|
|
}
|
|
canvas.fill();
|
|
|
|
if (keyDown) {
|
|
canvas.fillStyle = keyTextFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyTextFill;
|
|
}
|
|
canvas.font = "Bold " + cwh(keyTextSize) + "px Arial Black";
|
|
canvas.textAlign = "center";
|
|
canvas.fillText("\u2193", cwh(630) + os.x, cwh(505) + os.y);
|
|
|
|
// right
|
|
canvas.beginPath();
|
|
canvas.rect(
|
|
cwh(690) + os.x,
|
|
cwh(440) + os.y,
|
|
cwh(size),
|
|
cwh(size)
|
|
);
|
|
if (keyRight) {
|
|
canvas.fillStyle = keyFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyFill;
|
|
}
|
|
canvas.fill();
|
|
|
|
if (keyRight) {
|
|
canvas.fillStyle = keyTextFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyTextFill;
|
|
}
|
|
canvas.font = "Bold " + cwh(keyTextSize) + "px Arial Black";
|
|
canvas.textAlign = "center";
|
|
canvas.fillText("\u2192", cwh(740) + os.x, cwh(505) + os.y);
|
|
|
|
// up
|
|
canvas.beginPath();
|
|
canvas.rect(
|
|
cwh(580) + os.x,
|
|
cwh(330) + os.y,
|
|
cwh(size),
|
|
cwh(size)
|
|
);
|
|
if (keyUp) {
|
|
canvas.fillStyle = keyFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyFill;
|
|
}
|
|
canvas.fill();
|
|
|
|
if (keyUp) {
|
|
canvas.fillStyle = keyTextFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyTextFill;
|
|
}
|
|
canvas.font = "Bold " + cwh(keyTextSize) + "px Arial Black";
|
|
canvas.textAlign = "center";
|
|
canvas.fillText("\u2191", cwh(630) + os.x, cwh(395) + os.y);
|
|
|
|
// left
|
|
canvas.beginPath();
|
|
canvas.rect(
|
|
cwh(470) + os.x,
|
|
cwh(440) + os.y,
|
|
cwh(size),
|
|
cwh(size)
|
|
);
|
|
if (keyLeft) {
|
|
canvas.fillStyle = keyFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyFill;
|
|
}
|
|
canvas.fill();
|
|
|
|
if (keyLeft) {
|
|
canvas.fillStyle = keyTextFillOn;
|
|
} else {
|
|
canvas.fillStyle = keyTextFill;
|
|
}
|
|
canvas.font = "Bold " + cwh(keyTextSize) + "px Arial Black";
|
|
canvas.textAlign = "center";
|
|
canvas.fillText("\u2190", cwh(520) + os.x, cwh(505) + os.y);
|
|
}
|
|
}
|
|
}
|
|
|
|
// old
|
|
function mobileControls() {
|
|
if (state == "game" && !paused && !hideKeys) {
|
|
if (touchOn) {
|
|
// cursor
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX - cwh(cursorSize / 2), touchStartY);
|
|
canvas.lineTo(touchStartX + cwh(cursorSize / 2), touchStartY);
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = cursorColor;
|
|
canvas.stroke();
|
|
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY - cwh(cursorSize / 2));
|
|
canvas.lineTo(touchStartX, touchStartY + cwh(cursorSize / 2));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = cursorColor;
|
|
canvas.stroke();
|
|
|
|
touchDistance = Math.sqrt(Math.pow(touchStartX - touchMoveX, 2) + Math.pow(touchStartY - touchMoveY, 2));
|
|
|
|
touchAngle = angle360(touchStartX, touchStartY, touchMoveX, touchMoveY);
|
|
|
|
// arrow - right
|
|
if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 360 - 45/2 || touchAngle < 45/2)) {
|
|
//if ((touchMoveX >= touchStartX + cwh(touchSensitivity)) &&
|
|
// !(touchMoveY >= touchStartY + cwh(touchSensitivity) + cwh(diagSensitivity)) &&
|
|
// !(touchMoveY <= touchStartY - cwh(touchSensitivity) - cwh(diagSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize), touchStartY);
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize - arrowPointSize), touchStartY - cwh(arrowPointSize));
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize), touchStartY);
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize - arrowPointSize), touchStartY + cwh(arrowPointSize));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = false;
|
|
keyDown = false;
|
|
keyRight = true;
|
|
keyLeft = false;
|
|
}
|
|
|
|
// arrow - left
|
|
else if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 45*3 + 45/2 && touchAngle < 45*4 + 45/2)) {
|
|
//else if ((touchMoveX <= touchStartX - cwh(touchSensitivity)) &&
|
|
// !(touchMoveY >= touchStartY + cwh(touchSensitivity) + cwh(diagSensitivity)) &&
|
|
// !(touchMoveY <= touchStartY - cwh(touchSensitivity) - cwh(diagSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize), touchStartY);
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize - arrowPointSize), touchStartY - cwh(arrowPointSize));
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize), touchStartY);
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize - arrowPointSize), touchStartY + cwh(arrowPointSize));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = false;
|
|
keyDown = false;
|
|
keyRight = false;
|
|
keyLeft = true;
|
|
}
|
|
|
|
// arrow - up
|
|
else if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 45*5 + 45/2 && touchAngle < 45*6 + 45/2)) {
|
|
//else if ((touchMoveY <= touchStartY - cwh(touchSensitivity)) &&
|
|
// !(touchMoveX >= touchStartX + cwh(touchSensitivity) + cwh(diagSensitivity)) &&
|
|
// !(touchMoveX <= touchStartX - cwh(touchSensitivity) - cwh(diagSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX, touchStartY - cwh(arrowMainSize));
|
|
canvas.lineTo(touchStartX - cwh(arrowPointSize), touchStartY - cwh(arrowMainSize - arrowPointSize));
|
|
canvas.lineTo(touchStartX, touchStartY - cwh(arrowMainSize));
|
|
canvas.lineTo(touchStartX + cwh(arrowPointSize), touchStartY - cwh(arrowMainSize - arrowPointSize));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = true;
|
|
keyDown = false;
|
|
keyRight = false;
|
|
keyLeft = false;
|
|
}
|
|
|
|
// arrow - down
|
|
else if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 45*1 + 45/2 && touchAngle < 45*2 + 45/2)) {
|
|
//else if ((touchMoveY >= touchStartY + cwh(touchSensitivity)) &&
|
|
// !(touchMoveX >= touchStartX + cwh(touchSensitivity) + cwh(diagSensitivity)) &&
|
|
// !(touchMoveX <= touchStartX - cwh(touchSensitivity) - cwh(diagSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX, touchStartY + cwh(arrowMainSize));
|
|
canvas.lineTo(touchStartX - cwh(arrowPointSize), touchStartY + cwh(arrowMainSize - arrowPointSize));
|
|
canvas.lineTo(touchStartX, touchStartY + cwh(arrowMainSize));
|
|
canvas.lineTo(touchStartX + cwh(arrowPointSize), touchStartY + cwh(arrowMainSize - arrowPointSize));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = false;
|
|
keyDown = true;
|
|
keyRight = false;
|
|
keyLeft = false;
|
|
}
|
|
|
|
// arrow - right/up
|
|
else if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 45*6 + 45/2 && touchAngle < 45*7 + 45/2)) {
|
|
//else if ((touchMoveX >= touchStartX + cwh(touchSensitivity)) &&
|
|
// (touchMoveY <= touchStartY - cwh(touchSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75), touchStartY - cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5), touchStartY - cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75), touchStartY - cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75), touchStartY - cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = true;
|
|
keyDown = false;
|
|
keyRight = true;
|
|
keyLeft = false;
|
|
}
|
|
|
|
// arrow - right/down
|
|
else if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 45*0 + 45/2 && touchAngle < 45*1 + 45/2)) {
|
|
//else if ((touchMoveX >= touchStartX + cwh(touchSensitivity)) &&
|
|
// (touchMoveY >= touchStartY - cwh(touchSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75), touchStartY + cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5), touchStartY + cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75), touchStartY + cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX + cwh(arrowMainSize * 0.75), touchStartY + cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = false;
|
|
keyDown = true;
|
|
keyRight = true;
|
|
keyLeft = false;
|
|
}
|
|
|
|
// arrow - left/up
|
|
else if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 45*4 + 45/2 && touchAngle < 45*5 + 45/2)) {
|
|
//else if ((touchMoveX <= touchStartX - cwh(touchSensitivity)) &&
|
|
// (touchMoveY <= touchStartY - cwh(touchSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75), touchStartY - cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5), touchStartY - cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75), touchStartY - cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75), touchStartY - cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = true;
|
|
keyDown = false;
|
|
keyRight = false;
|
|
keyLeft = true;
|
|
}
|
|
|
|
// arrow - left/down
|
|
else if (touchDistance >= cwh(touchSensitivity) && (touchAngle >= 45*2 + 45/2 && touchAngle < 45*3 + 45/2)) {
|
|
//else if ((touchMoveX <= touchStartX - cwh(touchSensitivity)) &&
|
|
// (touchMoveY >= touchStartY + cwh(touchSensitivity))) {
|
|
canvas.beginPath();
|
|
canvas.moveTo(touchStartX, touchStartY);
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75), touchStartY + cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5), touchStartY + cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75), touchStartY + cwh(arrowMainSize * 0.75));
|
|
canvas.lineTo(touchStartX - cwh(arrowMainSize * 0.75), touchStartY + cwh(arrowMainSize * 0.75 - arrowPointSize * 1.5));
|
|
canvas.lineWidth = cwh(cursorLineSize);
|
|
canvas.strokeStyle = arrowColor;
|
|
canvas.stroke();
|
|
|
|
keyUp = false;
|
|
keyDown = true;
|
|
keyRight = false;
|
|
keyLeft = true;
|
|
}
|
|
|
|
else {
|
|
keyUp = false;
|
|
keyDown = false;
|
|
keyRight = false;
|
|
keyLeft = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function angle(cx, cy, ex, ey) {
|
|
var dy = ey - cy;
|
|
var dx = ex - cx;
|
|
var theta = Math.atan2(dy, dx); // range (-PI, PI]
|
|
theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
|
|
return theta;
|
|
}
|
|
function angle360(cx, cy, ex, ey) {
|
|
var theta = angle(cx, cy, ex, ey); // range (-180, 180]
|
|
if (theta < 0) theta = 360 + theta; // range [0, 360)
|
|
return theta;
|
|
} |