Controller di gioco
- Pagina precedente Componenti di gioco
- Pagina successiva Ostacolo di gioco
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
alla fine component 构造函数中创建两个新属性，并将它们命名为 speedX e speedY。这些属性被用作速度指示器。
alla fine component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX e speedY 属性来更改组件的位置。
在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：
istanza
<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()">Su</button>
<button onclick="movedown()">Giù</button>
<button onclick="moveleft()">Sinistra</button>
<button onclick="moveright()">DESTRA</button>
Ferma il movimento
Se necessario, è possibile fermare la scatola rossa quando si rilascia il pulsante.
Aggiungere una funzione che imposta l'indicatore di velocità a 0.
Per affrontare schermi normali e schermi touch, aggiungeremo codice per entrambi questi dispositivi:
istanza
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">Su</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">Giù</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">Sinistra</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">DESTRA</button>
la tastiera come dispositivo di controllo
Possiamo anche controllare la scatola rossa con le frecce direzionali sulla tastiera.
creare un metodo per controllare se è stato premuto un pulsante e aggiungere myGameArea oggetto key impostazione delle proprietà del codice di pulsante. Quando si rilascia il pulsante, si key impostazione delle proprietà false：
istanza
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);
}
}
myGameArea.key = false;
istanza
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
così, se si preme uno dei tasti direzionali, possiamo muovere il quadrato rosso:
se (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
se (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
se (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
myGamePiece.newPos();
myGamePiece.update();
}
se (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
Premere più tasti
Cosa succede se si premono più tasti contemporaneamente?
nel esempio sopra, il componente può muoversi solo in orizzontale o verticale. Ora vogliamo che il componente possa muoversi anche diagonalmente. myGameArea crea un keys inserisce un elemento per ogni tasto premuto e assegna un valore true，il valore rimane true fino a che la tastiera non viene più premuta, il valore è nell'array keyup La funzione di ascolto degli eventi diventa false：
istanza
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;
se (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
se (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
se (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
Usa il cursore del mouse come controller
Se desideri controllare il quadrato rosso con il cursore del mouse, nel myGameArea Aggiungiamo un metodo all'oggetto per aggiornare le coordinate x e y del cursore del mouse:
istanza
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //nascondi il cursore originale
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);
}
}
Poi possiamo muovere il quadrato rosso con il cursore del mouse:
istanza
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Tocca lo schermo per controllare il gioco
Possiamo anche controllare il quadrato rosso sullo schermo tactuile.
alla fine myGameArea Aggiungiamo un metodo all'oggetto che utilizza le coordinate x e y della posizione dello schermo del tocco:
istanza
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);
}
}
Poi, quando l'utente tocca lo schermo, possiamo usare lo stesso codice del cursore del mouse per muovere il quadrato rosso:
istanza
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Controller sulla lavagna
Possiamo anche disegnare i nostri pulsanti sulla lavagna e usarli come controller:
istanza
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();
}
Aggiungi una nuova funzione per determinare se un componente (in questo caso un pulsante) è stato cliccato。
Prima di tutto, aggiungi un ascoltatore di eventi per verificare se è stato cliccato il pulsante del mouse（mousedown e mouseup）。Per affrontare gli schermi touch, è necessario aggiungere ascoltatori di eventi per verificare se lo schermo è stato cliccato（touchstart e touchend）：
istanza
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);
}
}
Ora myGameArea L'oggetto ha attributi che ci dicono le coordinate x e y del clic. Utilizziamo questi attributi per verificare se il clic è stato effettuato su uno dei nostri pulsanti blu.
Questa nuova metodo si chiama clickedè component Un metodo del costruttore che verifica se un componente è stato cliccato.
alla fine updateGameArea Nella funzione, se si clicca su uno dei pulsanti blu, eseguiremo le operazioni necessarie:
istanza
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();
}
- Pagina precedente Componenti di gioco
- Pagina successiva Ostacolo di gioco
