From abc8a317c442184d162a9eae2b3a8494bc4f5eec Mon Sep 17 00:00:00 2001 From: hasagi Date: Wed, 15 May 2019 19:05:10 +0800 Subject: [PATCH] WIP --- static/gameboy2.html | 36 +++++------ static/js/controller.js | 8 --- static/js/gesture_touch.js | 121 +++++++++++++++++++------------------ 3 files changed, 79 insertions(+), 86 deletions(-) diff --git a/static/gameboy2.html b/static/gameboy2.html index 32400195..5d51936d 100644 --- a/static/gameboy2.html +++ b/static/gameboy2.html @@ -14,19 +14,19 @@
-
-
-
-
+
+
+
+
- + -
load
-
save
-
join
-
quit
+
load
+
save
+
join
+
quit
-
Y
-
X
-
A
-
B
+
Y
+
X
+
A
+
B
@@ -79,7 +79,7 @@ diff --git a/static/js/controller.js b/static/js/controller.js index f4f55b3a..fd8da8ba 100644 --- a/static/js/controller.js +++ b/static/js/controller.js @@ -85,14 +85,6 @@ function setState(name, bo) { } } -function doButton(bo, name) { - if (bo == true) { - doButtonDown(name); - } else if (bo == false) { - doButtonUp(name); - } -} - function doButtonDown(name) { $(`#btn-${name}`).addClass("pressed"); diff --git a/static/js/gesture_touch.js b/static/js/gesture_touch.js index 88294044..8a434f4f 100644 --- a/static/js/gesture_touch.js +++ b/static/js/gesture_touch.js @@ -1,19 +1,25 @@ // VIRTUAL JOYSTICK // Ref: https://jsfiddle.net/aa0et7tr/5/ - var dpadState = {}; var touchIdx = null; -const maxDiff = 20; +const maxDiff = 20; // pixel +var dragStart = null; +var currentPos = { x: 0, y: 0 }; +var padHolder = $("#circle-pad-holder"); +var padCircle = $("#circle-pad"); -function resetDPad() { - dpadState = { - up: false, - down: false, - left: false, - right: false, - }; +function imAlive() { + $("#room-txt").val(Math.random()); +} + +function resetTouchState() { + checkDPadAxis(false, "up"); + checkDPadAxis(false, "down"); + checkDPadAxis(false, "left"); + checkDPadAxis(false, "right"); + $(".dpad").removeClass("pressed"); } @@ -22,41 +28,28 @@ function checkDPadAxis(bo, axis) { dpadState[axis] = bo; if (dpadState[axis]) { - $(`#dpad-${axis}`).addClass("pressed"); + doButtonDown(axis); } else { - $(`#dpad-${axis}`).removeClass("pressed"); + doButtonUp(axis); } - - // doButton(bo, axis); } } -parent = $("#circle-pad-holder"); -stick = document.getElementById("circle-pad"); - -// TODO: REMOVE MOUSE -parent.on('mousedown', handleMouseDown); -$(document).on('mousemove', handleMouseMove); -$(document).on('mouseup', handleMouseUp); - -parent.on('touchstart', handleMouseDown); -parent.on('touchmove', handleMouseMove); -parent.on('touchend', handleMouseUp); - -let dragStart = null; -let currentPos = { x: 0, y: 0 }; - function handleMouseDown(event) { // event.preventDefault(); - stick.style.transition = '0s'; + + padCircle.css("transition", "0s"); + padCircle.css("-moz-transition", "0s"); + padCircle.css("-webkit-transition", "0s"); if (event.changedTouches) { touchIdx = event.changedTouches[0].identifier; + dragStart = { - x: event.changedTouches[0].clientX, - y: event.changedTouches[0].clientY, + x: event.changedTouches[0].screenX, + y: event.changedTouches[0].screenY, }; - resetDPad(); + resetTouchState(); return; } dragStart = { @@ -70,16 +63,23 @@ function handleMouseMove(event) { // event.preventDefault(); if (dragStart === null) return; if (event.changedTouches) { - event.clientX = event.changedTouches[touchIdx].clientX; - event.clientY = event.changedTouches[touchIdx].clientY; + // check if move source is from other touch? + event.clientX = event.changedTouches[touchIdx].screenX; + event.clientY = event.changedTouches[touchIdx].screenY; + imAlive(); } + const xDiff = event.clientX - dragStart.x; const yDiff = event.clientY - dragStart.y; const angle = Math.atan2(yDiff, xDiff); const distance = Math.min(maxDiff, Math.hypot(xDiff, yDiff)); const xNew = distance * Math.cos(angle); const yNew = distance * Math.sin(angle); - stick.style.transform = `translate(${xNew}px, ${yNew}px)`; + style = `translate(${xNew}px, ${yNew}px)`; + // $("#room-txt").val(style); + padCircle.css("transform", style); + padCircle.css("-webkit-transform", style); + padCircle.css("-moz-transform", style); currentPos = { x: xNew, y: yNew }; const xRatio = xNew / maxDiff; @@ -90,44 +90,45 @@ function handleMouseMove(event) { checkDPadAxis(yRatio >= 0.5, "down"); } + function handleMouseUp(event) { event.preventDefault(); if (dragStart === null) return; - stick.style.transition = '.2s'; - stick.style.transform = `translate3d(0px, 0px, 0px)`; + padCircle.css("transition", ".2s"); + padCircle.css("-moz-transition", ".2s"); + padCircle.css("-webkit-transition", ".2s"); + padCircle.css("transform", "translate3d(0px, 0px, 0px)"); + padCircle.css("-moz-transform", "translate3d(0px, 0px, 0px)"); + padCircle.css("-webkit-transform", "translate3d(0px, 0px, 0px)"); + dragStart = null; currentPos = { x: 0, y: 0 }; - resetDPad(); - - // $(".abxy .button").removeClass("pressed"); + resetTouchState(); } - - - - - function handleButtonDown(event) { - $(this).addClass("pressed"); - // doButtonDown($(this).attr("value")); + doButtonDown($(this).attr("value")); } function handleButtonUp(event) { - $(this).removeClass("pressed"); - // doButtonUp($(this).attr("value")); + doButtonUp($(this).attr("value")); } -// TODO: REMOVE MOUSE -// $(".abxy .button").on("mousedown", handleButtonDown); -// $(".abxy .button").on("mouseup", handleButtonUp); -$(".btn").on("mousedown", handleButtonDown); -$(".btn").on("mouseup", handleButtonUp); -$(".btn").on("touchstart", handleButtonDown); -$(".btn").on("touchend", handleButtonUp); +// $(".btn").on("mousedown", handleButtonDown); +// $(".btn").on("mouseup", handleButtonUp); +// $(".btn-big").on("mousedown", handleButtonDown); +// $(".btn-big").on("mouseup", handleButtonUp); +// $(".btn").on("touchstart", handleButtonDown); +// $(".btn").on("touchend", handleButtonUp); +// $(".btn-big").on("touchstart", handleButtonDown); +// $(".btn-big").on("touchend", handleButtonUp); -$(".btn-big").on("mousedown", handleButtonDown); -$(".btn-big").on("mouseup", handleButtonUp); -$(".btn-big").on("touchstart", handleButtonDown); -$(".btn-big").on("touchend", handleButtonUp); + +// padHolder.on('mousedown', handleMouseDown); +// $(document).on('mousemove', handleMouseMove); +// $(document).on('mouseup', handleMouseUp); +padHolder.on('touchstart', handleMouseDown); +$(window).on('touchmove', handleMouseMove); +padHolder.on('touchend', handleMouseUp); \ No newline at end of file