Mirrors/cloud-game
1
0
Fork 0
mirror of https://github.com/giongto35/cloud-game.git synced 2026-07-24 10:37:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

WIP

Browse source
This commit is contained in:
hasagi 2019-05-15 19:05:10 +08:00
parent 859498912d
commit abc8a317c4
3 changed files with 79 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

36
static/gameboy2.html vendored
View file

@ -14,19 +14,19 @@
<div id="gamebody">
<div id="circle-pad-holder">
<div id="btn-up" class="dpad"></div>
<div id="btn-down" class="dpad"></div>
<div id="btn-left" class="dpad"></div>
<div id="btn-right" class="dpad"></div>
<div id="btn-up" class="dpad" value="up"></div>
<div id="btn-down" class="dpad" value="down"></div>
<div id="btn-left" class="dpad" value="left"></div>
<div id="btn-right" class="dpad" value="right"></div>
<div id="circle-pad"></div>
</div>
<div id="bottom-screen">
<video id="game-screen" autoplay=true poster="https://orig00.deviantart.net/cdcd/f/2017/276/a/a/october_2nd___gameboy_poltergeist_by_wanyo-dbpdmnd.gif"></video>
<div id="menu-screen">
<img id="box-art" src="/static/img/404.jpg" onerror="this.src='/static/img/404.jpg'">
<div id="title">
<div id="title" unselectable="on" class="unselectable" >
<p>What the game ?!?</p>
</div>
@ -35,17 +35,17 @@
</div>
</div>
<div id="btn-load" unselectable="on" class="btn-big unselectable">load</div>
<div id="btn-save" unselectable="on" class="btn-big unselectable">save</div>
<div id="btn-join" unselectable="on" class="btn-big unselectable">join</div>
<div id="btn-quit" unselectable="on" class="btn-big unselectable">quit</div>
<div id="btn-load" unselectable="on" class="btn-big unselectable" value="load">load</div>
<div id="btn-save" unselectable="on" class="btn-big unselectable" value="save">save</div>
<div id="btn-join" unselectable="on" class="btn-big unselectable" value="join">join</div>
<div id="btn-quit" unselectable="on" class="btn-big unselectable" value="quit">quit</div>
<div id="color-button-holder">
<div id="btn-select" unselectable="on" class="btn unselectable">Y</div>
<div id="btn-start" unselectable="on" class="btn unselectable">X</div>
<div id="btn-a" unselectable="on" class="btn unselectable">A</div>
<div id="btn-b" unselectable="on" class="btn unselectable">B</div>
<div id="btn-select" unselectable="on" class="btn unselectable" value="select">Y</div>
<div id="btn-start" unselectable="on" class="btn unselectable" value="start">X</div>
<div id="btn-a" unselectable="on" class="btn unselectable" value="a">A</div>
<div id="btn-b" unselectable="on" class="btn unselectable" value="b">B</div>
</div>
<div id="lights-holder">
@ -79,7 +79,7 @@
<script>
function fixScreen() {
target = $(window);
target = $(document);
child = $("#gamebody");
width = child.width();
@ -115,10 +115,10 @@
child.css("-moz-transform", st);
child.css("-ms-transform", st);
}
fixScreen();
// fixScreen();
$(window).on("resize", fixScreen);
$(window).on("orientationchange", fixScreen);
// $(window).on("resize", fixScreen);
// $(window).on("orientationchange", fixScreen);
</script>

8
static/js/controller.js vendored
View file

@ -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");

121
static/js/gesture_touch.js vendored
View file

@ -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);