#javascript #html
#javascript #HTML
Вопрос:
Итак, я создаю сеть, которая действует как контроллер, а затем отправляет данные через websocket, я сталкиваюсь с проблемой, и после быстрого поиска в Google мне это не помогает. Проблема в том, что когда я помещаю палец в Интернет, он регистрирует только один палец за раз, поэтому, когда я перемещаю джойстик, а затем нажимаю другую кнопку, джойстик не будет работать, пока я не отпущу новый палец.
Я пытаюсь спросить, как я могу одновременно касаться нескольких объектов, а не только одного
Вот скриншот и код
var canvas, ctx;
window.addEventListener('load', () => {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
resize();
document.addEventListener('mousedown', startDrawing);
document.addEventListener('mouseup', stopDrawing);
document.addEventListener('mousemove', Draw);
document.addEventListener('touchstart', startDrawing);
document.addEventListener('touchend', stopDrawing);
document.addEventListener('touchcancel', stopDrawing);
document.addEventListener('touchmove', Draw);
window.addEventListener('resize', resize);
document.getElementById("x_coordinate").innerText = 0;
document.getElementById("y_coordinate").innerText = 0;
document.getElementById("speed").innerText = 0;
document.getElementById("angle").innerText = 0;
});
var width, height, radius, x_orig, y_orig;
function resize() {
width = 250;
radius = 50;
height = 250;
ctx.canvas.width = width;
ctx.canvas.height = height;
background();
joystick(width / 2, height / 3);
}
function background() {
x_orig = width / 2;
y_orig = height / 3;
ctx.beginPath();
ctx.arc(x_orig, y_orig, radius 20, 0, Math.PI * 2, true);
ctx.fillStyle = '#ECE5E5';
ctx.fill();
}
function joystick(width, height) {
ctx.beginPath();
ctx.arc(width, height, radius, 0, Math.PI * 2, true);
ctx.fillStyle = '#F08080';
ctx.fill();
ctx.strokeStyle = '#F6ABAB';
ctx.lineWidth = 8;
ctx.stroke();
}
let coord = {
x: 0,
y: 0
};
let paint = false;
function getPosition(event) {
var mouse_x = event.clientX || event.touches[0].clientX;
var mouse_y = event.clientY || event.touches[0].clientY;
coord.x = mouse_x - canvas.offsetLeft;
coord.y = mouse_y - canvas.offsetTop;
}
function is_it_in_the_circle() {
var current_radius = Math.sqrt(Math.pow(coord.x - x_orig, 2) Math.pow(coord.y - y_orig, 2));
if (radius >= current_radius) return true
else return false
}
function startDrawing(event) {
paint = true;
getPosition(event);
if (is_it_in_the_circle()) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
background();
joystick(coord.x, coord.y);
Draw();
}
}
function stopDrawing() {
paint = false;
ctx.clearRect(0, 0, canvas.width, canvas.height);
background();
joystick(width / 2, height / 3);
document.getElementById("x_coordinate").innerText = 0;
document.getElementById("y_coordinate").innerText = 0;
document.getElementById("speed").innerText = 0;
document.getElementById("angle").innerText = 0;
}
function Draw(event) {
if (paint) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
background();
var angle_in_degrees, x, y, speed;
var angle = Math.atan2((coord.y - y_orig), (coord.x - x_orig));
if (Math.sign(angle) == -1) {
angle_in_degrees = Math.round(-angle * 180 / Math.PI);
} else {
angle_in_degrees = Math.round(360 - angle * 180 / Math.PI);
}
if (is_it_in_the_circle()) {
joystick(coord.x, coord.y);
x = coord.x;
y = coord.y;
} else {
x = radius * Math.cos(angle) x_orig;
y = radius * Math.sin(angle) y_orig;
joystick(x, y);
}
getPosition(event);
var speed = Math.round(100 * Math.sqrt(Math.pow(x - x_orig, 2) Math.pow(y - y_orig, 2)) / radius);
var x_relative = Math.round(x - x_orig);
var y_relative = Math.round(y - y_orig);
document.getElementById("x_coordinate").innerText = x_relative;
document.getElementById("y_coordinate").innerText = y_relative;
document.getElementById("speed").innerText = speed;
document.getElementById("angle").innerText = angle_in_degrees;
//send( x_relative,y_relative,speed,angle_in_degrees);
//send(angle_in_degrees, speed, x_relative, y_relative);
}
}
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-buttons,
.bot-buttons {
width: 100%;
display: flex;
flex-direction: row;
}
.bot-buttons {
height: 100%;
}
.top-buttons>.left,
.top-buttons>.right {
width: 100%;
display: flex;
flex-direction: row;
}
.bot-buttons>.left {
width: 100%;
display: flex;
margin: auto 0 auto 0;
}
.bot-buttons>.right {
width: auto;
margin: auto 50px auto auto;
display: flex;
flex-direction: row;
}
.bot-buttons>.right>.xyab {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.bot-buttons>.right>.xyab>.xb,
.bot-buttons>.right>.xyab>.a,
.bot-buttons>.right>.xyab>.y {
display: flex;
width: 100%;
}
.bot-buttons>.right>.xyab>.xb {
flex-direction: row;
}
.bot-buttons>.right>.xyab>.xb>.x,
.bot-buttons>.right>.xyab>.xb>.b {
display: flex;
width: 100%;
}
#lt {
width: 70px;
height: 70px;
background: url(assets/360_LT.png) no-repeat;
background-size: 70px 70px;
}
#lb {
width: 70px;
height: 70px;
background: url(assets/360_LB.png) no-repeat;
background-size: 70px 70px;
margin-left: 100px;
}
#rt {
width: 70px;
height: 70px;
background: url(assets/360_RT.png) no-repeat;
background-size: 70px 70px;
margin-left: 100px;
}
#rb {
width: 70px;
height: 70px;
background: url(assets/360_RB.png) no-repeat;
background-size: 70px 70px;
margin-left: auto;
}
#x {
width: 50px;
height: 50px;
background: url(assets/360_X.png) no-repeat;
background-size: 50px 50px;
margin: auto 20px auto auto;
}
#y {
width: 50px;
height: 50px;
background: url(assets/360_Y.png) no-repeat;
background-size: 50px 50px;
margin: auto;
}
#a {
width: 50px;
height: 50px;
background: url(assets/360_A.png) no-repeat;
background-size: 50px 50px;
margin: auto;
}
#b {
width: 50px;
height: 50px;
background: url(assets/360_B.png) no-repeat;
background-size: 50px 50px;
margin: auto auto auto 20px;
}
button,
input[type="submit"],
input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
<html>
<head>
<title>XBOX 360 Virtual</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body scroll="no" style="overflow: hidden;position: fixed;">
<div class="wrapper">
<div class="top-buttons">
<div class="left">
<button id="lt"></button>
<button id="lb"></button>
</div>
<div class="right">
<button id="rb"></button>
<button id="rt"></button>
</div>
</div>
<div class="bot-buttons">
<div class="left">
<div class="lsb">
<p style="text-align: center;">
X: <span id="x_coordinate"> </span> Y: <span id="y_coordinate"> </span> Speed: <span id="speed"> </span> % Angle: <span id="angle"> </span>
</p>
<canvas id="canvas" name="game"></canvas>
</div>
</div>
<div class="right">
<div class="xyab">
<div class="y">
<button id="y"></button>
</div>
<div class="xb">
<div class="x">
<button id="x"></button>
</div>
<div class="b">
<button id="b"></button>
</div>
</div>
<div class="a">
<button id="a"></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Вот изображение:
Комментарии:
1. Начните с чтения о мультитач здесь: developer.mozilla.org/en-US/docs/Web/API/Touch_events /…
2. Кто-нибудь, пожалуйста, объясните, почему вы отклоняете этот вопрос! Это хорошо написанный вопрос с четкой, особой целью, включая исходный код.
3. @RandyCasburn да, мне тоже интересно, почему? Это потому, что я новичок здесь и задаю какой-то глупый вопрос?
4. Ваш вопрос соответствует всем рекомендациям сообщества и в порядке. Некоторые люди увидят изображение вверху и сразу же проголосуют за это. Вы должны переместить свой вопрос (последнее предложение) в самый верх сообщения — это поможет другим понять ваше намерение.
5. Кроме того, переместите изображение так, чтобы оно было после кода.