1. Fassen Sie die wichtigsten Punkte und Probleme zusammen, die auftreten
1. Vererbung in JavaScript ist es am besten für die übergeordnete Klasse, nur Methodenfreigabe bereitzustellen, und die Attribute werden in ihre jeweiligen Unterklassen geschrieben, um die Verwirrung der Konstrukteure der übergeordneten Klasse und der Unterklasse zu vermeiden.
2. Prototyp simuliert den ererbten Code und sollte vor allen Methodendefinitionen geschrieben werden.
Die Codekopie lautet wie folgt:
Hero.Prototyp = neuer Tank (0, 0, 0);
Hero.Prototype.Constructor = Hero;
Hero.Prototype.AddLife = function () {
this.lifetimes ++;
document.querySelector ("#Life"). Innerhtml = Hero.Lifetimes;
}
3. Wenn die Leinwandgrafik mit Ausnahme von Rechtecken mit CTX addiert werden muss.
4. Die Konzernfunktion kann Arrays verschmelzen oder ein Element an ein neues Array zurückgeben
5. Das Bild wird geladen, nachdem das SRC -Attribut zugewiesen wurde. Wenn das Bild jedoch nicht geladen ist, verursacht es Fehler. Verwenden Sie also das Onload -Ereignis, um es zu verarbeiten.
6. Erweitern Sie die Array -Funktion und löschen Sie das angegebene Element
Die Codekopie lautet wie folgt:
//, um das angegebene Element zu löschen
Array.prototype.deleteElement = function (obj) {
if (obj) {
für (var i = 0; i <this.Length; i ++) {
if (this [i] === obj) {
this.splice (i, 1);
}
}
}
}
7. Timer -Einstellungen, der erste Parameter der Methode SetInterval ("Fun", 1000) kann eine Zeichenfolge wie "Hero.Say ()" sein, ähnlich wie bei Eval Funktion den oberen Parameter und gibt auch den laufenden Kontext dieser Funktion an. Wenn der Durchgang jedoch eine Funktion ist, kann er keine Parameter einnehmen und der Kontext kann nicht angegeben werden.
Die Codekopie lautet wie folgt:
// Timer, übe selbst
this.timer = setInterval ((Funktion (Kontext) {
return function () {
Bullet.prototype.move.call (Kontext)
}
}) (dies), 30);
Ich habe die aktuelle Ausführungsumgebung gespeichert und die Anrufmethode aufgerufen, um manuell auszuführen.
8. Das funktionale Design der Methode sollte zusätzlich zu den Funktionen eine bedingte Erkennung dieser Funktion enthalten, z. B. MOVE, die unter den Umständen enthalten ist, die bewegt werden können und wo immer Sie sich nicht bewegen können. Diese Erkennung sollte nicht extern platziert werden.
9. Wenn Sie Code schreiben, sollten Sie nicht über Design oder Optimierung nachdenken. Seien Sie klar im Nachdenken, seien Sie nicht verwirrt und konzentrieren Sie sich auf eine Sache.
10. JavaScript hat keine Schlaffunktion, Sie können eine Variable als Puffer erstellen, um den Zweck der Intervallausführung zu erreichen
2. Code -Implementierung
1. Dieses Programm ist in Bomb.js, Bullet.js, Draw.js, Tank.js, Index.html, IMG, Musik, Musik, unterteilt, Musik, Musik,
2. endgültiger Effekt
3. Code
1.Index.html
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> </title>
<meta charset = "utf-8">
<style type = "text/css">
Körper {
Schriftart: 14px "sans-serif"
}
#Karte {
Hintergrundfarbe: #000000;
}
.zeigen {
float: links
}
#Führung {
float: links;
Breite: 200px;
Höhe: 390px;
Rand-Links: 5px;
Hintergrund: #ccccc;
Polsterung: 5px;
}
</style>
<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>
<script type = "text/javaScript">
window.onload = function () {
// Canvas -Informationen
width = document.getElementById ('map'). width;
height = document.getElementById ('map'). Höhe;
ctx = document.getElementById ('map'). getContext ('2d');
// Initiale Seite
var starimg = new Image ();
starimg.src = "img/star.jpg";
starimg.onload = function () {
Ctx.Drawimage (Starimg, 0, 0, Breite, Höhe);
}
// Tastaturüberwachung und Rückkehr, um das Spiel zu starten
document.body.onkeydown = function () {
var keyCode = event.KeyCode;
Switch (KeyCode) {
Fall 13:
// Initialisierungsparameter
init ()
// die Seite aktualisieren
setInterval (zeichnen, 30);
document.body.onkeydown = gamecontrol;
brechen;
}
}
}
Funktion init () {
// Spieler und Computer
Held = neuer Held (100, 300, 0);
Feinde = [];
für (var i = 0; i <3; i ++) {
Enemys.push (neuer Feind (100 + i * 50, 0, 2));
}
// Array zusammenführen
Altank = Enemys.Concat (Held);
//Bombe
Bomben = [];
IM = new Image ();
IM2 = neues Bild ();
IM3 = neues Bild ();
im.src = "img/bomb_3.gif";
IM2.src = "img/bomb_2.gif";
IM3.src = "img/bomb_1.gif";
}
Funktion GameControl () {
var keyCode = event.KeyCode;
Switch (KeyCode) {
Fall 65:
Hero.Moveleft ();
brechen; // links
Fall 83:
Hero.Movedown ();
Break; // Weiter
Fall 87:
Hero.MoveUp ();
brechen; // on
Fall 68:
Hero.Moveright ();
brechen; // rechts
Fall 74:
Hero.Shot ();
brechen;
Fall 49:
Hero.AddLife ()
brechen;
}
}
//, um das angegebene Element zu löschen
Array.prototype.deleteElement = function (obj) {
if (obj) {
für (var i = 0; i <this.Length; i ++) {
if (this [i] === obj) {
this.splice (i, 1);
}
}
}
}
</script>
</head>
<body>
<div>
<canvas id = "map">
</canvas>
<audio id = "music" autoplay = "autoplay">
<Source Src = "Music/111.Wav">
</audio>
</div>
<div id = "Guide">
<P> Drücken Sie die Eingabetaste, um das Spiel zu starten </p>
<p> Drücken Sie 1 Taste, um die Lebensdauer zu erhöhen. Der Standard ist 1 </p>
<p> verbleibende Lebensanzahl: <label id = "life"> 1 </label> </p>
<div id = "data">
</div>
</div>
</body>
</html>
2.Draw.js
Die Codekopie lautet wie folgt:
/**
* Erstellt von Alane am 14-3-18.
*/
Funktion draw () {
// Erkennung von Leben und Tod von Kugeln und Panzern
checkdead ();
// die Leinwand löschen
ctx.clearRect (0,0,500.400);
// den Spieler zeichne
if (! Hero.isdead) {
Drawtank (Held);
}anders{
Hero.CutLife ();
}
// feindliche Panzer zeichnen
für (var i = 0; i <Enemys.length; i ++) {
Drawtank (Feinde [i]);
}
// feindliche Kugeln zeichnen
für (var j = 0; j <eghs.length; j ++) {
var temp = Feinds [j] .BulletsList;
für (var i = 0; i <temp.length; i ++) {
Drawbullet (Temp [i]);
}
}
// Zeichne die Kugel des Spielers
var temp = Hero.BulletsList;
für (var i = 0; i <temp.length; i ++) {
Drawbullet (Temp [i]);
}
// Bombe zeichne
für (var i = 0; i <bombs.length; i ++) {
Drawbown (Bomben [i]);
}
}
Funktionsabzugs (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 ();
}anders{
ctx.beginPath ();
ctx.moveto (x+10, y+24);
ctx.lineto (x+10, y+32);
ctx.closepath ();
}
ctx.stroke ();
}anders{
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 ();
}anders{
ctx.beginPath ();
ctx.moveto (x+24, y+10);
ctx.lineto (x+32, y+10);
ctx.closepath ();
}
ctx.stroke ();
}
}
Funktion drawbullet (Bullet) {
ctx.FillStyle = bullet.color;
ctx.beginPath ();
ctx.arc (bullet.x, bullet.y, 2.360, true);
ctx.closepath ();
ctx.fill ();
}
Funktion drawbown (obj) {
if (obj.life> 8) {
Ctx.Drawimage (IM, Obj.x, Obj.Y, 50,50);
} else if (obj.life> 4) {
ctx.drawimage (IM2, obj.x, obj.y, 50,50);
}anders{
ctx.drawimage (IM3, obj.x, obj.y, 50,50);
}
obj.lifedown ();
if (obj.life <= 0) {
Bombs.DeleteElement (OBJ);
}
}
Funktion checkdead () {
// Erkennung des Lebens und des Todes der feindlichen Kugel
für (var j = 0; j <eghs.length; j ++) {
var temp = Feinds [j] .BulletsList;
für (var i = 0; i <temp.length; i ++) {
var o = temp [i];
if (o.isdead) {
temp.deleteElement (o);
}
}
}
// Erkennung von Spielerleben und Tod von Spielern
var temp = Hero.BulletsList;
für (var i = 0; i <temp.length; i ++) {
var o = temp [i];
if (o.isdead) {
temp.deleteElement (o);
}
}
// Erkennung des Lebens und des Todes des feindlichen Panzers
für (var i = 0; i <Enemys.length; i ++) {
var o = Feindes [i];
if (o.isdead) {
Enemys.DeleteElement (o);
}
}
}
Bomb.js
Die Codekopie lautet wie folgt:
/**
* Erstellt von Alane am 14-3-18.
*/
Funktionsbombe (x, y) {
this.life = 12;
this.x = x;
this.y = y;
}
Bomb.Prototype.lifedown = function () {
this.life--;
}
Tank.js
Die Codekopie lautet wie folgt:
/**
* Erstellt von Alane auf 14-3-7.
*/
/**
* Direkt 0 auf
* 1 Recht
* 2
* 3 links
* @param x
* @param y
* @param direkt
* @Constructor
*/
//************************************************************ ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ************************************************ **************************//
// Tank übergeordnete Klasse
Funktionstank (x, y, direkt) {
this.speed = 2;
}
Tank.Prototype.MovEUp = function () {
// Grenzerkennung
if (this.y <0) {
// Richtung ändern
this.changedirect ();
zurückkehren;
}
this.y -= this.speed;
this.direct = 0;
}
Tank.Prototype.Movedown = function () {
if (this.y> Höhe - 30) {
this.changedirect ();
zurückkehren;
}
this.y += this.speed;
this.direct = 2;
}
Tank.Prototype.Moveleft = function () {
if (this.x <0) {
this.changedirect ();
zurückkehren;
}
this.x -= this.speed;
this.direct = 3;
}
Tank.Prototype.Moveright = function () {
if (this.x> width - 30) {
this.changedirect ();
zurückkehren;
}
this.x += this.speed;
this.direct = 1;
}
// Richtung ändern
Tank.Prototype.changedirect = function () {
while (wahr) {
var temp = math.round (math.random () * 3);
if (this.direct! = temp) {
this.direct = temp;
brechen;
}
}
//alert("x="+ this.x+ "y ="+this.y+"Direct ="+this.direct)
}
// Schuss Kugeln
Tank.Prototype.shot = function () {
if (this.isdead) {
zurückkehren;
}
if (this.bulletsList.length <this.maxbulletSize) {
// Erstellen Sie eine neue Kugel
var bullet = null;
Switch (this.direct) {
Fall 0:
Bullet = New Bullet (this.x + 10, this.y - 2, 0, this.color);
brechen;
Fall 1:
Bullet = New Bullet (this.x + 32, this.y + 10, 1, this.Color);
brechen;
Fall 2:
Bullet = New Bullet (this.x + 10, this.y + 32, 2, this.color);
brechen;
Fall 3:
Bullet = New Bullet (this.x - 2, this.y + 10, 3, this.Color);
brechen;
}
// in das Magazin eingeben
this.bulletsList.push (Bullet);
}
}
//************************************************************ ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ************************************************ **************************//
//Spieler
Funktionsheld (x, y, direkt) {
this.lifetimes = 5;
this.isdead = false;
this.color = '#ff0000';
this.x = x;
this.y = y;
this.direct = Direct;
this.bulletsList = [];
this.maxbulletSize = 10;
this.newLife = null;
}
Hero.Prototyp = neuer Tank (0, 0, 0);
Hero.Prototype.Constructor = Hero;
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;
Clearimeout (Hero.NewLife);
Hero.NewLife = null;
document.querySelector ("#Life"). Innerhtml = Hero.Lifetimes;
}
//************************************************************ ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ************************************************ **************************//
// feindlicher Panzer
Funktionsfeind (x, y, direkt) {
this.isdead = false;
this.color = 'blau';
this.x = x;
this.y = y;
this.direct = Direct;
this.bulletsList = [];
this.maxbulletSize = 1;
// Timer, automatische Bewegung
this.timer1 = setInterval ((Funktion (Kontext) {
return function () {
//bewegen
Enemy.Prototype.move.call (Kontext);
}
}) (dies), 30);
// Timer, Shooting
this.timer2 = setInterval ((Funktion (Kontext) {
return function () {
//Schießen
Tank.Prototype.shot.call (Kontext);
}
}) (this), 2000);
// Timer, Richtung ändern
this.timer3 = setInterval ((Funktion (Kontext) {
return function () {
//Schießen
Tank.Prototype.Changedirect.call (Kontext);
}
}) (dies), 3000);
}
Fegeemy.prototype = neuer Tank (0, 0, 0);
Enemy.Prototype.Constructor = Feind;
Enemy.Prototype.move = function () {
Switch (this.direct) {
Fall 0:
this.moveUp ();
brechen;
Fall 1:
this.moveright ();
brechen;
Fall 2:
this.movedown ();
brechen;
Fall 3:
this.Moveleft ();
brechen;
}
}
Bullet.js
Die Codekopie lautet wie folgt:
/**
* Erstellt von Alane am 14-3-11.
*/
Funktionsbullet (x, y, direkt, Farbe) {
this.isdead = false;
this.x = x;
this.y = y;
this.direct = Direct;
this.speed = 4;
this.color = color;
// Timer, übe selbst
this.timer = setInterval ((Funktion (Kontext) {
return function () {
Bullet.prototype.move.call (Kontext)
}
}) (dies), 30);
}
Bullet.prototype.move = function () {
Switch (this.direct) {
Fall 0:
this.y -= this.speed;
brechen;
Fall 1:
this.x += this.speed;
brechen;
Fall 2:
this.y += this.speed;
brechen;
Fall 3:
this.x -= this.speed;
brechen;
}
// Grenzerkennung
if (this.y <0 || this.x> width || this.y> Höhe || this.x <0) {
ClearInterval (this.timer);
this.isdead = true;
}
// Kollisionserkennung erkennt feindliche Panzer
für (var i = 0; i <alltank.length; i ++) {
var temp = alltank [i];
if (temp.isdead) {
weitermachen;
}
Switch (temp.direct) {
Fall 0:
Fall 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) {
brechen;
}
Bombs.push (neue Bombe (temp.x-10, temp.y-10));
ClearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}brechen
Fall 1:
Fall 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) {
brechen;
}
Bombs.push (neue Bombe (temp.x-10, temp.y-10));
ClearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}brechen;
}
}
}
Quellcode herunterladen