[HTML][JavaScript][AJAX]Buttony funkcja klawiatury Opcje

[programistaarek]

Witam serdecznie mam taki problem. Mam na stronie internetowej skrypt napisany w js taka mini gra w której trzeba używać klawiszy strzałki oraz WASD. Na komputerze nie ma problemu wiadomo mamy klawiaturę ale na telefonie już to nie funkcjonuje. Chciałbym uzyskać pomoc na zasadzie napisania skryptu który wyświetli cztery buttony który każdy z osobna będzie odpowiadał funkcji klawisza. Chce zrobić cztery strzałki. Czytałem głównie na anglojęzycznych forach jak takie coś zrobić ale tylko działa to na komputerze że pokazuje jaki kliknelismy klawisz. Chciałbym gotowe rozwiązanie bo już przeszukałem kompletnie wszystko i nie znalazłem pomocy. Pozdrawiam i czekam na odpowiedź

[trueblue]

No, to wyświetl te 4 buttony i podepnij do nich zdarzenia analogiczne do zdarzeń przypiętych do klawiszy.

[programistaarek]

Mam zrobić funkcje o nazwie jakiejś tam key i numer klawisza i w buttonie oneclick?

[viking]

Tu masz przykład http://stackoverflow.com/questions/1438986...round-a-rectang jak odczytywać same klawisze (bo to oczywiście też możesz zrobić). Click też może być https://developer.mozilla.org/pl/docs/Web/A...ddEventListener

[programistaarek]

Dziekuje za odpowiedź ale już to widziałem i nie zrozumiałem chce znaleźć gotowy js plus wstawienie buttona ;/

[viking]

Chcesz pisać mini grę i nie znasz podstaw?

Wcześniej wczytane jquery:

[HTML] pobierz, plaintext 
<button id="keyW">W</button>
<button id="keyS">S</button>
<button id="keyA">A</button>
<button id="keyD">D</button>
<div id="wynik">Wynik</div>
 
$(function() {
    $('#keyW').on('click', function(e) {
        e.preventDefault();
        $('#wynik').html('w');
        console.log('Naciśniety klawisz w');
        console.log('zdarzenia', e);
    });
});
[HTML] pobierz, plaintext 

Uruchom konsolę i zobacz co tam się dzieje.

[programistaarek]

W wyniku pisze ze kliknąłem literę w ale postać w grze się nie porusza. Nie napisałem że zrobiłem tą grę

[viking]

No patrz. A nie pomyślałeś że bez kodu można tylko zgadywać? Nie wiem co piszesz, w jakim języku więc jak oczekujesz pomocy?

[programistaarek]

Silnik gry jest w całości napisany w js więc funkcja która odpowiada za ruch postacią musi też być raczej w tym. Wiem że jest tam warunek key[38] ze źródeł wychodzi na to że to strzalka do góry.

Wie ktoś jeszcze jak zrobić taką funkcję?

Ten post edytował programistaarek 24.08.2016, 16:13:44

[viking]

Nikt nie wie bo
- nie podałeś żadnego kodu
- twoje pytanie nie ma sensu bo nic nie wiemy o systemie ani co ma robić

[programistaarek]

http://wklej.org/id/2794521/


Jest to kod gry tej mini gry. Do niej chce dodać buttony w wersji mobilnej by działało na zasadzie klawiszy sterowania bo na komputerze mamy dostęp do klawiatury a na telefonie nie mamy jak sterowac i chce dołączyć funkcje dodatkowa żeby stworzyć cztery dodatkowe buttony Góra dół lewo i prawo. Jest ktoś w stanie to wykonać pomóc? Już przeglądałem jak pisałem wyżej wszystko w internecie i nie znalazłem nic takiego.

Moje pytanie nie ma sensu już tłumaczę. Mam w planach abym wykonał przycisk który będzie działał jako klawisz strzałki do góry,w dół oraz w prawo i w lewo. Ponieważ ta gra działa za pomocą sterowania ale na telefonach nie może funkcjonować ponieważ nie mamy klawiatury online. Jest jakaś funkcja która będzie działała tak jak chce ?

Jest ktoś w stanie to rozwiązać? Wybaczcie że podbijam ale chce to zobowiązać bo się sprzyda też wielu osobom.

[trueblue]

Najprościej:
masz tam dwa event listenery, na keyup i keydown. Podepnij do przycisków zdarzenia na mousedown i mouseup, albo touchstart i touchend, a w każdym z nich wywołaj kod podobny do tego w obsłudze klawiszy.

[programistaarek]

Czyli będzie wyglądało jak np <button touch start =""/> czy jak bo nie za bardzo wiem jak to ugryźć ;/ mógłbyś mi Ty albo ktoś napisać przykład takiego buttona ja juz wpisze to co ma być z tego kodu js ale jak to ma wyglądać w ostatecznej wersji . Bardzo chciałbym rozwiązać ten problem raz na zawsze.

Poczytałem o tych touch eventach ale nie jestem w stanie tego sam podpiąć jak to ugryźć by to działało jak chce. Fajnie ze to napisałeś bo można zrobić ze jak się trzyma to jest gaz a jak się puści to spada prędkość ale sam nie dam rady.

Podałem Wam kod do gry .js. Przeglądnąłęm więcej o tych touchstart ale nie dam rady sam tego niestety rozwiązać. Jest ktoś kto by mi mógł to rozwiązać podać gotowe rozwiązanie które będzie funkcjonować ?

[Puszy]

Wciśnięcie buttona zasymuluje wciśnięcie przycisku, do sprawdzenia bind wyświetlający w konsoli który klawisz został "wciśnięty". Do atrybutu data-key przypisujesz kod klawisza, w przykładzie poniżej ustawione są kody dużych liter.

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<style>
		button{
			height: 35px;
			width: 35px;
			cursor: pointer;
		}
		button:first-of-type{
			margin-left: 39px;
			margin-bottom: 4px;
		}
	</style>
</head>
<body>
 
<button data-key="87">W</button>
<br />
<button data-key="65">A</button>
<button data-key="83">S</button>
<button data-key="68">D</button>
 
<script>
	$(document).ready(function () {
 
		$('button').click(function () {
			var e = jQuery.Event('keypress');
			e.which = $(this).data('key');
			e.keyCode	=	$(this).data('key');
			$(this).trigger(e);
		});
 
		//	Funkcja sprawdzajaca poprawnosc
		$(document).keypress(function(e) {
			console.log('Symulacja wcisniecia klawisza o kodzie: ' + e.which);
		});
 
	});
</script>
 
</body>
</html>
[HTML] pobierz, plaintext 

Ten post edytował Puszy 29.08.2016, 15:56:41

[programistaarek]

Witaj dzięki za odzew ale przez ten kod mi zbugowało kod w grze. Kod nie ładuje się jesli klikniemy W to po ponownym starcie gry działa znów. Ale po kliknięciu działa gra ale sterowanie tymi buttonami nie działa nadal.

[Puszy]

Podeślij zrzut z konsoli od momentu odpalenia gry do wciśnięcia buttona.

[programistaarek]

Proszę na tym zdjęciu
https://zapodaj.net/0ed4af095b5f6.png.html
jest odpalona gra która nie włącza się w ogóle bez nacisiętego klawisza w funkcji którą podałeś. Więc przez tą funkcję jest puste okno gry.
Tutaj w konsoli mamy takie coś, że nadal gra nie włącza się mimo naciśniętego klawisza button 'W'
https://zapodaj.net/4ca4985c29230.png.html
ale coś w konsoli się ukazało. W ostatnim zdjęciu po ponownym załadowaniu gry wszystko się uruchamia ale gdy klikamy Button W to nie porusza się obiekt po mapie https://zapodaj.net/68f0a2403fb5e.png.html .
Mam nadzieję, że pomożesz lub ktoś inny zajrzy i też dołoży coś od siebie pomocnego.

Ten post edytował programistaarek 30.08.2016, 11:44:43

[Puszy]

Dorzuć najpierw

[HTML] pobierz, plaintext 
<script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>
[HTML] pobierz, plaintext 

Jeżeli nie pomoże to może też trzeba będzie zrzucić jQuery do wersji 2.x ale niekoniecznie.

[programistaarek]

O już trochę lepiej bo po tym jak dodałem gra się załączyła bez błędu ale nadal nie funkcjonuje sterowanie buttonami. Ustawiłem strzałki i kody klawiszom na strzałki bo w grze sterowanie działa W,A,S,D oraz strzałki. Na tym zdjeciu tak to wygląda po kliknięciu strzałki do góry https://zapodaj.net/01b0ff553dcb7.png.html .

[Puszy]

Wychodzi na to że działa (reaguje na wciśnięcie), zrezygnuj na razie ze strzałek i podstaw małe litery:

[HTML] pobierz, plaintext 
<button data-key="119">W</button>
<br />
<button data-key="97">A</button>
<button data-key="115">S</button>
<button data-key="100">D</button>
[HTML] pobierz, plaintext