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

تحكم لعبة HTML

❮ السابق التالي الفصل ❯

دفع أزرار لتحريك مربع أحمر:




واليسار


الحصول على السيطرة

الآن نريد أن السيطرة على مربع أحمر.

إضافة أربعة أزرار، فوق، أسفل، يسار، واليمين.

كتابة وظيفة لكل زر لتحريك عنصر في الاتجاه المحدد.

جعل اثنين من الخصائص الجديدة في component منشئ، وندعو لهم speedX و speedY . وتستخدم هذه الخصائص كمؤشرات السرعة.

إضافة دالة في component منشئ، ودعا newPos() ، والذي يستخدم speedX و speedY خصائص لتغيير موقف المكون.

يتم استدعاء الدالة newpos من وظيفة 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 omousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup() ">UP</button>
<button omousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()" >DOWN</button>
<button omousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()" >LEFT</button>
<button omousedown="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 في وظيفة keyup الحدث المستمع:

مثال

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 كائن يقوم بتحديث إحداثيات س وص من مؤشر الماوس :.

مثال

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 الكائن الذي يستخدم إحداثيات س وص من حيث لمست الشاشة:

مثال

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.touchX && myGameArea.touchY) {
        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 and mouseup ) . للتعامل مع الشاشات التي تعمل باللمس، وأيضا إضافة المستمعين الحدث لمعرفة ما اذا كان يتم النقر على الشاشة على ( touchstart and 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- والإحداثيات ص النقرة. نحن نستخدم theese وخصائص للتحقق مما إذا تم إجراء النقر على أحد الأزرار الزرقاء لدينا.

يتم استدعاء أسلوب جديد clicked ، بل هو طريقة لل component منشئ، وذلك يتحقق إذا كان يتم النقر على عنصر.

في updateGameArea وظيفة، ونحن نأخذ الإجراءات neccessarry إذا واحد من الأزرار الزرقاء النقر:

مثال

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();
}
انها محاولة لنفسك »

❮ السابق التالي الفصل ❯