tutorial pengembangan web terbaru
 

Permainan Komponen HTML

❮ Sebelumnya Berikutnya Bab ❯

Menambahkan kotak merah ke area permainan:

Tambahkan Komponen a

Membuat konstruktor komponen, yang memungkinkan Anda menambahkan komponen ke gamearea tersebut.

Objek konstruktor disebut component , dan kami membuat komponen pertama kami, disebut myGamePiece :

Contoh

var myGamePiece;
function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red" , 10, 120);
 }

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

Cobalah sendiri "

Komponen memiliki sifat dan metode untuk mengontrol penampilan dan gerakan mereka.

frame

Untuk membuat permainan siap beraksi, kami akan memperbarui tampilan 50 kali per detik, yang jauh seperti frame dalam film.

Pertama, membuat fungsi baru yang disebut updateGameArea() .

Dalam myGameArea objek, tambahkan interval yang akan menjalankan updateGameArea() fungsi setiap milidetik 20 (50 times per second) . Juga menambahkan fungsi yang disebut clear() , yang membersihkan seluruh kanvas.

Dalam component konstruktor, menambahkan fungsi disebut update() , untuk menangani gambar komponen.

The updateGameArea() fungsi panggilan clear() dan update() metode.

Hasilnya adalah bahwa komponen diambil dan dibersihkan 50 kali per detik:

Contoh

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);
    }
 }

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    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);
    }
 }

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.update();
}
Cobalah sendiri "

Buatlah Pindah

Untuk membuktikan bahwa lapangan merah sedang ditarik 50 kali per detik, kita akan mengubah posisi x (horizontal) oleh salah satu pixel setiap kali kita update area permainan:

Contoh

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.x += 1;
    myGamePiece.update();
}
Cobalah sendiri "

Mengapa Batal The Game Area?

Ini mungkin tampak tidak perlu untuk membersihkan area permainan di setiap update. Namun, jika kita biarkan clear() metode, semua gerakan dari komponen akan meninggalkan jejak di mana ia diposisikan di frame terakhir:

Contoh

function updateGameArea() {
    //myGameArea.clear();
    myGamePiece.x += 1;
    myGamePiece.update();
}
Cobalah sendiri "

Ubah Ukuran

Anda dapat mengontrol lebar dan tinggi dari komponen:

Contoh

Buat persegi panjang 10x140 piksel:

function startGame() {
    myGameArea.start();
    myGamePiece = new component( 10 , 140 , "red" , 10, 120);
}
Cobalah sendiri "

Mengubah Warna

Anda dapat mengontrol warna dari komponen:

Contoh

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue" , 10, 120);
}
Cobalah sendiri "

Anda juga dapat menggunakan colorvalues ​​lain seperti hex, rgb, atau RGBA:

Contoh

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
}
Cobalah sendiri "

Ubah Posisi

Kami menggunakan x- dan y-koordinat posisi komponen ke area permainan.

Sudut kiri atas kanvas memiliki koordinat (0,0)

Mouse area permainan di bawah ini untuk melihat x dan y koordinat:

X
Y

Anda dapat memposisikan komponen mana pun Anda suka di area permainan:

Contoh

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red" , 2 , 2 );
}
Cobalah sendiri "

banyak Komponen

Anda dapat menempatkan sebagai banyak komponen yang Anda inginkan pada area permainan:

Contoh

var redGamePiece, blueGamePiece, yellowGamePiece;

 function startGame() {
    redGamePiece = new component(75, 75, "red" , 10, 10);
    yellowGamePiece = new component(75, 75, "yellow" , 50, 60);
    blueGamePiece = new component(75, 75, "blue" , 10, 110);
    myGameArea.start();
}

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
 }
Cobalah sendiri "

pindah Komponen

Membuat semua tiga komponen bergerak di arah yang berbeda:

Contoh

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.x += 1;
    yellowGamePiece.x += 1;
    yellowGamePiece.y += 1;
    blueGamePiece.x += 1;
    blueGamePiece.y -= 1;
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
Cobalah sendiri "

❮ Sebelumnya Berikutnya Bab ❯