Spel kontroller
- Föregående sida Spel komponent
- Nästa sida Spel hinder
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
i component 构造函数中创建两个新属性，并将它们命名为 speedX och speedY。这些属性被用作速度指示器。
i component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX och speedY 属性来更改组件的位置。
在绘制组件之前，从 uppdateraSpelområde 函数调用 newPos 函数：
exempel
<script>
function komponent(bredd, höjd, färg, x, y) {
this.bredd = bredd;
this.höjd = höjd;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.uppdatera = function() {
ctx = myGameArea.context;
ctx.fyllFärg = färg;
ctx.fyllRektangel(this.x, this.y, this.bredd, this.höjd);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function uppdateraSpelområde() {
myGameArea.töm();
minSpelbit.newPos();
myGamePiece.update();
}
function moveup() {}}
minSpelbit hastighetY -= 1;
}
function movedown() {
minSpelbit hastighetY += 1;
}
function moveleft() {
minSpelbit hastighetX -= 1;
}
function moveright() {
minSpelbit hastighetX += 1;
}
</script>
<button onclick="moveup()">UPP</button>
<button onclick="movedown()">NER</button>
<button onclick="moveleft()">VÄNSTER</button>
<button onclick="moveright()">VÄNSTER</button>
Stoppa rörelse
Om nödvändigt kan du stoppa den röda kuben när du släpper knappen.
Lägg till en funktion som sätter hastighetsindikatorn till 0.
För att hantera både vanliga skärmar och pekskärmar, kommer vi att lägga till kod för båda typerna av enheter:
exempel
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UPP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">NER</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">VÄNSTER</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">VÄNSTER</button>
tangentbordet som kontroll
vi kan också använda piltangenterna på tangentbordet för att styra den röda kuben.
att skapa en metod för att kontrollera om en tangent trycks ner och att myGameArea objektets knapp egenskapen sätts till nyckelkoden. När en tangent släpps, kommer knapp egenskapen sätts till false：
exempel
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) {
min spelområde.knapp = e.knappscod;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
Så, om en av piltangenterna trycks, kan vi flytta den röda blocket:
exempel
function uppdateraSpelområde() {
myGameArea.töm();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
om (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
om (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
om (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
om (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
minSpelbit.newPos();
myGamePiece.update();
}
När flera tangenter trycks
Vad händer om flera tangenter trycks samtidigt?
I det aktuella exemplet kan komponenten bara röra sig horisontellt eller vertikalt. Nu vill vi att komponenten också kan röra sig diagonalt.
för myGameArea objekt skapar en keys arrayt, och lägger till en element för varje tryckt knapp och sätter värdet till true，värdet hålls true tills knappen inte längre trycks, värdet i keyup Evenemangslistningsfunktionen blir false：
exempel
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 uppdateraSpelområde() {
myGameArea.töm();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
om (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
om (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
om (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (minSpeletområde.keys && minSpeletområde.keys[40]) {minSpelbit.speedY = 1; }
minSpelbit.newPos();
myGamePiece.update();
}
Använd muspekaren som kontroll
Om du vill använda muspekaren för att styra den röda rutan, i myGameArea Lägg till en metod i objektet för att uppdatera muspekarens x- och y-koordinater:
exempel
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //göm den ursprungliga pekaren
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);
}
}
Då kan vi använda muspekaren för att flytta den röda rutan:
exempel
function uppdateraSpelområde() {
myGameArea.töm();
om (myGameArea.x && myGameArea.y) {
minSpelbit.x = minSpeletområde.x;
minSpelbit.y = minSpeletområde.y;
}
myGamePiece.update();
}
Berör skärmen för att styra spelet
Vi kan också styra den röda rutan på en pekskärm.
i myGameArea Lägg till en metod i objektet som använder skärmens berörningspositionens x- och y-koordinater:
exempel
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) {
minSpeletområde.x = e.touches[0].screenX;
minSpeletområde.y = e.touches[0].screenY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
Då kan vi använda samma kod som för muspekaren för att flytta den röda rutan när användaren berör skärmen:
exempel
function uppdateraSpelområde() {
myGameArea.töm();
om (myGameArea.x && myGameArea.y) {
minSpelbit.x = minSpeletområde.x;
minSpelbit.y = minSpeletområde.y;
}
myGamePiece.update();
}
Kontroller på canvas
Vi kan också rita egna knappar på canvas och använda dem som kontroller:
exempel
function startGame() {
minSpelbit = new komponent(30, 30, "röd", 10, 120);
minUppKnapp = new komponent(30, 30, "blå", 50, 10);
minNedKnapp = new komponent(30, 30, "blå", 50, 70);
minVänsterKnapp = new komponent(30, 30, "blå", 20, 40);
minVänsterKnapp = new komponent(30, 30, "blå", 80, 40);
minSpeletområde.start();
}
Lägg till en ny funktion för att avgöra om en komponent (i detta fall en knapp) har klickats.
Först lägg till eventlyssnare för att kontrollera om en musknapp har klickats（mousedown och mouseup）。För att hantera pekskärmar behöver du lägga till eventlyssnare för att kontrollera om skärmen har klickats（touchstart och touchend）：
exempel
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);
}
}
Nu myGameArea Objektet har egenskaper som kan informera oss om klickade x och y-koordinater. Vi använder dessa egenskaper för att kontrollera om ett klick har utförts på en av våra blå knappar.
Denna nya metod kallas clickeddet är component En metod för konstruktorn som kontrollerar om komponenten har klickats.
i uppdateraSpelområde i funktionen, om en av de blå knapparna klickas, kommer vi att utföra nödvändiga åtgärder:
exempel
function komponent(bredd, höjd, färg, x, y) {
this.bredd = bredd;
this.höjd = höjd;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.uppdatera = function() {
ctx = myGameArea.context;
ctx.fyllFärg = färg;
ctx.fyllRektangel(this.x, this.y, this.bredd, this.höjd);
}
this.klickad = function() {
var vänster = this.x;
var höger = this.x + (this.bredd);
var topp = this.y;
var botten = this.y + (this.höjd);
var klickad = true;
om ((botten < myGameArea.y) || (topp > myGameArea.y) || (höger < myGameArea.x) || (vänster > myGameArea.x)) {
klickad = false;
}
return klickad;
}
}
function uppdateraSpelområde() {
myGameArea.töm();
om (myGameArea.x && myGameArea.y) {
om (myUpBtn.klickad()) {
myGamePiece.y -= 1;
}
om (myDownBtn.klickad()) {
myGamePiece.y += 1;
}
om (myLeftBtn.klickad()) {
myGamePiece.x += -1;
}
om (myRightBtn.klickad()) {
myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
}
- Föregående sida Spel komponent
- Nästa sida Spel hinder
