From 9955feedf7fb98966d76b2943063319fd0c3bb47 Mon Sep 17 00:00:00 2001 From: trichimtrich Date: Thu, 16 May 2019 01:23:48 +0800 Subject: [PATCH] fix touch gesture --- static/css/main.css | 5 ++ static/gameboy2.html | 48 ----------- static/js/gesture_touch.js | 162 ++++++++++++++++++++++++------------- 3 files changed, 113 insertions(+), 102 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 81e2cc66..fc34d2d9 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3 +1,8 @@ +body { + background-image: url('https://t3.ftcdn.net/jpg/02/41/14/36/500_F_241143639_RW6VdHbqYRM0yfNpDxDlWpj0uXWglAC2.jpg'); + background-repeat: repeat; +} + #gamebody { display: block; width: 556px; diff --git a/static/gameboy2.html b/static/gameboy2.html index 5d51936d..7012a313 100644 --- a/static/gameboy2.html +++ b/static/gameboy2.html @@ -77,54 +77,6 @@ - - - - - \ No newline at end of file diff --git a/static/js/gesture_touch.js b/static/js/gesture_touch.js index 8a434f4f..37bef6c4 100644 --- a/static/js/gesture_touch.js +++ b/static/js/gesture_touch.js @@ -1,29 +1,75 @@ +// Window rerender / rotate screen if needed +var isSwitch = false; -// VIRTUAL JOYSTICK +function fixScreen() { + target = $(document); + child = $("#gamebody"); + + width = child.width(); + height = child.height(); + + // Should have maximum box for desktop + if (["win", "mac", "linux"].indexOf(getOS()) != -1) { + targetWidth = Math.min(800, target.width()); + targetHeight = Math.min(600, target.height()); + } else { + targetWidth = target.width(); + targetHeight = target.height(); + } + + screenWidth = targetWidth; + screenHeight = targetHeight; + + st = "translate(-50%, -50%) "; + // rotate ? + if (isPortrait()) { + st += `rotate(90deg) `; + screenWidth = targetHeight; + screenHeight = targetWidth; + isSwitch = true; + } else { + isSwitch = false; + } + + // zoom in/out ? + st += `scale(${Math.min(screenWidth / width, screenHeight / height)}) `; + + child.css("transform", st); + child.css("-webkit-transform", st); + child.css("-moz-transform", st); + child.css("-ms-transform", st); +} +fixScreen(); + +$(window).on("resize", fixScreen); +$(window).on("orientationchange", fixScreen); + + + + +// Virtual Joystick // Ref: https://jsfiddle.net/aa0et7tr/5/ + var dpadState = {}; var touchIdx = null; const maxDiff = 20; // pixel var dragStart = null; -var currentPos = { x: 0, y: 0 }; var padHolder = $("#circle-pad-holder"); var padCircle = $("#circle-pad"); -function imAlive() { - $("#room-txt").val(Math.random()); -} - -function resetTouchState() { - checkDPadAxis(false, "up"); - checkDPadAxis(false, "down"); - checkDPadAxis(false, "left"); - checkDPadAxis(false, "right"); - +function resetJoystickState() { + // trigger up event? + checkDPadAxis("up", false); + checkDPadAxis("down", false); + checkDPadAxis("left", false); + checkDPadAxis("right", false); + dragStart = null; + touchIdx = null; $(".dpad").removeClass("pressed"); } -function checkDPadAxis(bo, axis) { +function checkDPadAxis(axis, bo) { if (bo != dpadState[axis]) { dpadState[axis] = bo; @@ -36,20 +82,19 @@ function checkDPadAxis(bo, axis) { } -function handleMouseDown(event) { - // event.preventDefault(); - +function handleJoystickDown(event) { padCircle.css("transition", "0s"); padCircle.css("-moz-transition", "0s"); padCircle.css("-webkit-transition", "0s"); if (event.changedTouches) { + resetJoystickState(); + touchIdx = event.changedTouches[0].identifier; - dragStart = { - x: event.changedTouches[0].screenX, - y: event.changedTouches[0].screenY, + x: event.changedTouches[0].clientX, + y: event.changedTouches[0].clientY, }; - resetTouchState(); + return; } dragStart = { @@ -59,40 +104,52 @@ function handleMouseDown(event) { } -function handleMouseMove(event) { - // event.preventDefault(); +function handleJoystickMove(event) { + // stop other events + event.preventDefault(); if (dragStart === null) return; + if (event.changedTouches) { - // check if move source is from other touch? - event.clientX = event.changedTouches[touchIdx].screenX; - event.clientY = event.changedTouches[touchIdx].screenY; - imAlive(); + // check if moving source is from other touch? + for (var i = 0; i < event.changedTouches.length; i++) { + if (event.changedTouches[i].identifier === touchIdx) { + event.clientX = event.changedTouches[i].clientX; + event.clientY = event.changedTouches[i].clientY; + } + } + if (event.clientX == undefined || event.clientY == undefined) + return; } - + 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); + xNew = distance * Math.cos(angle); + yNew = distance * Math.sin(angle); + + // check if screen is switched or not + if (isSwitch) { + tmp = xNew; + xNew = yNew; + yNew = -tmp; + } + 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; const yRatio = yNew / maxDiff; - checkDPadAxis(xRatio <= -0.5, "left"); - checkDPadAxis(xRatio >= 0.5, "right"); - checkDPadAxis(yRatio <= -0.5, "up"); - checkDPadAxis(yRatio >= 0.5, "down"); + checkDPadAxis("left", xRatio <= -0.5); + checkDPadAxis("right", xRatio >= 0.5); + checkDPadAxis("up", yRatio <= -0.5); + checkDPadAxis("down", yRatio >= 0.5); } -function handleMouseUp(event) { - event.preventDefault(); +function handleJoystickUp(event) { if (dragStart === null) return; padCircle.css("transition", ".2s"); padCircle.css("-moz-transition", ".2s"); @@ -101,9 +158,7 @@ function handleMouseUp(event) { padCircle.css("-moz-transform", "translate3d(0px, 0px, 0px)"); padCircle.css("-webkit-transform", "translate3d(0px, 0px, 0px)"); - dragStart = null; - currentPos = { x: 0, y: 0 }; - resetTouchState(); + resetJoystickState(); } @@ -115,20 +170,19 @@ function handleButtonUp(event) { doButtonUp($(this).attr("value")); } +// mouse events +$(".btn, .btn-big").on("mousedown", handleButtonDown); +$(".btn, .btn-big").on("mouseup", 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); +padHolder.on('mousedown', handleJoystickDown); +$(window).on('mousemove', handleJoystickMove); +$(window).on('mouseup', handleJoystickUp); -// 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 +// touch events +$(".btn, .btn-big").on("touchstart", handleButtonDown); +$(".btn, .btn-big").on("touchend", handleButtonUp); + +padHolder.on('touchstart', handleJoystickDown); +window.addEventListener("touchmove", handleJoystickMove, { passive: false }); +padHolder.on('touchend', handleJoystickUp); \ No newline at end of file