O‘yin boshqaruvi
Qizil kvadratni harakatlantirish uchun tugmalarni bosing:
Boshqaruvni qo‘lga olish
Endi qizil kvadratni boshqarmoqchimiz.
To‘rtta tugma qo‘shing: yuqoriga, pastga, chapga va o‘ngga.
Komponentni tanlangan yo‘nalishda harakatlantirish uchun har bir tugmaga funksiya yozing.
component konstruktorida ikkita yangi xususiyat yarating va ularni
speedX hamda speedY deb nomlang. Bu xususiyatlar tezlik ko‘rsatkichlari sifatida ishlatiladi.
component konstruktoriga
newPos() deb nomlangan funksiya qo‘shing; u komponent pozitsiyasini o‘zgartirish uchun speedX va speedY xususiyatlaridan foydalanadi.
newpos funksiyasi komponentni chizishdan oldin updateGameArea funksiyasidan chaqiriladi:
Misol
<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>
O‘zingiz sinab ko‘ring »
Harakatni to‘xtatish
Xohlasangiz, tugmani qo‘yib yuborganingizda qizil kvadrat to‘xtaydigan qilishingiz mumkin.
Tezlik ko‘rsatkichlarini 0 ga o‘rnatadigan funksiya qo‘shing.
Oddiy ekranlar bilan ham, sensorli ekranlar bilan ham ishlash uchun har ikkala turdagi qurilma uchun kod qo‘shamiz:
Misol
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>
O‘zingiz sinab ko‘ring »
Klaviatura boshqaruvchi sifatida
Qizil kvadratni klaviaturadagi strelka tugmalari yordamida ham boshqarishimiz mumkin.
Tugma bosilganini tekshiradigan metod yarating va myGameArea obyektining key xususiyatini tugma kodiga o‘rnating. Tugma qo‘yib yuborilganda key xususiyatini false’ga o‘rnating:
Misol
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);
}
}
Shundan so‘ng strelka tugmalaridan biri bosilsa, qizil kvadratni harakatlantira olamiz:
Misol
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();
}
O‘zingiz sinab ko‘ring »
Bir nechta tugma bosilganda
Agar bir vaqtning o‘zida bir nechta tugma bosilsa-chi?
Yuqoridagi misolda komponent faqat gorizontal yoki vertikal harakatlana oladi. Endi komponent diagonal bo‘yicha ham harakatlanishini xohlaymiz.
myGameArea obyekti uchun
keys massivini yarating, bosilgan har bir tugma uchun unga bittadan element qo‘shing va unga true qiymatini bering. Tugma bosilishdan to‘xtaguncha qiymat true bo‘lib qoladi, keyup hodisa tinglovchisi funksiyasida esa qiymat
false’ga aylanadi:
Misol
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();
}
O‘zingiz sinab ko‘ring »
Sichqoncha kursoridan boshqaruvchi sifatida foydalanish
Agar qizil kvadratni sichqoncha kursori yordamida boshqarmoqchi bo‘lsangiz, myGameArea obyektiga sichqoncha kursorining x va y koordinatalarini yangilab turadigan metod qo‘shing:
Misol
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);
}
}
Shundan so‘ng qizil kvadratni sichqoncha kursori yordamida harakatlantira olamiz:
Misol
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
O‘yinni boshqarish uchun ekranga teging
Qizil kvadratni sensorli ekranda ham boshqarishimiz mumkin.
myGameArea obyektiga ekranga tegilgan joyning x va y koordinatalaridan foydalanadigan metod qo‘shing:
Misol
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);
}
}
Shundan so‘ng sichqoncha kursori uchun yozgan kodimizdan foydalanib, foydalanuvchi ekranga tekkanda qizil kvadratni harakatlantira olamiz:
Misol
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
Canvas’dagi boshqaruvchilar
Shuningdek, canvas’da o‘z tugmalarimizni chizib, ulardan boshqaruvchi sifatida foydalanishimiz mumkin:
Misol
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();
}
Komponent (bu holda tugma) bosilganini aniqlaydigan yangi funksiya qo‘shing.
Avval sichqoncha tugmasi bosilganini tekshiradigan hodisa tinglovchilarini qo‘shing (mousedown va mouseup). Sensorli ekranlar bilan ishlash uchun ekranga bosilganini tekshiradigan hodisa tinglovchilarini ham qo‘shing (touchstart va touchend):
Misol
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);
}
}
Endi myGameArea obyektida bosilgan joyning x va y koordinatalarini bildiruvchi xususiyatlar bor. Bu xususiyatlardan bosish ko‘k tugmalarimizdan birida amalga oshirilganini tekshirish uchun foydalanamiz.
Yangi metod clicked deb ataladi; u
component konstruktorining metodi bo‘lib, komponent bosilayotganini tekshiradi.
updateGameArea funksiyasida ko‘k tugmalardan biri bosilsa, kerakli amallarni bajaramiz:
Misol
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();
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!