Kifungu cha Kikimbia cha Kigame
- Pya ya Kwanza Komponenti za Kigame
- Pya ya Kifo Kikombe cha Kigame
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
hapa hivi component 构造函数中创建两个新属性，并将它们命名为 speedX na speedY。这些属性被用作速度指示器。
hapa hivi component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX na speedY 属性来更改组件的位置。
在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：
mwigiza
<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>
停止移动
如果需要，您可以在释放按钮时使红色方块停止。
添加一个将速度指示器设置为 0 的函数。
Kwa kumtaka kumtumika kwa mifungo wa kina na mifungo wa kichwa cha namba, tukifungua kwa mifungo wa kina na mifungo wa kichwa cha namba:
mwigiza
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>
kiburi cha kichwa cha namba kama kikontrolla
tunaweza kumwambia kichwa cha kiburi cha mifungo wa kiburi cha juu kumwambia mifungo wa kichwa cha namba. Kama kichwa cha kiburi cha mifungo wa kiburi cha juu kinapendekeza kumwambia mifungo wa kichwa cha namba.
tengeneza mtuaguzi wa kufikiria kama kichwa cha namba kinapendekeza, na kumwambia myGameArea muundo wa key kinaadiliwa kwa kichwa cha namba. Kama kifungu kilitokana, tukifungua key kinaadiliwa kwa false：
mwigiza
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);
}
}
这样，如果按下方向键之一，我们就可以移动红色方块：
mwigiza
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();
}
按下多个键
如果同时按下多个键怎么办？
在上面的例子中，组件只能水平或垂直移动。现在我们希望组件也可以沿对角线移动。
为 myGameArea 对象创建一个 keys 数组，并为每个按下的键插入一个元素，并为其赋值 true，该值保持 true ，直到不再按下该键，该值在 keyup 事件监听函数中变为 false：
mwigiza
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();
}
kutumia kina-mguu wa kina-marejeo kama kifaa cha kusimamia
kama unavyofikia kusimamia kwa kina-mguu kwenye msingi wa kichaka kichari, tunaweza kutumia: myGameArea kigeukia kikaa kwenye kipimo cha kina-mguu na kipimo cha kina-marejeo cha mawasiliano:
mwigiza
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);
}
}
kisha tunaweza kutumia kina-mguu wa kina-marejeo kuongeza kwenye msingi wa kichaka kichari:
mwigiza
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
sekana ekranini kuwa na uwanja wa kusimamia kwa kifunzi
wengeneza mabidii ya picha ya kina-mguu kwenye mabidii ya picha ya kina-marejeo
hapa hivi myGameArea kigeukia kikaa kwenye kipimo cha kina-mguu na kipimo cha kina-marejeo cha mawasiliano:
mwigiza
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);
}
}
kisha, kama mtu anatoka kwa kumsekana ekranini, tunaweza kutumia kipindi cha kina-maagizo kama kina-mguu wa kina-marejeo kuongeza kwenye msingi wa kichaka kichari:
mwigiza
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
mabidii ya kusimamia kwenye mabidii ya picha
wengeneza mabepu yani ya mawasiliano kwenye mabidii ya picha, ikilinganisha kama kifaa cha kusimamia:
mwigiza
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();
}
Ongeza funguza mpya inayotakaiza kwa kumtaka inayofikiria kama komponi (kama kina hiki ina nafasi ya kibatili) inasemekana kwa kufikiria kiagizo。
Kwanza ingia kwa uwanja wa mawasiliano kwa kumtaka kufikiria kama mibatili inayotumika (mousedown na mouseup）。Kuwa na mawasiliano ya mifungo ya simu ya taa, inahitajika kuingia kwa uwanja wa mawasiliano kwa kumtaka kufikiria kama ekran inasemekana kwa kufikiria kiagizo (touchstart na touchend）：
mwigiza
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);
}
}
Sasa myGameArea kampuni ina vipimo inayotukia ukurasa wa x na y kwa kumtaarifu kuwa inasemekana kwa kufikiria kiagizo kwenye moja ya mibatili yake ya kijani.
Hii mtu wa kina mpya huitwa clicked, inayikuwa component Funguza yenye, inayotakaiza inayoshukusha komponi.
hapa hivi updateGameArea Katika mwigiza kama bili la mawili bila kina, tumezifanya hatua zilizohitaji:
mwigiza
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();
}
- Pya ya Kwanza Komponenti za Kigame
- Pya ya Kifo Kikombe cha Kigame
