ล่าสุดการพัฒนาเว็บบทเรียน
 

ตัวควบคุมเกม 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 วัตถุที่ปรับปรุง 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.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 และ Y พิกัดของการคลิก เราใช้คุณสมบัติ 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();
}
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯