PS: Pertempuran tank ini adalah penulisan ulang setelah sepotong kode sumber online dan offline. Tidak ada yang terlalu sulit dalam dirinya sendiri. Kasing ini menggunakan JS Object-Oriented, yang dapat digunakan sebagai tutorial pengantar untuk JS Object-Oriented.
1. Buat objek dasar untuk mewujudkan pergerakan tank sederhana
1.1 Bagaimana cara menggambar kanvas di peta ?
Mempertimbangkan masalah kompatibilitas browser, kami menggunakan DOM untuk menggambar dan menyegarkan objek game. Bagaimana kita menyimpan peta kita? Kita harus menyimpan peta sebagai array dua dimensi. Tidak ada array dua dimensi di JS, tetapi dapat dicapai dengan menyimpan array dalam array satu dimensi.
1.2 Implementasi Kode
Kami merancang kanvas sebagai array dua dimensi 13 * 13. Setiap elemen memiliki panjang dan lebar yang sesuai di peta. Kita dapat menganggap seluruh peta sebagai tabel yang terdiri dari sel ukuran 40px * 40px, sehingga ukuran seluruh kanvas kami adalah 520px * 520px;
Sebelum memasukkan kode, saya akan memberi Anda diagram hubungan objek:
1.2.1 Membuat objek tingkat atas
Kode HTML:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd html 4.0 transisi // en">
<Html>
<head>
<title> Tank War </iteme>
<tautan rel = stylesheet href = "css /main.css" />
<skrip src = "js/common.js"> </ptript>
<skrip src = "js/tankObject.js"> </script>
<skrip src = "js/mover.js"> </script>
<skrip src = "js/tank.js"> </script>
<Script src = "js/frame.js"> </ptript>
<script>
window.onload = function () {
// Panggil objek pemuatan game
var loader = gameloader baru ();
loader.begin ();
}
</script>
</head>
<body>
<!-Peta Container->
<Div id = "DivMap">
</div>
<Div id = "debuginfo">
</div>
</body>
</html>
File tankobject.js:
Salinan kode adalah sebagai berikut:
// objek tingkat atas
Tankobject = function () {
this.xposition = 0; // Posisi objek dalam x di peta (13*13)
this.yposition = 0;
this.ui = null; // Elemen Dom
}
// Ubah metode statis UI
Tankobject.prototype.updateUi = function (battlfiled) {}
// Atur posisinya, parameternya adalah sebagai berikut: 1*40, 6*40
Tankobject.prototype.setPosition = fungsi (leftposition, topposition) {
// bulat di lokasi peta Math.round
this.xposition = math.round (leftposition / 40);
this.yposition = math.round (topposition / 40);
// Atur posisi di formulir
if (this.ui! = null && this.ui.style! = null) {
this.ui.style.left = leftposition + "px";
this.ui.style.top = topposisi + "px";
}
}
Di sini kita menggunakan koordinat X dan Y untuk mewakili posisi objek pada peta. Kemudian, kami akan memasukkan setiap objek di peta ke dalam array dua dimensi, dan pada saat ini, kami dapat memperoleh objek yang sesuai melalui koordinat X dan Y.
Kemudian gunakan kiri dan atas di CSS untuk mengontrol posisi objek kami dalam bentuk. (Objek yang dapat diketik: tangki, peluru)
1.2.2 Membuat Objek Publik
Kita juga perlu membuat objek publik untuk menulis beberapa metode yang umum digunakan.
Common.js:
Salinan kode adalah sebagai berikut:
// Empat arah gerakan tangki
var enumdirection = {
UP: "0",
Benar: "1",
Turun: "2",
Kiri: "3"
};
// Objek Metode Umum
var utilityclass = {
// Buat elemen DOM ke ParentNode, tentukan ID dan ClassName
Kreatee: Function (type, id, className, parentNode) {
var j = document.createElement (type);
if (id) {j.id = id};
if (className) {j.classname = className};
return ParentNode.AppendChild (J);
}, // hapus elemen
Lepaskan: fungsi (obj, parentNode) {
ParentNode.Removechild (OBJ);
},
GetFunctionName: function (Context, ArgumentCallee) {
untuk (var i dalam konteks) {
if (konteks [i] == argumentCallee) {return i};
}
kembali "";
}, // ikat acara, kembalikan metode func, ini adalah obj yang disahkan
BindFunction: function (obj, func) {
return function () {
func.Apply (OBJ, argumen);
};
}
};
1.2.3 Membuat objek bergerak
Mover.js
Salinan kode adalah sebagai berikut:
// Pindahkan objek, wariskan dari objek tingkat atas
Mover = function () {
this.direction = enumdirection.up;
this.speed = 1;
}
Mover.prototype = new tankObject ();
Mover.prototype.move = function () {
if (this.lock) {
return;/* dinonaktifkan atau masih sedang berlangsung, operasinya tidak valid*/
}
// Atur gambar latar belakang tangki sesuai dengan arah
this.ui.style.backgroundposition = "0 -" + this.direction * 40 + "px";
// Jika arah naik dan turun, VP adalah yang teratas; Jika arah naik dan kiri, val adalah -1
var vp = ["atas", "kiri"] [((this.direction == enumdirection.up) || (this.direction == enumdirection.down))? 0: 1];
var val = ((this.direction == enumdirection.up) || (this.direction == enumdirection.left))? -1: 1;
this.lock = true;/* lock*/
// Simpan objek saat ini untuk ini
var ini = ini;
// Rekam Posisi Mulai Gerakan Objek
var startMovep = parseInt (this.ui.style [vp]);
var xp = this.xposition, yp = this.yposition;
var submove = setInterval (function () {
// Mulailah bergerak, 5px setiap kali
This.ui.style [vp] = parseInt (this.ui.style [vp]) + 5 * val + "px";
// 40px per sel
if (math.abs ((parseInt (this.ui.style [vp]) - startMovep))> = 40) {
ClearInterval (Submove);
This.lock = false;/* buka kunci, memungkinkan melangkah lagi*/
// Catat posisi objek dalam tabel setelah dipindahkan
This.xposition = math.round (this.ui.offsetleft / 40);
This.yposition = math.round (this.ui.offsettop / 40);
}
}, 80 - this.speed* 10);
}
Objek yang bergerak di sini mewarisi dari objek tingkat atas kami, dan ini mewakili objek yang memanggil metode MOVE.
Fungsi objek bergerak bergerak sesuai dengan arah dan kecepatan objek. Setiap kali Anda pindah 5px, gerakkan total 40px satu sel. Objek akan diperluas nanti dan deteksi tabrakan dan fungsi lainnya akan ditambahkan.
1.2.4 Membuat objek tangki
File Tank.js:
Salinan kode adalah sebagai berikut:
// Objek tangki mewarisi dari penggerak
Tank = function () {}
Tank.prototype = mover baru ();
// Buat tangki pemain, wariskan dari objek tangki
SelfTank = function () {
this.ui = utilityclass.createe ("div", "", "itank", document.getElementById ("divmap"));
this.movingstate = false;
this.speed = 4;
}
Selftank.prototype = Tank baru ();
// Atur posisi tangki
Selftank.prototype.updateUi = function () {
this.ui.classname = "itank";
// Metode objek atas, atur posisi tangki
this.setposition (this.xposition * 40, this.yposition * 40);
}
Sekarang hanya tank pemain yang telah dibuat, dan kami akan menambahkan tank musuh untuk mereka nanti.
1.2.5 Buat Objek Pemuatan Game (Core)
Salinan kode adalah sebagai berikut:
// Game memuat objek dari seluruh objek inti game
Gameloader = function () {
this.mapcontainer = document.getElementById ("divMap"); // Div yang menyimpan peta game
this._selftank = null; // Tank Player
this._gamelistener = null; // ID Timer Loop Utama Game
}
Gameloader.prototype = {
Begin: function () {
// inisialisasi tangki pemain
var selft = selfTank baru ();
selft.xposition = 4;
selft.yposition = 12;
selft.updateUi ();
this._selftank = selft;
// Tambahkan acara kunci
var warpper = utilityclass.bindfunction (this, this.onkeydown);
window.onkeydown = document.body.onkeydown = warpper;
warpper = utilityclass.bindfunction (this, this.onkeyup);
window.onkeyup = document.body.onkeyup = warpper;
// lingkaran utama permainan
warpper = utilityclass.bindfunction (this, this.run);
/*Kunci kontrol pemantauan timer panjang*//
this._gamelistener = setInterval (Warpper, 20);
}
// tekan tangki pemain pada keyboard untuk mulai bergerak
, Onkeydown: function (e) {
switch ((window.event || e) .keycode) {
Kasus 37:
this._selftank.direction = enumdirection.left;
this._selftank.movingstate = true;
merusak; //kiri
Kasus 38:
this._selftank.direction = enumdirection.up;
this._selftank.movingstate = true;
merusak; //Pada
Kasus 39:
this._selftank.direction = enumdirection.right;
this._selftank.movingstate = true;
merusak; //Benar
Kasus 40:
this._selftank.direction = enumdirection.down;
this._selftank.movingstate = true;
merusak; //Berikutnya
}
}
// tombol muncul dan berhenti bergerak
, Onkeyup: function (e) {
switch ((window.event || e) .keycode) {
Kasus 37:
Kasus 38:
Kasus 39:
Kasus 40:
this._selftank.movingstate = false;
merusak;
}
}
/*Fungsi Loop Running Utama dari Game, Heart of the Game, The Hub*/
, Run: function () {
if (this._selftank.movingstate) {
this._selftank.move ();
}
}
};
Kode objek pemuatan game terlihat banyak, tetapi pada kenyataannya, ia hanya melakukan dua hal:
1. Buat objek tank pemain.
2. Tambahkan acara pemantauan utama. Ketika pemain menekan tombol seluler, hubungi metode Move Tank untuk memindahkan tangki.
Ringkasan: Pada titik ini, tangki kami dapat bergerak bebas dengan menekan tombol. Langkah selanjutnya kita perlu meningkatkan deteksi peta dan tabrakan.