Împingeți butoanele pentru a muta pătrat roșu:
Intră în control
Acum vrem să controleze pătrat roșu.
Adăugați patru butoane, în sus, în jos, la stânga și la dreapta.
Scrieți o funcție pentru fiecare buton pentru a muta componenta în direcția selectată.
Asigurați - două noi proprietăți în component constructor, și le numim speedX și speedY . Aceste proprietăți sunt utilizate ca indicatori de viteză.
Adăugați o funcție în component constructorului, numit newPos() , care utilizează speedX și speedY proprietățile pentru a schimba poziția componentei.
Funcția et NewPos este numit de funcția updateGameArea înainte de desen componenta:
Exemplu
<script>
function component(width, height,
color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx. fillRect(this.x, this.y, this.width, this.height) ;
}
this.newPos = function() {
this.x += this.speedX;
this.y
+= this.speedY;
}
}
function updateGameArea() {
myGameArea. clear() ;
myGamePiece. newPos() ;
myGamePiece. update() ;
}
function moveup() {
myGamePiece.speedY -= 1;
}
function movedown() {
myGamePiece.speedY += 1;
}
function moveleft() {
myGamePiece.speedX -= 1;
}
function moveright() {
myGamePiece.speedX += 1;
}
</script>
<button
onclick=" moveup() ">UP</button>
<button
onclick=" movedown() ">DOWN</button>
<button
onclick=" moveleft() ">LEFT</button>
<button
onclick=" moveright() ">RIGHT</button> Încearcă - l singur » Nu te mai mișca
Dacă doriți, puteți face stația de pătrat roșu, atunci când eliberați un buton.
Adăugați o funcție care va stabili indicatorii de viteză la 0.
Pentru a face față cu ambele ecrane normale și ecrane tactile, vom adăuga codul pentru ambele dispozitive:
Exemplu
function
stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button
omousedown=" moveup() " onmouseup=" stopMove() "
ontouchstart=" moveup() ">UP</button>
<button
omousedown=" movedown() " onmouseup=" stopMove() "
ontouchstart=" movedown() " >DOWN</button>
<button
omousedown=" moveleft() " onmouseup=" stopMove() "
ontouchstart=" moveleft() " >LEFT</button>
<button
omousedown=" moveright() " onmouseup=" stopMove() "
ontouchstart=" moveright() " >RIGHT</button>
Încearcă - l singur » Tastatură ca Controler
Putem controla, de asemenea pătrat roșu folosind tastele săgeată de pe tastatură.
Creați o metodă care verifică dacă este apăsată o tastă, și setați - key proprietatea myGameArea obiectului la codul cheie. Atunci când cheia este eliberată, setați key proprietatea false :
Exemplu
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}Apoi, ne putem muta pătrat roșu în cazul în care una dintre tastele cu săgeți sunt apăsate:
Exemplu
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY =
0;
if (myGameArea.key && myGameArea.key == 37)
{myGamePiece.speedX = -1; }
if (myGameArea.key &&
myGameArea.key == 39) {myGamePiece.speedX = 1; }
if
(myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
} Încearcă - l singur » Taste multiple Apăsat
Ce se întâmplă dacă mai mult de o tastă este apăsată în același timp?
In exemplul de mai sus, componenta se poate deplasa numai orizontal sau vertical. Acum vrem componenta să se miște, de asemenea, pe diagonală.
Crearea unei keys de matrice pentru myGameArea obiect, și se introduce un element pentru fiecare tastă este apăsată, și îi dă valoarea true , valoarea rămâne adevărată pana cheia nu mai este apăsat, valoarea devine false în funcția keyup eveniment ascultător:
Exemplu
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY =
0;
if ( myGameArea.keys && myGameArea.keys[37] )
{myGamePiece.speedX = -1; }
if ( myGameArea.keys &&
myGameArea.keys[39] ) {myGamePiece.speedX = 1; }
if
( myGameArea.keys && myGameArea.keys[38] ) {myGamePiece.speedY = -1; }
if ( myGameArea.keys && myGameArea.keys[40] ) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
} Încearcă - l singur » Utilizarea Mouse Cursor ca un controler
Dacă doriți să controlați pătrat roșu folosind cursorul mouse - ului, adăugați o metodă în myGameArea obiect care actualizează coordonatele x și y ale cursorului mouse - ului :.
Exemplu
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //hide the original cursor
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousemove', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
},
clear :
function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}Apoi, putem muta pătrat roșu folosind cursorul mouse-ului:
Exemplu
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
} Încearcă - l singur » Atingeți ecranul pentru a controla jocul
Putem controla, de asemenea pătrat roșu pe un ecran tactil.
Adăugați o metodă în myGameArea obiect care utilizează coordonatele x și y ale în cazul în care este atins ecranul:
Exemplu
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('touchmove', function (e) {
myGameArea.x = e.touches[0].screenX;
myGameArea.y = e.touches[0].screenY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
Apoi, ne putem muta pătrat roșu în cazul în care utilizatorul atinge ecranul, folosind același cod așa cum am făcut-o pentru cursorul mouse-ului:
Exemplu
function updateGameArea() {
myGameArea.clear();
if (myGameArea.touchX && myGameArea.touchY) {
myGamePiece.x = myGameArea.x;
myGamePiece.y =
myGameArea.y;
}
myGamePiece.update();
}
Încearcă - l singur » Controlerele pe pânză
Putem trage, de asemenea, propriile noastre butoane pe pânză, și să le utilizeze ca controlere:
Exemplu
function startGame() {
myGamePiece = new component(30, 30, "red" , 10,
120);
myUpBtn = new component(30, 30,
"blue" , 50, 10);
myDownBtn = new
component(30, 30, "blue" , 50, 70);
myLeftBtn = new component(30, 30, "blue" , 20,
40);
myRightBtn = new component(30, 30,
"blue" , 80, 40);
myGameArea.start();
}Adăugați o nouă funcție care cifrele în cazul în care o componentă, în acest caz, un buton, se face clic.
Începeți prin adăugarea de ascultatori eveniment pentru a verifica dacă un buton al mouse - ului este apăsat ( mousedown and mouseup ) . Pentru a face față cu ecrane tactile, adăugați , de asemenea , ascultătorii eveniment pentru a verifica dacă ecranul se face clic pe ( touchstart and touchend ) :
Exemplu
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousedown', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('mouseup', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
window.addEventListener('touchstart', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('touchend', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
} Acum myGameArea obiect are proprietăți care ne spune coordonatele x și y ale unui clic. Noi folosim proprietăți pentru a verifica aceste pe care, dacă faceți clic a fost efectuat pe unul dintre butoanele noastre albastre.
Noua metodă se numește a clicked , aceasta este o metodă de component constructor, și verifică dacă componenta se face clic.
În updateGameArea funcția, vom lua măsurile neccessarry în cazul în care se face clic pe unul dintre butoanele albastre:
Exemplu
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.clicked = function() {
var myleft = this.x;
var
myright = this.x + (this.width);
var mytop = this.y;
var
mybottom = this.y + (this.height);
var clicked = true;
if
((mybottom < myGameArea.y) || (mytop > myGameArea.y)
|| (myright < myGameArea.x) || (myleft > myGameArea.x)) {
clicked = false;
}
return clicked;
}
}
function
updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
if (myUpBtn.clicked()) {
myGamePiece.y -= 1;
}
if (myDownBtn.clicked()) {
myGamePiece.y += 1;
}
if (myLeftBtn.clicked()) {
myGamePiece.x += -1;
}
if (myRightBtn.clicked()) {
myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
} Încearcă - l singur »