Instrukcja switch i numerowanie case

Witam

Mam problem zastanawiam się czemu jak zmienię wartości przy "case" na case 1, case 2, case 3, case 4 zamiast zamiast case 37 ... to wykrywanie wciśniętych przycisków klawiatury nie działa prawidłowo. Czy case 37 jest powiązany z event.keyCode?

window.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 37:
            console.log('Lewo');
            break;

        case 38:
            console.log('Góra');
            break;

        case 39:
            console.log('Prawo');
            break;

        case 40:
            console.log('Dół');
            break;
    }
}, false);

Tak, każdy klawisz ma swój konkretny numer. A w tym kodzie sprawdzasz, który klawisz nacisnąłeś. Numery klawiszy w JS możesz sprawdzić w internecie, z tego co pamiętam to niektóre klawisze miały różne numery w zależności od przeglądarki.

Tak jest powiązany ściśle z eventCode. Kiedy wywołujesz zdarzenie keydown, składowa KeyCode symbolizuje kod wćisniętego klawisza. Jaki klawisz, jaki kod możesz sprawdzić przy pomocy tego narzędzia: http://keycode.info/

LynxBings napisał(a):

Czy case 37 jest powiązany z event.keyCode?

No jakbyś wiedział jak działa switch to byś nie pytał: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch - nie znasz podstaw składni.

M4v3n napisał(a):

Tak jest powiązany ściśle z eventCode. Kiedy wywołujesz zdarzenie keydown, składowa KeyCode symbolizuje kod wćisniętego klawisza. Jaki klawisz, jaki kod możesz sprawdzić przy pomocy tego narzędzia: http://keycode.info/

Dziękuje za odpowiedzi. A jakby chcieć teraz połaczyć przycisk np. w prawo z przesunięciem obiektu o określone piksele w prawo to jak to powiązać?

const objectSize = 100;
let objectX = 30;
let objectY = 30;

function object() {
    ctx.fillStyle = 'red';
    ctx.fillRect(objectX, objectY, objectSize, objectSize);
}

Chodzi o ten obiekt.

Ok, kod jest brzydki bardzo ale działa. Pokarze Ci na przykładzie jak to zrobić :
Najpierw robimy sobie canvasa :

<canvas width="400" height="400" id="can"></canvas> <!-- tworzymy nasz canvas -->

Później w javascript robimy coś takiego :

	var canvas = document.getElementById('can'); //odwolanie do canvas
	var c = canvas.getContext('2d');
	
	var square = { //nasz obiekt do ktorego bedziemy sie odwolywac
		x : 25,
		y : 25,
		sizeX : 25,
		sizeY : 25,
	}
	if (canvas.getContext){
		setInterval(function(){	//tu jest nasz interval ktory rysuje canvasa, co podany czas
			c.clearRect(0, 0, 400, 400);	//czyscimy obszar naszego canvas	
			c.fillRect(square.x,square.y,square.sizeX,square.sizeY); //wyswietlamy nasz kwadrat wedlug pozycji
		},33);
	}
	
	window.addEventListener('keydown', function(event) {
    switch (event.keyCode) { // a tutaj zmieniamy jego pozycje, po nacisnieciu klawisza
			case 37:
				square.y++;
				break;

			case 38:
				square.y--;
				break;

			case 39:
				square.x++;
				break;

			case 40:
				square.x--;
				break;
		}
	}, false);

OK. Dzięki a jakbym chciał by obiekt poruszał się szybciej? Próbówałem zmieniać interval ale to nic nie daje no i jeszcze zmieniałem square.x++; na square.x+2; ale jest błąd składni

Jakbyś przeczytał czego skrótem jest x++ to byś nie miał błędu w składni -> x++ === x += 1 === x = x + 1, a więc:

const canvas = document.getElementById('can')
const ctx = canvas.getContext('2d')
const speed = 5

const square = {
  x : 25,
  y : 25,
  sizeX : 25,
  sizeY : 25,
}

const step = () => {
  ctx.clearRect(0, 0, 400, 400)   
  ctx.fillRect(square.x,square.y,square.sizeX,square.sizeY)
  
  requestAnimationFrame(step)
}

window.addEventListener('keydown', ({ key }) => {
  switch (key) {
    case 'ArrowLeft':
      square.x -= speed
      break
    case 'ArrowUp':
      square.y -= speed
      break
    case 'ArrowRight':
      square.x += speed
      break
    case 'ArrowDown':
      square.y += speed
      break
  }
}, false);

step()

CodePen: https://codepen.io/caderek/pen/OxmKow?editors=0010

Zamieniłem też setInterval na bardziej odpowiedni w tym przypadku requestAnimationFrame, nieczytelne keyCode na key i przepisałem na aktualny standard JS (i w nim polecam pisać). Reszty nie tykałem.