kırmızı kare taşımak için Butonlar:
Kontrol alın
Şimdi kırmızı kare kontrol etmek istiyorum.
Dört düğme, yukarı, aşağı, sola ve sağa ekleyin.
seçilen yönde hareket ettirmeye her düğme için bir fonksiyon yazın.
Iki yeni özelliklerini olun component yapıcı ve onlara çağrı speedX ve speedY . Bu özellikler hız göstergesi olarak kullanılmaktadır.
Bir işlev ekle component olarak adlandırılan yapıcı, newPos() kullanır, speedX ve speedY bileşenin konumunu değiştirmek için özelliklerini.
newpos işlev bileşenini çekmeden önce updateGameArea fonksiyonu adlandırılır:
Örnek
<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> Kendin dene " Hareket etmeyi kes
İsterseniz siz bir düğmeye bıraktığınızda, kırmızı kare durağı yapabilirsiniz.
0 olarak hız göstergelerini ayarlayacaktır bir işlev ekleyin.
Normal ekranlar ve dokunmatik ekranlar hem başa çıkmak için, her iki cihazlar için kod katacak:
Örnek
function
stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button
omousedown=" moveup() " onmouseup=" stopMove() "
ontouchstart=" moveup() ">UP</button>
<button
omousedown=" movedown() " onmouseup=" stopMove() "
ontouchstart=" movedown() " >DOWN</button>
<button
omousedown=" moveleft() " onmouseup=" stopMove() "
ontouchstart=" moveleft() " >LEFT</button>
<button
omousedown=" moveright() " onmouseup=" stopMove() "
ontouchstart=" moveright() " >RIGHT</button>
Kendin dene " Kontrolör olarak Klavye
Ayrıca klavyede ok tuşlarını kullanarak kırmızı kareyi kontrol edebilirsiniz.
Bir tuşa basıldığında ise denetleyen yöntem oluşturmak ve bu set key özelliği myGameArea anahtar koduna nesne. Anahtar serbest bırakıldığında, set key özelliğini false :
Örnek
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);
}
}ok tuşlarından birine basıldığında eğer Sonra kırmızı kare taşıyabilirsiniz:
Örnek
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();
} Kendin dene " Birden Tuşlar Preslenmiş
Birden fazla anahtar aynı anda basılırsa ne olur?
Yukarıdaki örnekte, bileşen sadece yatay veya dikey olarak hareket edebilir. Şimdi bileşen de çapraz taşımak istiyorum.
Bir oluşturma keys için dizi myGameArea nesnesi ve her basıldığında anahtar için bir eleman yerleştirin ve değer vermek true anahtarı artık basıldığında e kadar, değer değeri olur, doğru kalır false keyUp olay dinleyicisi işlevinde:
Örnek
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();
} Kendin dene " Bir kontrolör olarak fare imleci kullanarak
Fare imleci kullanarak kırmızı kare kontrol etmek istiyorsanız, bir yöntemi eklemek myGameArea x ve fare imleci y koordinatlarını günceller nesne :.
Örnek
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);
}
}Sonra fare imlecini kullanarak kırmızı kare taşıyabilirsiniz:
Örnek
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
} Kendin dene " Oyun Kontrol Dokunmatik Ekran
Ayrıca dokunmatik ekran üzerinde kırmızı kare kontrol edebilirsiniz.
Bir yöntem ekleme myGameArea x ve ekran dokunulduğunda burada y koordinatlarını kullanarak nesnenin:
Örnek
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);
}
}
Kullanıcı biz fare imleci için yaptığı gibi aynı kodu kullanarak, ekrana dokunursa Sonra kırmızı kare taşıyabilirsiniz:
Örnek
function updateGameArea() {
myGameArea.clear();
if (myGameArea.touchX && myGameArea.touchY) {
myGamePiece.x = myGameArea.x;
myGamePiece.y =
myGameArea.y;
}
myGamePiece.update();
}
Kendin dene " Tuval üzerine Kontrolörler
Biz de tuval üzerine kendi düğmeleri çizin ve denetleyicileri olarak kullanabilirsiniz:
Örnek
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();
}bu durumda, bir bileşen eğer bir düğme dışarı rakamlar yeni bir fonksiyon ekleme, tıklandığında.
Bir fare düğmesi tıklandığında olmadığını kontrol etmek olay dinleyicileri ekleyerek başlayın ( mousedown and mouseup ) . Dokunmatik ekranlar ile ilgilenmek için, ayrıca ekran tıklandığında olmadığını kontrol etmek olay dinleyicileri eklemek ( touchstart and touchend ) :
Örnek
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);
}
} Şimdi myGameArea nesne bize x- ve tıklama y koordinatlarını söyler özellikleri vardır. Biz tıklama mavi düğmelerinden birini gerçekleştirildi olmadığını kontrol etmek Postadölesan özelliklerini kullanırlar.
Yeni yöntemi denir clicked bunun bir yöntemdir, component yapıcı ve bileşen tıklandığında ediliyor eğer denetler.
Gelen updateGameArea mavi düğmelerinden birine tıklandığında fonksiyonu, biz neccessarry eylemleri:
Örnek
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();
} Kendin dene "