"Snake" w JavaScript - prośba o ocenę

pytanie zadane 24 września 2016 w Nasze projekty przez zmiennoimienny Mądrala (5,540 p.)

Witam
Jestem początkujący jeżeli chodzi o technologie webowe i pomyślałem że w wolnej chwili napiszę klasycznego "Węża" przy wykorzystaniu HTML, CSS oraz JavaScript.
Link do pracy:
https://zmienny.github.io/Rainbow-Snake/

Prosiłbym o ocenę kodu, co można poprawić, co zrobić lepiej.
Pozdrawiam

2 odpowiedzi

odpowiedź 24 września 2016 przez niezalogowany

randomColor()
{
	var v = Math.floor((Math.random() * 16) + 1);
	switch(v)
	{
		case 1:
		return "00";
		break;

		case 2:
		return "11";
		break;

		case 3:
		return "22";
		break;

		case 4:
		return "33";
		break;

		case 5:
		return "44";
		break;

		case 6:
		return "55";
		break;

		case 7:
		return "66";
		break;

		case 8:
		return "77";
		break;

		case 9:
		return "88";
		break;

		case 10:
		return "99";
		break;

		case 11:
		return "AA";
		break;

		case 12:
		return "BB";
		break;

		case 13:
		return "CC";
		break;

		case 14:
		return "DD";
		break;

		case 15:
		return "EE";
		break;

		case 16:
		return "FF";
		break;
	}
}

DRY w każdej formie, jeśli tylko można

randomColor()
{
	return Math.floor(Math.random() * 16).toString(16).toUpperCase().repeat(2);
}

komentarz 24 września 2016 przez ScriptyChris Mędrzec (190,190 p.)

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

Tego nie znałem. Chyba, któregoś dnia trzeba będzie przejrzeć wszystkie metody dostępne w JSie :)

1	komentarz 24 września 2016 przez niezalogowany Dnia braknie : )

1	komentarz 24 września 2016 przez Magicone Nałogowiec (45,100 p.) Kod wygląda na ES5, String.prototype.repeat to standard obowiązujący od ES6 (póki co) w górę. :P

komentarz 24 września 2016 przez niezalogowany

szczególnie używanie class wygląda na ES5 : p

komentarz 24 września 2016 przez Magicone Nałogowiec (45,100 p.)

no to wyłącznie klasy zaciąga z 6

1	komentarz 24 września 2016 przez niezalogowany Zatem jeśli już autor pisze cokolwiek z ES6 - podpowiadam z ES6 ( tym bardziej, że składnia dodawania metod do obiektów się różni ) ES5 randomColor() { return Array(3).join(Math.floor((Math.random() * 16)).toString(16).toUpperCase()); }

odpowiedź 24 września 2016 przez ScriptyChris Mędrzec (190,190 p.)

Po pierwszej partyjce:

Na pewno zablokować domyślną akcję strzałek na klawiaturze - aby nie scrollowały strony.
Zamiast alert / confirm dałbym jakieś okna typu popup.

Co do kodu: zamknąć kod w IIFE albo bloku, aby nie było nic w global scope.

komentarz 24 września 2016 przez zmiennoimienny Mądrala (5,540 p.)

Dlaczego nie ma być nic w global scope?

komentarz 24 września 2016 przez ScriptyChris Mędrzec (190,190 p.)

Ponieważ trzymanie tam zmiennych i funkcji daje Ci mniejszą kontrolę nad nimi, co może prowadzić do zmiany ich wartości przez inne funkcje lub przypisania do nich innych wartości.

Weź pod uwagę, że każdy skrypt JavaScript na danej stronie HTML korzysta z jednego obiektu window - jego zawartość zaś jest, w czystym (klienckim) JSie, traktowana m.in. jako "pojemnik" na zmienne globalne. Załóżmy, że masz kilka skryptów i każdy po kilkaset linii kodu. Jest duża szansa, że w którymś skrypcie, w którejś linijce kodu zapomnisz się i nadpiszesz zmienną globalną, przez co inna funkcja (nawet w tym samym lub innym skrypcie) może się wywalić (spowodować błąd).

Poza tym, odwołanie się do zmiennej globalnej (jeśli jesteś gdzieś w głęboko zagnieżdżonej funkcji, bądź strukturze kodu) jest wolniejsze, niż gdy odwołasz się do zmiennej lokalnej.

Do poczytania:

https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals

http://tutorials.comandeer.pl/js-beauty.html#namespaces