دفع أزرار لتحريك مربع أحمر:
إضافة بعض العقبات
الآن نريد أن نضيف العقبات سوم لعبتنا.
إضافة مكون جديد إلى منطقة الألعاب. جعله الخضراء، واسعة 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();
}
انها محاولة لنفسك » ضرب العقبة = أكثر من لعبة
في المثال أعلاه، لا شيء يحدث عند ضرب عقبة. في لعبة، وهذا ليس مرضيا جدا.
كيف لنا أن نعرف إذا كان لدينا مربع أحمر يضرب عقبة؟
إنشاء أسلوب جديد في منشئ مكون، أن chekcs إذا تعطل المكون مع مكون آخر. ينبغي أن تسمى هذه الطريقة في كل مرة الأطر التحديثات، 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;
} ترجع الدالة everyinterval الحقيقية إذا كان framenumber الحالي يتوافق مع فترة معينة.
لتحديد العقبات متعددة، أولا بتعريف المتغير عقبة كما صفيف.
ثانيا، نحن بحاجة إلى إجراء بعض التغييرات في وظيفة 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();
} انها محاولة لنفسك »