Wczoraj zacząłem bawić się z JavaScriptem i trochę mnie wciągnęło
Zrobiłem coś takiego:
Kod
window.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37: // Left
guzik_lewo.style.backgroundColor='red';
guzik_gora.style.backgroundColor='#DDDDDD';
guzik_dol.style.backgroundColor='#DDDDDD';
guzik_prawo.style.backgroundColor='#DDDDDD';
x.value=x-=10
break;
case 38: // Up
guzik_lewo.style.backgroundColor='#DDDDDD';
guzik_gora.style.backgroundColor='red';
guzik_dol.style.backgroundColor='#DDDDDD';
guzik_prawo.style.backgroundColor='#DDDDDD';
y.value=y-=10
break;
case 39: // Right
guzik_lewo.style.backgroundColor='#DDDDDD';
guzik_gora.style.backgroundColor='#DDDDDD';
guzik_dol.style.backgroundColor='#DDDDDD';
guzik_prawo.style.backgroundColor='red';
x.value=x+=10
break;
case 40: // Down
guzik_lewo.style.backgroundColor='#DDDDDD';
guzik_gora.style.backgroundColor='#DDDDDD';
guzik_dol.style.backgroundColor='red';
guzik_prawo.style.backgroundColor='#DDDDDD';
y.value=y+=10
break;
}
}, false);
var guzik_lewo = document.getElementById('Lewo')
var guzik_prawo = document.getElementById('Prawo')
var guzik_gora = document.getElementById('Gora')
var guzik_dol = document.getElementById('Dol')
var x =0;
var y = 0;
function rysuj () {
var canvas = document.getElementById('canvas');
var canvas = canvas.getContext('2d');
canvas.clearRect(0,0,500,500);
var pionek = new Image();
pionek.src = "player.gif"
pionek.onload = function () { canvas.drawImage(pionek, x, y); };
}
var play = setInterval('rysuj()',30);
switch (event.keyCode) {
case 37: // Left
guzik_lewo.style.backgroundColor='red';
guzik_gora.style.backgroundColor='#DDDDDD';
guzik_dol.style.backgroundColor='#DDDDDD';
guzik_prawo.style.backgroundColor='#DDDDDD';
x.value=x-=10
break;
case 38: // Up
guzik_lewo.style.backgroundColor='#DDDDDD';
guzik_gora.style.backgroundColor='red';
guzik_dol.style.backgroundColor='#DDDDDD';
guzik_prawo.style.backgroundColor='#DDDDDD';
y.value=y-=10
break;
case 39: // Right
guzik_lewo.style.backgroundColor='#DDDDDD';
guzik_gora.style.backgroundColor='#DDDDDD';
guzik_dol.style.backgroundColor='#DDDDDD';
guzik_prawo.style.backgroundColor='red';
x.value=x+=10
break;
case 40: // Down
guzik_lewo.style.backgroundColor='#DDDDDD';
guzik_gora.style.backgroundColor='#DDDDDD';
guzik_dol.style.backgroundColor='red';
guzik_prawo.style.backgroundColor='#DDDDDD';
y.value=y+=10
break;
}
}, false);
var guzik_lewo = document.getElementById('Lewo')
var guzik_prawo = document.getElementById('Prawo')
var guzik_gora = document.getElementById('Gora')
var guzik_dol = document.getElementById('Dol')
var x =0;
var y = 0;
function rysuj () {
var canvas = document.getElementById('canvas');
var canvas = canvas.getContext('2d');
canvas.clearRect(0,0,500,500);
var pionek = new Image();
pionek.src = "player.gif"
pionek.onload = function () { canvas.drawImage(pionek, x, y); };
}
var play = setInterval('rysuj()',30);
Skrypt odczytuje czy została wciśnięta jakaś strzałka, jeśli tak to przemieszcza obrazek w odpowiednim kierunku.
Obsługę klawiszy zerżnąłem z innej stronki (nie mogłem sobie z tym poradzić sam)
Ale reszta jest moja.Co o tym sądzicie, co mam źle, czego nie powinienem robić?
Pozdrawiam.