Spelbeheerders
Druk die knoppies om die rooi vierkant te skuif:
Kry in beheer
Nou wil ons die rooi vierkant beheer.
Voeg vier knoppies by, op, af, links en regs.
Skryf 'n funksie vir elke knoppie om die komponent in die geselekteerde rigting te beweeg.
Maak twee nuwe eienskappe in die componentkonstruktor, en noem hulle
speedX
en speedY. Hierdie eienskappe word as spoedaanwysers gebruik.
Voeg 'n funksie in die componentkonstruktor by, genaamd
newPos(), wat die speedXen speedY
eienskappe gebruik om die komponent se posisie te verander.
Die newpos-funksie word vanaf die updateGameArea-funksie geroep voordat die komponent geteken word:
Voorbeeld
<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>
Hou op Beweeg
As jy wil, kan jy die rooi vierkant laat stop wanneer jy 'n knoppie los.
Voeg 'n funksie by wat die spoedaanwysers op 0 sal stel.
Om beide normale skerms en raakskerms te hanteer, sal ons kode vir beide toestelle byvoeg:
Voorbeeld
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>
Sleutelbord as kontroleerder
Ons kan ook die rooi vierkant beheer deur die pyltjie sleutels op die sleutelbord te gebruik.
Skep 'n metode wat kontroleer of 'n sleutel gedruk word, en stel die key
eienskap van die myGameAreavoorwerp op die sleutelkode. Wanneer die sleutel vrygestel word, stel die keyeiendom op false:
Voorbeeld
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);
}
}
Dan kan ons die rooi vierkant skuif as een van die pyltjie sleutels gedruk word:
Voorbeeld
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();
}
Veelvuldige sleutels gedruk
Wat as meer as een sleutel op dieselfde tyd gedruk word?
In die voorbeeld hierbo kan die komponent slegs horisontaal of vertikaal beweeg. Nou wil ons hê die komponent moet ook diagonaal beweeg.
Skep 'n
keys skikking vir die myGameAreavoorwerp, en voeg een element in vir elke sleutel wat gedruk word, en gee dit die waarde true, die waarde bly waar totdat die sleutel nie meer gedruk word nie, die waarde word
falsein die keyup gebeurtenis luisteraar funksie:
Voorbeeld
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();
}
Gebruik die muiswyser as 'n kontroleerder
As jy die rooi vierkant wil beheer deur die muiswyser te gebruik, voeg 'n metode in myGameAreaobjek by wat die x- en y-koördinate van die muiswyser bywerk:.
Voorbeeld
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);
}
}
Dan kan ons die rooi vierkant beweeg deur die muiswyser te gebruik:
Voorbeeld
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Raak die skerm om die spel te beheer
Ons kan ook die rooi vierkant op 'n raakskerm beheer.
Voeg 'n metode in die myGameAreavoorwerp by wat die x- en y-koördinate gebruik van waar die skerm aangeraak word:
Voorbeeld
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);
}
}
Dan kan ons die rooi vierkant skuif as die gebruiker die skerm raak, deur dieselfde kode te gebruik as wat ons vir die muiswyser gedoen het:
Voorbeeld
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Beheerders op The Canvas
Ons kan ook ons eie knoppies op die doek teken en dit as beheerders gebruik:
Voorbeeld
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();
}
Voeg 'n nuwe funksie by wat uitvind of 'n komponent, in hierdie geval 'n knoppie, geklik word.
Begin deur gebeurtenisluisteraars by te voeg om te kyk of 'n muisknoppie geklik is ( mousedownen mouseup). Om raakskerms te hanteer, voeg ook gebeurtenisluisteraars by om te kyk of die skerm op ( touchstarten touchend) geklik is:
Voorbeeld
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);
}
}
Nou myGameAreahet die voorwerp eienskappe wat vir ons die x- en y-koördinate van 'n klik vertel. Ons gebruik hierdie eienskappe om te kyk of die klik op een van ons blou knoppies uitgevoer is.
Die nuwe metode word genoem clicked, dit is 'n metode van die
componentkonstruktor, en dit kyk of die komponent geklik word.
In die updateGameAreafunksie neem ons die nodige aksies as een van die blou knoppies geklik word:
Voorbeeld
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();
}