Oyun Kontrolörleri
Kırmızı kareyi hareket ettirmek için düğmelere basın:
Kontrolü Elinize Alın
Şimdi kırmızı kareyi kontrol etmek istiyoruz.
Yukarı, aşağı, sol ve sağ olmak üzere dört düğme ekleyin.
Bileşeni seçilen yönde hareket ettirmek için her düğme için bir işlev yazın.
Yapıcıda iki yeni özellik componentoluşturun ve bunları
speedX
ve olarak adlandırın speedY. Bu özellikler hız göstergesi olarak kullanılmaktadır.
Yapıcıya, bileşenin konumunu değiştirmek için ve özelliklerini kullanan componentadlı bir işlev ekleyin .
newPos()speedXspeedY
newpos işlevi, bileşeni çizmeden önce updateGameArea işlevinden çağ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>
Hareket etmeyi kes
İsterseniz bir düğmeyi bıraktığınızda kırmızı karenin durmasını sağlayabilirsiniz.
Hız göstergelerini 0'a ayarlayacak bir işlev ekleyin.
Hem normal ekranlar hem de dokunmatik ekranlarla başa çıkmak için her iki cihaz için de kod ekleyeceğiz:
Örnek
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>
Denetleyici olarak klavye
Klavyedeki yön tuşlarını kullanarak da kırmızı kareyi kontrol edebiliyoruz.
Bir tuşa basılıp basılmadığını kontrol eden bir yöntem oluşturun key
ve nesnenin özelliğini myGameAreaanahtar koduna ayarlayın. Anahtar bırakıldığında, keyözelliği şu şekilde ayarlayın 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);
}
}
Ardından ok tuşlarından birine basılırsa kırmızı kareyi hareket ettirebiliriz:
Ö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();
}
Birden Fazla Tuşa Basıldı
Aynı anda birden fazla tuşa basılırsa ne olur?
Yukarıdaki örnekte, bileşen yalnızca yatay veya dikey olarak hareket edebilir. Şimdi bileşenin çapraz olarak da hareket etmesini istiyoruz.
Nesne için bir
keys dizimyGameArea oluşturun ve basılan her tuş için bir eleman ekleyin ve ona değeri verin, tuşa basılana truekadar değer doğru kalır, değer
falsekeyup olay dinleyici işlevinde olur:
Ö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();
}
Fare İmlecini Denetleyici Olarak Kullanma
Kırmızı kareyi fare imlecini kullanarak kontrol etmek istiyorsanız, myGameAreanesneye fare imlecinin x ve y koordinatlarını güncelleyen bir yöntem ekleyin:.
Ö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);
}
}
Ardından fare imlecini kullanarak kırmızı kareyi hareket ettirebiliriz:
Örnek
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Oyunu Kontrol Etmek İçin Ekrana Dokun
Kırmızı kareyi dokunmatik ekrandan da kontrol edebiliyoruz.
myGameAreaEkrana dokunulduğu yerin x ve y koordinatlarını kullanan nesneye bir yöntem ekleyin :
Ö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);
}
}
Ardından, kullanıcı ekrana dokunursa, fare imleci için yaptığımız kodun aynısını kullanarak kırmızı kareyi hareket ettirebiliriz:
Örnek
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Tuval Üzerindeki Kontrolörler
Ayrıca tuval üzerine kendi düğmelerimizi çizebilir ve bunları denetleyici olarak kullanabiliriz:
Ö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();
}
Bir bileşenin, bu durumda bir düğmenin tıklanıp tıklanmadığını anlayan yeni bir işlev ekleyin.
mousedownBir fare düğmesinin ( ve mouseup) tıklanıp tıklanmadığını kontrol etmek için olay dinleyicileri ekleyerek başlayın . Dokunmatik ekranlarla uğraşmak için, ekranın tıklanıp tıklanmadığını kontrol etmek için olay dinleyicileri de ekleyin ( touchstartve 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);
}
}
Artık myGameAreanesne bize bir tıklamanın x ve y koordinatlarını söyleyen özelliklere sahiptir. Bu özellikleri, tıklamanın mavi butonlarımızdan birinde gerçekleştirilip gerçekleştirilmediğini kontrol etmek için kullanırız.
Yeni yöntem çağrılır clicked, yapıcının bir yöntemidir
componentve bileşenin tıklanıp tıklanmadığını kontrol eder.
Fonksiyonda updateGameAreamavi butonlardan birine tıklandığında gerekli işlemleri yapıyoruz:
Ö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();
}