أحدث البرامج التعليمية وتطوير الشبكة
 

HTML لعبة الجاذبية


بعض الألعاب لديها القوى التي تشد عنصر اللعبة في اتجاه واحد، مثل الجاذبية تسحب الأجسام على الأرض.




الجاذبية

لإضافة هذه الوظيفة لدينا منشئ مكون، أولا إضافة gravity الملكية، التي تحدد خطورة الحالية. ثم إضافة gravitySpeed الملكية، مما يزيد في كل مرة نقوم بتحديث إطار:

مثال

function component(width, height, color, x, y, type) {
    this.type = type;
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.speedX = 0;
    this.speedY = 0;
    this.gravity = 0.05;
    this.gravitySpeed = 0;
   
this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed ;
    }
}
انها محاولة لنفسك »

ضرب القاع

لمنع مربع أحمر من السقوط إلى الأبد، وقف هبوط عندما يضرب الجزء السفلي من لعبة المنطقة:

مثال

    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
        }
    }

انها محاولة لنفسك »

تسريع يصل

في لعبة، عندما يكون لديك القوة التي تسحب أنت إلى أسفل، يجب أن يكون وسيلة لإجبار عنصر لتسريع تصل.

يؤدي وظيفة عندما يقوم شخص ينقر على زر، وجعل الساحة الحمراء تطير في الهواء:

مثال

<script>
function accelerate(n) {
    myGamePiece.gravity = n;
}
</script>

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>
انها محاولة لنفسك »

لعبة

جعل لعبة تقوم على ما تعلمناه حتى الآن: