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ź

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

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

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

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

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.

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

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?

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ę?

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

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.

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.

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ć ?

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 

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.

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

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.

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.

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 .

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 

Dodałem co teraz napisałeś i nic nadal gra się włącza bez błędu, ale sterowanie buttonami nie działa aby wystartowała musimy kliknąć start co odpowiada w lub strzałka w górę.
https://zapodaj.net/3d339a2d05602.png.html

Już dałem ale jak coś ma pomóc to kod gry w js : http://wklej.org/id/2804044

Być może problemem jest bind przechwytujący wciśnięcie klawisza, jesteś w stanie udostępnić to online lub odnaleźć i wkleić fragment w javascript gdzie jest utworzone nasłuchiwanie na wciskanie klawiszy WASD?

Wyżej dałem Ci kod całej gry w js

Ok wszystko jasne, bind jest ustawiony na keydown nie na keypress, podmień mój skrypt na to co poniżej, na 99% zadziała ale pojazd będzie cały czas jechał, jak puścisz nie zwolni ale zacznijmy od tego:

[HTML] pobierz, plaintext 
<script>
	$(document).ready(function () {
 
		$('button').click(function () {
			var e = jQuery.Event('keydown');
			e.which = $(this).data('key');
			e.keyCode	=	$(this).data('key');
			$(this).trigger(e);
		});
 
		//	Funkcja sprawdzajaca poprawnosc
		$(document).keydown(function(e) {
			console.log('Symulacja wcisniecia klawisza o kodzie: ' + e.which);
		});
 
	});
</script>
[HTML] pobierz, plaintext 

eidt:

Przepisane na wciśnięcie i puszczenie klawisza, powinno zadziałać:

[HTML] pobierz, plaintext 
<script>
	$(document).ready(function () {
 
		$('button').mousedown(function () {
			var e = jQuery.Event('keydown');
			e.which = $(this).data('key');
			e.keyCode	=	$(this).data('key');
			$(this).trigger(e);
		});
 
		$('button').mouseup(function () {
			var e = jQuery.Event('keyup');
			e.which = $(this).data('key');
			e.keyCode	=	$(this).data('key');
			$(this).trigger(e);
		});
 
		//	Funkcja sprawdzajaca poprawnosc
		$(document).keydown(function(e) {
			console.log('Wciśnięto klawisz: ' + e.which);
		});
 
		$(document).keyup(function(e) {
			console.log('Puszczono klawisz: ' + e.which);
		});
 
	});
</script>
[HTML] pobierz, plaintext 

Key buttonów używać jak podałeś wczesniej w,a,s,d gdzie W=87 ? zaraz sprawdzę i powiem czy działa

W kodzie jest przypisanie jednak do dużych liter więc jeżeli nie działa z mały to wróć do dużych wróć do:

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext 

No niestety nadal nic nie działa jedynie w konsoli jak widać jest coś nowego https://zapodaj.net/064e6b7c77de9.png.html

użyłem tych buttonów co teraz podałeś

zamieniłem kod klawisza 'w' na strzałkę do góry i nic nie dzieje się jedynie pisze w konsoli o wciśnieciu i puszczeniu klawisza 38

Dzięki Puszy za pomoc i każdemu kto się udzielił. Rezygnuję z tego ponieważ nie jest to osiągalne przez każdą przeglądarkę np chrome nie reaguje a na IE wszystko płynnie śmiga (buttony). Wątek do zamknięcia chyba, że w przyszłości ktoś zechce odgrzebać

Witam ponownie już z gotowym rozwiązaniem
Dzięki Puszy za pomoc na PW dodaję publicznie gdyż liczę, że się może kiedyś komuś przyda

[PHP] pobierz, plaintext 
<script>
	$(document).ready(function () {
 
		$('button').mousedown(function () {
			var e = jQuery.Event('keydown');
			e.which = $(this).data('key');
			e.keyCode	=	$(this).data('key');
			$(this).trigger(e);
		});
 
		$('button').mouseup(function () {
			var e = jQuery.Event('keyup');
			e.which = $(this).data('key');
			e.keyCode	=	$(this).data('key');
			$(this).trigger(e);
		});
 
		//	Funkcja sprawdzajaca poprawnosc
		$(window).keydown(function(e) {
			console.log('Wciśnięto klawisz: ' + e.which);
		});
 
		$(document).keyup(function(e) {
			console.log('Puszczono klawisz: ' + e.which);
		});
 
	});
</script>
 
<button data-key="87" >Gaz</button>
<button data-key="65">Lewo</button>
<button data-key="68" >Prawo</button>
<button data-key="83">Hamulec</button>
[PHP] pobierz, plaintext 

Dziękuję każdemu za pomoc