खेल बाधाएं
लाल वर्ग को स्थानांतरित करने के लिए बटन दबाएं:
कुछ बाधाएं जोड़ें
अब हम अपने खेल में कुछ बाधाएं जोड़ना चाहते हैं।
गेमिंग क्षेत्र में एक नया घटक जोड़ें। इसे हरा, 10px चौड़ा, 200px ऊँचा बनाएँ, और इसे 300px दाईं ओर और 120px नीचे रखें।
हर फ्रेम में बाधा घटक को भी अपडेट करें:
उदाहरण
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myObstacle = new component(10, 200, "green", 300, 120);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
बाधा मारो = खेल खत्म
ऊपर के उदाहरण में, जब आप बाधा से टकराते हैं तो कुछ नहीं होता है। एक खेल में, यह बहुत संतोषजनक नहीं है।
हमें कैसे पता चलेगा कि हमारा लाल वर्ग बाधा से टकराता है?
कंपोनेंट कंस्ट्रक्टर में एक नई विधि बनाएं, जो यह जांचती है कि कंपोनेंट किसी अन्य कंपोनेंट के साथ क्रैश होता है या नहीं। इस विधि को हर बार फ्रेम अपडेट होने पर, प्रति सेकंड 50 बार कॉल किया जाना चाहिए।
stop()ऑब्जेक्ट में एक विधि भी जोड़ें myGameArea, जो 20 मिलीसेकंड अंतराल को साफ़ करती है।
उदाहरण
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);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
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;
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
चलती बाधा
स्थिर होने पर बाधा का कोई खतरा नहीं है, इसलिए हम चाहते हैं कि वह आगे बढ़े।
myObstacle.xप्रत्येक अद्यतन पर का गुण मान बदलें :
उदाहरण
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
एकाधिक बाधाएं
कई बाधाओं को जोड़ने के बारे में कैसे?
उसके लिए हमें फ्रेम की गिनती के लिए एक संपत्ति की आवश्यकता होती है, और किसी दिए गए फ्रेम दर पर कुछ निष्पादित करने के लिए एक विधि की आवश्यकता होती है।
उदाहरण
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.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
यदि वर्तमान फ्रेमनंबर दिए गए अंतराल से मेल खाता है, तो प्रत्येक अंतराल फ़ंक्शन सही होता है।
कई बाधाओं को परिभाषित करने के लिए, पहले बाधा चर को एक सरणी के रूप में घोषित करें।
दूसरा, हमें updateGameArea फ़ंक्शन में कुछ बदलाव करने की आवश्यकता है।
उदाहरण
var myGamePiece;
var myObstacles = [];
function updateGameArea() {
var x, y;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
y = myGameArea.canvas.height - 200
myObstacles.push(new component(10, 200, "green", x, y));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}
फ़ंक्शन में updateGameAreaहमें यह देखने के लिए हर बाधा के माध्यम से लूप करना चाहिए कि कोई दुर्घटना हुई है या नहीं। यदि कोई क्रैश होता है, तो updateGameAreaफ़ंक्शन बंद हो जाएगा, और कोई और आरेखण नहीं किया जाएगा।
फ़ंक्शन फ़्रेमों को updateGameAreaगिनता है और प्रत्येक 150वें फ़्रेम के लिए एक बाधा जोड़ता है।
यादृच्छिक आकार की बाधाएं
खेल को थोड़ा और कठिन और मजेदार बनाने के लिए, हम यादृच्छिक आकार की बाधाओं को भेजेंगे, ताकि दुर्घटनाग्रस्त न होने के लिए लाल वर्ग को ऊपर और नीचे जाना चाहिए।
उदाहरण
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}