Komentar: Dalam artikel sebelumnya, saya memperkenalkan cara menggunakan HTML5 untuk mengimplementasikan tangki kecil seluler. Dalam artikel ini, saya akan membawa Anda ke dalam perang tank. Teman yang menyukai HTML5 tidak boleh melewatkannya.
<per> tank.html </pr Pre> <pr Pre> <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8"/>
</head>
<body onkeydown = "getCommand ();">
<H1> HMTL5-KLASSIC Tank War </h1>
<!-medan perang perang tank->
<Canvas> </an Canvas>
<span> data </span>
<!-perkenalkan tankgames.js ke halaman ini->
<script type = "text/javascript" src = "tank.js"> </script>
<type skrip = "Teks/JavaScript">
// Dapatkan kanvas
var canvas1 = document.getElementById ("tankmap");
// Dapatkan konteks gambar (Anda bisa memahaminya sebagai kuas)
var cxt = canvas1.getContext ("2d");
// pahlawan tank saya
//arah
var hero = baru pahlawan (140.140,0, herocolor);
// Tentukan peluru kosong
var herobullet = null;
// Tentukan tank musuh (berapa banyak tank musuh?
var musuh = array baru ();
// mati lebih dulu dan kemudian hidup, set 3, dan kemudian kita akan membuat variabel untuk jumlah tank musuh.
// 0-> atas, 1-> kanan, 2-> turun 3-> kiri
untuk (var i = 0; i <3; i ++) {
// Buat tangki
var musuh = musuh baru ((i+1)*50,0,2, enmeycolor);
// Masukkan tangki ini ke dalam array
musuh [i] = musuh;
}
// Sebut saja sekali
flashtankmap ();
// Menulis fungsi khusus untuk menyegarkan zona tempur kami secara teratur dan memasukkan elemen untuk muncul di zona tempur (tank sendiri, tank musuh, peluru, bom,
//obstructions...)-> pemikiran game
fungsi flashTankmap () {
// membersihkan kanvas
cxt.clearrect (0,0,400.300);
// tangki saya
drawtank (pahlawan);
// Gambarlah peluru Anda sendiri
// Bagaimana efek penerbangan peluru muncul? [Jawab: Pertama -tama, kita harus menyegarkan zona tempur setiap waktu (setInterval). Jika koordinat peluru berubah saat menyegarkan, koordinat peluru memberi orang perasaan bahwa peluru itu terbang!]
drawherobullet ();
// Tank musuh
// Gambarlah semua tank musuh
untuk (var i = 0; i <3; i ++) {
drawtank (musuh [i]);
}
}
// Ini adalah fungsi yang menerima penekanan tombol pengguna
fungsi getCommand () {
// Bagaimana saya tahu tombol apa yang ditekan pemain
// Instruksi: Objek Acara -------> Function Event Handler ()
var code = event.keycode; // kode ASCII untuk huruf yang sesuai-> mari kita lihat tabel kode
switch (kode) {
Kasus 87: // aktif
hero.moveup ();
merusak;
Kasus 68:
hero.moveright ();
merusak;
Kasus 83:
Hero.Movedown ();
merusak;
Kasus 65:
hero.moveleft ();
merusak;
Kasus 74:
hero.shotenemy ();
merusak;
}
// memicu fungsi ini flashTankMap ();
flashtankmap ();
// mengecat ulang semua tank musuh. Anda dapat menulis kode di sini (pikirkan, mari kita memiliki fungsi yang didedikasikan untuk menyegarkan kanvas kami secara teratur [zona perang])
}
// Segarkan zona tempur setiap 100 milidetik
window.setInterval ("flashTankmap ()", 100);
</script>
</body>
</html> </pr Pre>
tank.js
<pr Pre> </per>
<pred> <per> // Untuk kenyamanan pemrograman, kami mendefinisikan dua array warna
var herocolor = array baru ("#ba9658", "#fef26e");
var enmeycolor = array baru ("#00a2b5", "#00fefe");
// Perluasan tank musuh lainnya di sini cukup bagus.
// peluru
Function Bullet (x, y, langsung, kecepatan) {
this.x = x;
this.y = y;
this.direct = langsung;
this.speed = speed;
this.timer = null;
this.islive = true;
this.run = function run () {
// Ketika koordinat peluru ini ditampilkan, pertama -tama kita menentukan apakah peluru telah mencapai batas
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// Peluru harus berhenti.
window.clearinterval (this.timer);
// Peluru mati
this.islive = false;
}kalau tidak{
// Ini dapat digunakan untuk memodifikasi koordinat
switch (this.direct) {
Kasus 0:
this.y- = this.speed;
merusak;
Kasus 1:
this.x+= this.speed;
merusak;
Kasus 2:
this.y+= this.speed;
merusak;
Kasus 3:
this.x- = this.speed;
merusak;
}
}
document.geteLementById ("aa"). innertext = "Bullet x ="+this.x+"Bullet y ="+this.y;
}
}
// ini adalah kelas tank
Tank fungsi (x, y, langsung, warna) {
this.x = x;
this.y = y;
this.speed = 1;
this.direct = langsung;
// Tangki membutuhkan dua warna.
this.color = warna;
// Pindah ke atas
this.moveup = function () {
this.y- = this.speed;
this.direct = 0;
}
//Ke kanan
this.moveright = function () {
this.x+= this.speed;
this.direct = 1;
}
// Pindah ke bawah
this.movedown = function () {
this.y+= this.speed;
this.direct = 2;
}
//Kiri
this.moveleft = function () {
this.x- = this.speed;
this.direct = 3;
}
}
// Tentukan kelas pahlawan
// x mewakili koordinat horizontal tangki, y mewakili koordinat vertikal, arah langsung
function hero (x, y, langsung, warna) {
// Tujuan dari dua kalimat berikut adalah untuk mencapai efek warisan melalui peniruan objek
this.tank = tangki;
this.tank (x, y, langsung, warna);
// Tambahkan fungsi untuk menembak tank musuh.
this.shotenemy = function () {
// Buat peluru, posisi peluru harus terkait dengan pahlawan dan arah pahlawan ... !!!
//this.x adalah koordinat horizontal dari pahlawan saat ini. Di sini kami hanya akan memproses (memperbaiki)
switch (this.direct) {
Kasus 0:
herobullet = peluru baru (this.x+9, this.y, this.direct, 1);
merusak;
Kasus 1:
herobullet = peluru baru (this.x+30, this.y+9, this.direct, 1);
merusak;
Kasus 2:
herobullet = peluru baru (this.x+9, this.y+30, this.direct, 1);
merusak;
Kasus 3: // Benar
herobullet = peluru baru (this.x, this.y+9, this.direct, 1);
merusak;
}
// Memanggil peluru kami, 50 adalah kesimpulan yang diperoleh oleh banyak tes guru.
var timer = window.setInterval ("herobullet.run ()", 50);
// Tetapkan timer ini ke peluru ini (objek JS adalah Reference Pass!)
herobullet.timer = timer;
}
}
// Tentukan kelas musuh
function musuh (x, y, langsung, warna) {
// Tangki mewarisi dengan menyamar sebagai objek
this.tank = tangki;
this.tank (x, y, langsung, warna);
}
// Gambarlah peluru Anda sendiri dan katakan satu hal lagi, Anda juga dapat merangkum fungsi ke dalam kelas pahlawan
fungsi drawherobullet () {
// Di sini, kami menambahkan kalimat, tetapi Anda perlu tahu bahwa menambahkan di sini mengharuskan Anda memastikan seluruh program
if (herobullet! = null && herobullet.islive) {
cxt.fillstyle = "#fef26e";
cxt.fillrect (herobullet.x, herobullet.y, 2,2);
}
}
// Gambarlah tangki
function drawtank (tank) {
// Pertimbangkan arah
switch (tank.direct) {
Kasus 0: // aktif
Kasus 2: // Down
// Gambarlah tangki Anda sendiri dan gunakan teknik menggambar sebelumnya
// Atur warnanya
cxt.fillstyle = tank.color [0];
// Guru Han menggunakan kematian terlebih dahulu ---> dan kemudian hidup (yang terbaik untuk pemula)
// Gambarlah persegi panjang di sebelah kiri terlebih dahulu
cxt.fillrect (tank.x, tank.y, 5,30);
// Gambar persegi panjang di sebelah kanan (tolong pikirkan saat ini -> pastikan untuk memiliki titik referensi)
cxt.fillrect (tank.x+15, tank.y, 5,30);
// Gambarlah persegi panjang tengah
cxt.fillrect (tank.x+6, tank.y+5,8,20);
// Gambar penutup tangki
cxt.fillstyle = tank.color [1];
cxt.arc (tank.x+10, tank.y+15,4,0,360, true);
cxt.fill ();
// Gambar meriam (garis lurus)
cxt.strokestyle = tank.color [1];
// atur lebar garis
cxt.linewidth = 1.5;
cxt.beginpath ();
cxt.moveto (tank.x+10, tank.y+15);
if (tank.direct == 0) {
cxt.lineto (tank.x+10, tank.y);
} lain jika (tank.direct == 2) {
cxt.lineto (tank.x+10, tank.y+30);
}
cxt.closepath ();
cxt.stroke ();
merusak;
Kasus 1: // kanan dan kiri
Kasus 3:
// Gambarlah tangki Anda sendiri dan gunakan teknik menggambar sebelumnya
// Atur warnanya
cxt.fillstyle = tank.color [0];
// Guru Han menggunakan kematian terlebih dahulu ---> dan kemudian hidup (yang terbaik untuk pemula)
// Gambarlah persegi panjang di sebelah kiri terlebih dahulu
cxt.fillrect (tank.x, tank.y, 30,5);
// Gambar persegi panjang di sebelah kanan (tolong pikirkan saat ini -> pastikan untuk memiliki titik referensi)
cxt.fillrect (tank.x, tank.y+15,30,5);
// Gambarlah persegi panjang tengah
cxt.fillrect (tank.x+5, tank.y+6,20,8);
// Gambar penutup tangki
cxt.fillstyle = tank.color [1];
cxt.arc (tank.x+15, tank.y+10,4,0,360, true);
cxt.fill ();
// Gambar meriam (garis lurus)
cxt.strokestyle = tank.color [1];
// atur lebar garis
cxt.linewidth = 1.5;
cxt.beginpath ();
cxt.moveto (tank.x+15, tank.y+10);
//Ke kanan
if (tank.direct == 1) {
cxt.lineto (tank.x+30, tank.y+10);
} lain jika (tank.direct == 3) {// di sebelah kiri
cxt.lineto (tank.x, tank.y+10);
}
cxt.closepath ();
cxt.stroke ();
merusak;
}
}
</per>
<pr Pre> </per>
</per>