1. Ringkas poin -poin utama dan masalah yang dihadapi
1. Warisan dalam JavaScript, yang terbaik adalah kelas induk untuk hanya memberikan metode berbagi dan atribut ditulis ke subkelas masing -masing untuk menghindari kebingungan konstruktor kelas induk dan subkelas.
2. Prototipe mensimulasikan kode yang diwariskan dan harus ditulis sebelum semua definisi metode.
Salinan kode adalah sebagai berikut:
Hero.prototype = tangki baru (0, 0, 0);
Hero.prototype.constructor = pahlawan;
Hero.prototype.addlife = function () {
this.lifetimes ++;
Document.QuerySelector ("#Life"). InnerHtMl = Hero.lifetimes;
}
3. Ketika Canvas menggambar grafik, kecuali untuk persegi panjang, yang lainnya harus ditambahkan dengan ctx.beginpath ();
4. Fungsi CONDAT dapat menggabungkan array, atau mengembalikan elemen ke array baru
5. Gambar akan dimuat setelah atribut SRC ditetapkan, tetapi jika gambar tidak dimuat, itu akan menyebabkan kegagalan, jadi gunakan peristiwa Onload untuk menanganinya.
6. Perluas fungsi array dan hapus elemen yang ditentukan
Salinan kode adalah sebagai berikut:
// Luas untuk menghapus elemen yang ditentukan
Array.prototype.deleteelement = function (obj) {
if (obj) {
untuk (var i = 0; i <this.length; i ++) {
if (this [i] === obj) {
this.splice (i, 1);
}
}
}
}
7. Pengaturan Timer, parameter pertama dari metode setInterval ("Fun", 1000) dapat berupa string, seperti "Hero.say ()", mirip dengan eval, akan menjalankan string kode ini, sehingga dapat memberikan Fungsi parameter atas dan juga menentukan konteks berjalan dari fungsi ini. Tetapi jika pass in adalah pegangan ke suatu fungsi, ia tidak dapat mengambil parameter dan konteksnya tidak dapat ditentukan.
Salinan kode adalah sebagai berikut:
// timer, berolahraga sendiri
this.timer = setInterval ((function (context) {
return function () {
Bullet.prototype.move.call (konteks)
}
}) (ini), 30);
Saya menyimpan lingkungan eksekusi saat ini dan memanggil metode panggilan untuk mengeksekusi secara manual.
8. Desain fungsional metode, selain fungsi, harus mencakup deteksi bersyarat dari fungsi ini, seperti MOVE, yang harus mencakup dalam keadaan apa yang dapat dipindahkan dan ke mana pun Anda tidak dapat bergerak. Deteksi ini tidak boleh ditempatkan secara eksternal.
9. Saat menulis kode, Anda tidak boleh memikirkan desain atau optimasi. Jelaslah dalam berpikir, jangan bingung, dan fokus pada satu hal.
10. JavaScript tidak memiliki fungsi tidur, Anda dapat membuat variabel sebagai buffer untuk mencapai tujuan eksekusi interval
2. Implementasi Kode
1. Program ini dibagi menjadi Bomb.js, Bullet.js, Draw.js, Tank.js, Index.html, IMG, Musik,
2. Efek akhir
3. Kode
1.index.html
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> </title>
<meta charset = "UTF-8">
<type style = "text/css">
tubuh {
Font: 14px "Sans-Serif"
}
#Map {
Latar Belakang-Color: #000000;
}
.menunjukkan {
Mengapung: Kiri
}
#memandu {
float: kiri;
Lebar: 200px;
Tinggi: 390px;
margin-kiri: 5px;
Latar Belakang: #CCCCCC;
padding: 5px;
}
</tyle>
<script type = "text/javascript" src = "tank.js"> </script>
<script type = "text/javascript" src = "Bullet.js"> </script>
<script type = "text/javascript" src = "bomb.js"> </script>
<script type = "text/javaScript" src = "draw.js"> </script>
<type skrip = "Teks/JavaScript">
window.onload = function () {
// informasi kanvas
width = document.geteLementById ('peta'). width;
height = document.geteLementById ('peta'). tinggi;
ctx = document.getElementById ('peta'). getContext ('2d');
// halaman awal
var starimg = gambar baru ();
starimg.src = "img/star.jpg";
starimg.onload = function () {
ctx.drawimage (starimg, 0, 0, lebar, tinggi);
}
// Pemantauan keyboard dan kembali untuk memulai permainan
document.body.onkeyDown = function () {
var keycode = event.keycode;
switch (keycode) {
Kasus 13:
// Parameter inisialisasi
init ()
// Segarkan halamannya
setInterval (Draw, 30);
document.body.onkeydown = gamecontrol;
merusak;
}
}
}
fungsi init () {
// Pemain dan Komputer
pahlawan = pahlawan baru (100, 300, 0);
musuh = [];
untuk (var i = 0; i <3; i ++) {
musuh.push (musuh baru (100 + i * 50, 0, 2));
}
// Gabungkan array
alltank = musuh.concat (pahlawan);
//bom
Bom = [];
im = gambar baru ();
im2 = gambar baru ();
im3 = gambar baru ();
im.src = "img/bomb_3.gif";
im2.src = "img/bomb_2.gif";
im3.src = "img/bomb_1.gif";
}
fungsi gamecontrol () {
var keycode = event.keycode;
switch (keycode) {
Kasus 65:
hero.moveleft ();
break; // kiri
Kasus 83:
Hero.Movedown ();
break; // selanjutnya
Kasus 87:
hero.moveup ();
Break; // on
Kasus 68:
hero.moveright ();
break; // benar
Kasus 74:
hero.shot ();
merusak;
Kasus 49:
hero.addlife ()
merusak;
}
}
// Luas untuk menghapus elemen yang ditentukan
Array.prototype.deleteelement = function (obj) {
if (obj) {
untuk (var i = 0; i <this.length; i ++) {
if (this [i] === obj) {
this.splice (i, 1);
}
}
}
}
</script>
</head>
<body>
<div>
<canvas id = "peta">
</ Canvas>
<audio id = "musik" autoplay = "autoplay">
<Source src = "Music/111.wav">
</audio>
</div>
<Div id = "Guide">
<p> Tekan Enter untuk memulai game </p>
<p> Tekan 1 tombol untuk meningkatkan kehidupan, standarnya adalah 1 </p>
<p> Hitungan hidup yang tersisa: <label id = "life"> 1 </label> </p>
<Div id = "Data">
</div>
</div>
</body>
</html>
2.draw.js
Salinan kode adalah sebagai berikut:
/**
* Dibuat oleh Alane pada 14-3-18.
*/
function draw () {
// Deteksi hidup dan kematian peluru dan tank
checkdead ();
// Bersihkan kanvas
ctx.clearrect (0,0.500.400);
// Gambar pemain
if (! hero.isdead) {
drawtank (pahlawan);
}kalau tidak{
hero.cutlife ();
}
// Gambar tank musuh
untuk (var i = 0; i <musuh
drawtank (musuh [i]);
}
// Gambarlah peluru musuh
untuk (var j = 0; j <musuh.length; j ++) {
var temp = musuh [j] .bulletslist;
untuk (var i = 0; i <temp.length; i ++) {
drawbullet (temp [i]);
}
}
// Gambarlah peluru pemain
var temp = hero.bulletslist;
untuk (var i = 0; i <temp.length; i ++) {
drawbullet (temp [i]);
}
// Gambar bom
untuk (var i = 0; i <bombs.length; i ++) {
drawbown (bom [i]);
}
}
function drawtank (tank) {
var x = tank.x;
var y = tank.y;
ctx.fillstyle = tank.color;
if (tank.direct == 0 || tank.direct == 2) {
ctx.fillrect (x, y, 5,30);
ctx.fillrect (x+15, y, 5,30);
ctx.fillrect (x+6, y+8, 8,15);
ctx.strokestyle = tank.color;
ctx.linewidth = '1.5';
if (tank.direct == 0) {
ctx.beginpath ();
ctx.moveto (x+10, y-2);
ctx.lineto (x+10, y+8);
ctx.closepath ();
}kalau tidak{
ctx.beginpath ();
ctx.moveto (x+10, y+24);
ctx.lineto (x+10, y+32);
ctx.closepath ();
}
ctx.stroke ();
}kalau tidak{
ctx.fillrect (x, y, 30,5);
ctx.fillrect (x, y+15, 30,5);
ctx.fillrect (x+8, y+6, 15,8);
ctx.strokestyle = '#ff0000';
ctx.linewidth = '1.5';
if (tank.direct == 3) {
ctx.beginpath ();
ctx.moveto (x-2, y+10);
ctx.lineto (x+8, y+10);
ctx.closepath ();
}kalau tidak{
ctx.beginpath ();
ctx.moveto (x+24, y+10);
ctx.lineto (x+32, y+10);
ctx.closepath ();
}
ctx.stroke ();
}
}
function drawbullet (Bullet) {
ctx.fillstyle = bullet.color;
ctx.beginpath ();
ctx.arc (bullet.x, bullet.y, 2.360, true);
ctx.closepath ();
ctx.fill ();
}
fungsi drawbown (obj) {
if (obj.life> 8) {
ctx.drawimage (im, obj.x, obj.y, 50,50);
} lain jika (obj.life> 4) {
ctx.drawimage (im2, obj.x, obj.y, 50,50);
}kalau tidak{
ctx.drawimage (im3, obj.x, obj.y, 50,50);
}
obj.lifedown ();
if (obj.life <= 0) {
Bom.deleteelement (OBJ);
}
}
function checkDead () {
// Deteksi kehidupan dan kematian peluru musuh
untuk (var j = 0; j <musuh.length; j ++) {
var temp = musuh [j] .bulletslist;
untuk (var i = 0; i <temp.length; i ++) {
var o = temp [i];
if (o.isdead) {
temp.deleteelement (o);
}
}
}
// Deteksi Player Bullet Life and Death
var temp = hero.bulletslist;
untuk (var i = 0; i <temp.length; i ++) {
var o = temp [i];
if (o.isdead) {
temp.deleteelement (o);
}
}
// Deteksi hidup dan kematian tangki musuh
untuk (var i = 0; i <musuh
var o = musuh [i];
if (o.isdead) {
musuh.deleteelement (o);
}
}
}
Bom.js
Salinan kode adalah sebagai berikut:
/**
* Dibuat oleh Alane pada 14-3-18.
*/
Function Bomb (x, y) {
this.life = 12;
this.x = x;
this.y = y;
}
Bomb.prototype.lifedown = function () {
hidup ini--;
}
Tank.js
Salinan kode adalah sebagai berikut:
/**
* Dibuat oleh Alane pada 14-3-7.
*/
/**
* Langsung 0 On
* 1 benar
* 2
* 3 tersisa
* @param x
* @param y
* @param Direct
* @constructor
*/
// ******************************************** ********************************************** ********************************************** ********************************************** ********************************************** ********************************************** ********************************************** ************************************************* ****************************/
// Tank Parent Class
Tank fungsi (x, y, langsung) {
this.speed = 2;
}
Tank.prototype.moveup = function () {
// Deteksi Perbatasan
if (this.y <0) {
// Ubah arah
this.changedirect ();
kembali;
}
this.y -= this.speed;
this.direct = 0;
}
Tank.prototype.movedown = function () {
if (this.y> tinggi - 30) {
this.changedirect ();
kembali;
}
this.y += this.speed;
this.direct = 2;
}
Tank.prototype.moveleft = function () {
if (this.x <0) {
this.changedirect ();
kembali;
}
this.x -= this.speed;
this.direct = 3;
}
Tank.prototype.moveright = function () {
if (this.x> width - 30) {
this.changedirect ();
kembali;
}
this.x += this.speed;
this.direct = 1;
}
// Ubah arah
Tank.prototype.changedirect = function () {
while (true) {
var temp = math.round (math.random () * 3);
if (this.direct! = temp) {
this.direct = temp;
merusak;
}
}
//alert("x="+This.x+ "y ="+this.y+"Direct ="+this.direct)
}
// tembak peluru
Tank.prototype.shot = function () {
if (this.isdead) {
kembali;
}
if (this.bulletslist.length <this.maxbulletsize) {
// Buat peluru baru
var Bullet = null;
switch (this.direct) {
Kasus 0:
Bullet = Bullet baru (this.x + 10, this.y - 2, 0, this.color);
merusak;
Kasus 1:
Bullet = Bullet baru (this.x + 32, this.y + 10, 1, this.color);
merusak;
Kasus 2:
Bullet = Bullet baru (this.x + 10, this.y + 32, 2, this.color);
merusak;
Kasus 3:
Bullet = Bullet baru (this.x - 2, this.y + 10, 3, this.color);
merusak;
}
// dimasukkan ke dalam majalah
this.bulletslist.push (Bullet);
}
}
// ******************************************** ********************************************** ********************************************** ********************************************** ********************************************** ********************************************** ********************************************** ************************************************* ****************************/
//Pemain
function hero (x, y, langsung) {
this.lifetimes = 5;
this.isdead = false;
this.color = '#ff0000';
this.x = x;
this.y = y;
this.direct = langsung;
this.bulletSlist = [];
this.maxBulletSize = 10;
this.newlife = null;
}
Hero.prototype = tangki baru (0, 0, 0);
Hero.prototype.constructor = pahlawan;
Hero.prototype.addlife = function () {
this.lifetimes ++;
Document.QuerySelector ("#Life"). InnerHtMl = Hero.lifetimes;
}
Hero.prototype.cutlife = function () {
if (this.lifetimes> = 1 &&! this.newLife) {
this.lifetimes--;
this.newlife = setTimeout ("hero.newlife ()", 2000);
}
}
Hero.prototype.newlife = function () {
this.isdead = false;
ClearTimeout (Hero.NewLife);
Hero.newlife = null;
Document.QuerySelector ("#Life"). InnerHtMl = Hero.lifetimes;
}
// ******************************************** ********************************************** ********************************************** ********************************************** ********************************************** ********************************************** ********************************************** ************************************************* ****************************/
// Tank musuh
function musuh (x, y, langsung) {
this.isdead = false;
this.color = 'blue';
this.x = x;
this.y = y;
this.direct = langsung;
this.bulletSlist = [];
this.maxBulletSize = 1;
// Timer, Gerakan Otomatis
this.timer1 = setInterval ((function (context) {
return function () {
//bergerak
Musuh.prototype.move.call (konteks);
}
}) (ini), 30);
// Timer, menembak
this.timer2 = setInterval ((function (context) {
return function () {
//penembakan
Tank.prototype.shot.call (konteks);
}
}) (ini), 2000);
// timer, ubah arah
this.timer3 = setInterval ((function (context) {
return function () {
//penembakan
Tank.prototype.changedirect.call (konteks);
}
}) (ini), 3000);
}
Musuh.prototype = tangki baru (0, 0, 0);
Musuh.prototype.constructor = musuh;
Musuh.prototype.move = function () {
switch (this.direct) {
Kasus 0:
this.moveup ();
merusak;
Kasus 1:
this.moveright ();
merusak;
Kasus 2:
this.movedown ();
merusak;
Kasus 3:
this.moveleft ();
merusak;
}
}
Bullet.js
Salinan kode adalah sebagai berikut:
/**
* Dibuat oleh Alane pada 14-3-11.
*/
Function Bullet (x, y, langsung, warna) {
this.isdead = false;
this.x = x;
this.y = y;
this.direct = langsung;
this.speed = 4;
this.color = warna;
// timer, berolahraga sendiri
this.timer = setInterval ((function (context) {
return function () {
Bullet.prototype.move.call (konteks)
}
}) (ini), 30);
}
Bullet.prototype.move = function () {
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;
}
// Deteksi Perbatasan
if (this.y <0 || this.x> lebar || this.y> tinggi || this.x <0) {
clearInterval (this.timer);
this.isdead = true;
}
// Deteksi tabrakan mendeteksi tank musuh
untuk (var i = 0; i <alltank.length; i ++) {
var temp = alltank [i];
if (temp.isdead) {
melanjutkan;
}
switch (temp.direct) {
Kasus 0:
Kasus 2: if (this.x> temp.x && this.x <temp.x+20 && this.y> temp.y && this.y <temp.y+30) {
if (this.color == temp.color) {
merusak;
}
Bom.push (bom baru (temp.x-10, temp.y-10));
clearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}merusak
Kasus 1:
Kasus 3: if (this.x> temp.x && this.x <temp.x+30 && this.y> temp.y && this.y <temp.y+20) {
if (this.color == temp.color) {
merusak;
}
Bom.push (bom baru (temp.x-10, temp.y-10));
clearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}merusak;
}
}
}
Unduh kode sumber