खेल नियंत्रक
लाल वर्ग को स्थानांतरित करने के लिए बटन दबाएं:
नियंत्रण में आएं
अब हम रेड स्क्वायर को नियंत्रित करना चाहते हैं।
ऊपर, नीचे, बाएँ और दाएँ चार बटन जोड़ें।
घटक को चयनित दिशा में ले जाने के लिए प्रत्येक बटन के लिए एक फ़ंक्शन लिखें।
componentकंस्ट्रक्टर में दो नए गुण बनाएं , और उन्हें कॉल करें
speedX
और speedY. इन गुणों का उपयोग गति संकेतक के रूप में किया जा रहा है।
componentकंस्ट्रक्टर में एक फ़ंक्शन जोड़ें , जिसे कहा जाता है
newPos(), जो
घटक की स्थिति को बदलने के लिए speedXऔर गुणों का उपयोग करता है।speedY
न्यूपॉस फ़ंक्शन को घटक को चित्रित करने से पहले updateGameArea फ़ंक्शन से कॉल किया जाता है:
उदाहरण
<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>
चलना बंद करें
यदि आप चाहें, तो आप एक बटन छोड़ते समय लाल वर्ग को रोक सकते हैं।
एक फ़ंक्शन जोड़ें जो गति संकेतकों को 0 पर सेट करेगा।
सामान्य स्क्रीन और टच स्क्रीन दोनों से निपटने के लिए, हम दोनों उपकरणों के लिए कोड जोड़ेंगे:
उदाहरण
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>
नियंत्रक के रूप में कीबोर्ड
हम कीबोर्ड पर तीर कुंजियों का उपयोग करके भी लाल वर्ग को नियंत्रित कर सकते हैं।
एक विधि बनाएं जो जांचता है कि कोई कुंजी दबाई गई है, और ऑब्जेक्ट की key
संपत्ति को कुंजी कोड पर सेट करें। myGameAreaजब कुंजी जारी की जाती है, तो keyसंपत्ति को इस पर सेट करें false:
उदाहरण
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);
}
}
तब हम लाल वर्ग को स्थानांतरित कर सकते हैं यदि तीर कुंजियों में से एक को दबाया जाता है:
उदाहरण
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();
}
एकाधिक कुंजी दबाए गए
क्या होगा यदि एक ही समय में एक से अधिक कुंजी दबाया जाता है?
ऊपर के उदाहरण में, घटक केवल क्षैतिज या लंबवत रूप से आगे बढ़ सकता है। अब हम चाहते हैं कि घटक भी तिरछे गति करें।
ऑब्जेक्ट के लिए एक
keys सरणी बनाएं myGameArea, और दबाए गए प्रत्येक कुंजी के लिए एक तत्व डालें, और इसे मान दें true, मान तब तक सही रहता है जब तक कि कुंजी को दबाया नहीं जाता है, मान कीप ईवेंट श्रोता फ़ंक्शन
falseमें बन जाता है:
उदाहरण
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();
}
एक नियंत्रक के रूप में माउस कर्सर का उपयोग करना
यदि आप माउस कर्सर का उपयोग करके लाल वर्ग को नियंत्रित करना चाहते हैं, तो myGameAreaऑब्जेक्ट में एक विधि जोड़ें जो माउस कर्सर के x और y निर्देशांक को अपडेट करता है:।
उदाहरण
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);
}
}
फिर हम माउस कर्सर का उपयोग करके लाल वर्ग को स्थानांतरित कर सकते हैं:
उदाहरण
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
खेल को नियंत्रित करने के लिए स्क्रीन को स्पर्श करें
हम लाल वर्ग को टच स्क्रीन पर भी नियंत्रित कर सकते हैं।
ऑब्जेक्ट में एक विधि जोड़ें myGameAreaजो स्क्रीन को स्पर्श करने के x और y निर्देशांक का उपयोग करती है:
उदाहरण
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);
}
}
फिर हम लाल वर्ग को स्थानांतरित कर सकते हैं यदि उपयोगकर्ता स्क्रीन को छूता है, उसी कोड का उपयोग करके जैसा हमने माउस कर्सर के लिए किया था:
उदाहरण
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
कैनवास पर नियंत्रक
हम कैनवास पर अपने स्वयं के बटन भी बना सकते हैं, और उन्हें नियंत्रक के रूप में उपयोग कर सकते हैं:
उदाहरण
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();
}
एक नया फ़ंक्शन जोड़ें जो यह पता लगाता है कि क्या कोई घटक, इस मामले में एक बटन क्लिक किया गया है।
mousedownयह देखने के लिए कि क्या माउस बटन क्लिक किया गया है ( और mouseup) ईवेंट श्रोताओं को जोड़कर प्रारंभ करें । टच स्क्रीन से निपटने के लिए, ईवेंट श्रोताओं को यह देखने के लिए भी जोड़ें कि क्या स्क्रीन पर क्लिक किया गया है ( touchstartऔर touchend):
उदाहरण
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);
}
}
अब myGameAreaऑब्जेक्ट में ऐसे गुण हैं जो हमें एक क्लिक के x- और y-निर्देशांक बताते हैं। हम इन गुणों का उपयोग यह जांचने के लिए करते हैं कि क्लिक हमारे किसी नीले बटन पर किया गया था या नहीं।
नई विधि को कहा जाता है clicked, यह कंस्ट्रक्टर की एक विधि है
component, और यह जांचता है कि घटक क्लिक किया जा रहा है या नहीं।
फ़ंक्शन में updateGameArea, यदि नीले बटनों में से एक पर क्लिक किया जाता है, तो हम आवश्यक कार्रवाई करते हैं:
उदाहरण
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();
}