Herní ovladače
Stisknutím tlačítek přesunete červený čtverec:
Získejte kontrolu
Nyní chceme ovládat červený čtverec.
Přidejte čtyři tlačítka, nahoru, dolů, doleva a doprava.
Napište funkci pro každé tlačítko pro pohyb komponenty ve zvoleném směru.
Vytvořte dvě nové vlastnosti v componentkonstruktoru a zavolejte je
speedX
a speedY. Tyto vlastnosti se používají jako indikátory rychlosti.
Přidejte do componentkonstruktoru funkci nazvanou
newPos(), která používá vlastnosti speedXa speedY
ke změně pozice komponenty.
Funkce newpos je volána z funkce updateGameArea před nakreslením komponenty:
Příklad
<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>
Přestaňte se pohybovat
Pokud chcete, můžete červený čtverec zastavit, když uvolníte tlačítko.
Přidejte funkci, která nastaví ukazatele rychlosti na 0.
Abychom se vypořádali s normálními obrazovkami i dotykovými obrazovkami, přidáme kód pro obě zařízení:
Příklad
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>
Klávesnice jako ovladač
Červený čtverec můžeme ovládat také pomocí kláves se šipkami na klávesnici.
Vytvořte metodu, která kontroluje, zda je stisknuta klávesa, a nastavte key
vlastnost myGameAreaobjektu na kód klávesy. Po uvolnění klíče nastavte keyvlastnost na false:
Příklad
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);
}
}
Poté můžeme posunout červený čtverec, pokud stiskneme jednu z kláves se šipkami:
Příklad
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();
}
Stisknuto více kláves
Co když je stisknuto více kláves současně?
Ve výše uvedeném příkladu se komponenta může pohybovat pouze vodorovně nebo svisle. Nyní chceme, aby se komponenta také pohybovala diagonálně.
Vytvořte
keys pole pro myGameAreaobjekt a vložte jeden prvek pro každou stisknutou klávesu a přiřaďte mu hodnotu true, hodnota zůstane pravdivá, dokud se klávesa nestiskne, hodnota se stane
falsefunkcí posluchače události keyup :
Příklad
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();
}
Použití kurzoru myši jako ovladače
Pokud chcete ovládat červený čtverec pomocí kurzoru myši, přidejte do myGameAreaobjektu metodu, která aktualizuje souřadnice x a y kurzoru myši:.
Příklad
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);
}
}
Poté můžeme přesunout červený čtverec pomocí kurzoru myši:
Příklad
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Dotkněte se obrazovky a ovládejte hru
Červený čtverec můžeme ovládat i na dotykové obrazovce.
Přidejte do myGameAreaobjektu metodu, která používá souřadnice x a y místa dotyku obrazovky:
Příklad
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);
}
}
Poté můžeme červeným čtvercem posunout, pokud se uživatel dotkne obrazovky, pomocí stejného kódu, jako jsme to udělali pro kurzor myši:
Příklad
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Ovladače na plátně
Můžeme také kreslit vlastní tlačítka na plátno a používat je jako ovladače:
Příklad
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();
}
Přidejte novou funkci, která zjistí, zda bylo klepnuto na komponentu, v tomto případě na tlačítko.
Začněte přidáním posluchačů událostí a zkontrolujte, zda bylo kliknuto na tlačítko myši ( mousedowna mouseup). Chcete-li se vypořádat s dotykovými obrazovkami, přidejte také posluchače událostí, abyste zkontrolovali, zda se na obrazovku kliklo ( touchstarta touchend):
Příklad
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);
}
}
Nyní má myGameAreaobjekt vlastnosti, které nám sdělují souřadnice x a y kliknutí. Tyto vlastnosti používáme ke kontrole, zda bylo kliknutí provedeno na některé z našich modrých tlačítek.
Nová metoda se nazývá clicked, je to metoda
componentkonstruktoru a kontroluje, zda se na komponentu klikalo.
Ve updateGameAreafunkci provedeme potřebné akce, pokud kliknete na jedno z modrých tlačítek:
Příklad
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();
}