JavaScript Simulation Tank War Game (HTML5 เวอร์ชัน) พร้อมดาวน์โหลดซอร์สโค้ดดาวน์โหลด

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-11 01:00:03

1. สรุปประเด็นสำคัญและปัญหาที่พบ

1. การสืบทอดใน JavaScript มันเป็นสิ่งที่ดีที่สุดสำหรับคลาสหลักที่จะให้การแบ่งปันวิธีการเท่านั้นและคุณลักษณะจะถูกเขียนลงในคลาสย่อยของพวกเขาเพื่อหลีกเลี่ยงความสับสนของตัวสร้างของคลาสแม่และคลาสย่อย

2. ต้นแบบจำลองรหัสที่สืบทอดมาและควรเขียนก่อนคำจำกัดความของวิธีการทั้งหมด

การคัดลอกรหัสมีดังนี้:

hero.prototype = ใหม่ถัง (0, 0, 0);

Hero.prototype.constructor = Hero;

hero.prototype.addLife = function () {

this.lifetimes ++;

Document.QuerySelector ("#Life"). innerhtml = hero.lifetimes;

3. เมื่อผ้าใบวาดภาพกราฟิกยกเว้นสี่เหลี่ยมทุกอย่างจะต้องเพิ่มด้วย ctx.beginpath () และ ctx.closepath ();

4. ฟังก์ชั่น concat สามารถรวมอาร์เรย์หรือส่งคืนองค์ประกอบไปยังอาร์เรย์ใหม่

5. ภาพจะถูกโหลดหลังจากกำหนดแอตทริบิวต์ SRC แต่ถ้าภาพไม่ได้โหลดมันจะทำให้เกิดความล้มเหลวดังนั้นให้ใช้เหตุการณ์ OnLoad เพื่อจัดการ

6. ขยายฟังก์ชันอาร์เรย์และลบองค์ประกอบที่ระบุ

การคัดลอกรหัสมีดังนี้:

// ขยายเพื่อลบองค์ประกอบที่ระบุ

array.prototype.deleteElement = function (obj) {

ถ้า (obj) {

สำหรับ (var i = 0; i <this.length; i ++) {

ถ้า (นี่ [i] === obj) {

this.splice (i, 1);

7. การตั้งค่าตัวจับเวลาพารามิเตอร์แรกของเมธอด setInterval ("fun", 1000) สามารถเป็นสตริงได้เช่น "hero.say ()" คล้ายกับ eval ฟังก์ชั่นพารามิเตอร์ด้านบนและยังระบุบริบทการทำงานของฟังก์ชันนี้ แต่ถ้าการส่งผ่านเป็นที่จับกับฟังก์ชั่นมันไม่สามารถใช้พารามิเตอร์และบริบทไม่สามารถระบุได้นอกเหนือจากวิธีแรกในการแก้ปัญหาฉันใช้การปิดเพื่อแก้ปัญหานี้

การคัดลอกรหัสมีดังนี้:

// ตัวจับเวลาออกกำลังกายด้วยตัวเอง

this.timer = setInterval ((ฟังก์ชั่น (บริบท) {

return function () {

Bullet.prototype.move.call (บริบท)

}) (นี่), 30);

ฉันบันทึกสภาพแวดล้อมการดำเนินการปัจจุบันและเรียกวิธีการโทรเพื่อดำเนินการด้วยตนเอง

8. การออกแบบการทำงานของวิธีการนอกเหนือจากฟังก์ชั่นควรรวมถึงการตรวจจับแบบมีเงื่อนไขของฟังก์ชั่นนี้เช่นการย้ายซึ่งควรรวมถึงภายใต้สถานการณ์ที่สามารถเคลื่อนย้ายและทุกที่ที่คุณไม่สามารถเคลื่อนไหวได้ การตรวจจับนี้ไม่ควรวางไว้ภายนอก

9. เมื่อเขียนโค้ดคุณไม่ควรคิดถึงการออกแบบหรือการเพิ่มประสิทธิภาพ มีความชัดเจนในการคิดอย่าสับสนและมุ่งเน้นไปที่สิ่งหนึ่ง

10. JavaScript ไม่มีฟังก์ชั่นการนอนหลับคุณสามารถสร้างตัวแปรเป็นบัฟเฟอร์เพื่อให้บรรลุวัตถุประสงค์ของการดำเนินการตามช่วงเวลา

2. การใช้งานรหัส

1. โปรแกรมนี้แบ่งออกเป็น bomb.js, bullet.js, draw.js, tank.js, index.html, img, music, music, music, music, music

2. เอฟเฟกต์สุดท้าย

3. รหัส

1.index.html

การคัดลอกรหัสมีดังนี้:

<! doctype html>

<html>

<head>

ร่างกาย {

แบบอักษร: 14px "Sans-Serif"

#แผนที่ {

พื้นหลังสี: #000000;

.แสดง {

ลอย: ซ้าย

#แนะนำ {

ลอย: ซ้าย;

ความกว้าง: 200px;

ความสูง: 390px;

ขอบซ้าย: 5px;

ความเป็นมา: #CCCCCC;

ช่องว่าง: 5px;

</style>

window.onload = function () {

// ข้อมูลผ้าใบ

width = document.getElementById ('แผนที่'). ความกว้าง;

ความสูง = document.getElementById ('แผนที่'). ความสูง;

ctx = document.getElementById ('แผนที่'). getContext ('2d');

// หน้าเริ่มต้น

var starimg = ภาพใหม่ ();

starimg.src = "img/star.jpg";

starimg.onload = function () {

ctx.drawimage (starimg, 0, 0, ความกว้าง, ความสูง);

// การตรวจสอบคีย์บอร์ดและกลับไปเริ่มเกม

document.body.onkeydown = function () {

var keycode = event.keycode;

สวิตช์ (ปุ่ม) {

กรณีที่ 13:

// พารามิเตอร์การเริ่มต้น

init ()

// รีเฟรชหน้า

setInterval (วาด, 30);

document.body.onkeydown = gameControl;

หยุดพัก;

ฟังก์ชัน init () {

// ผู้เล่นและคอมพิวเตอร์

ฮีโร่ = ฮีโร่ใหม่ (100, 300, 0);

enemys = [];

สำหรับ (var i = 0; i <3; i ++) {

enemys.push (ศัตรูใหม่ (100 + i * 50, 0, 2));

// รวมอาร์เรย์

alltank = enemys.concat (ฮีโร่);

// ระเบิด

ระเบิด = [];

IM = ภาพใหม่ ();

im2 = ภาพใหม่ ();

im3 = ภาพใหม่ ();

im.src = "img/bomb_3.gif";

im2.src = "img/bomb_2.gif";

IM3.src = "img/bomb_1.gif";

ฟังก์ชั่น gamecontrol () {

var keycode = event.keycode;

สวิตช์ (ปุ่ม) {

กรณี 65:

Hero.moveleft ();

ทำลาย; // ซ้าย

กรณีที่ 83:

Hero.movedown ();

ทำลาย; // ถัดไป

กรณีที่ 87:

Hero.moveup ();

ทำลาย; // on

กรณี 68:

Hero.Moveright ();

ทำลาย; // ขวา

กรณี 74:

hero.shot ();

หยุดพัก;

กรณีที่ 49:

hero.addlife ()

หยุดพัก;

// ขยายเพื่อลบองค์ประกอบที่ระบุ

array.prototype.deleteElement = function (obj) {

ถ้า (obj) {

สำหรับ (var i = 0; i <this.length; i ++) {

ถ้า (นี่ [i] === obj) {

this.splice (i, 1);

</script>

</head>

<body>

<div>

</sanvas>

</เสียง>

</div>

<p> กด Enter เพื่อเริ่มเกม </p>

<p> กดปุ่ม 1 เพื่อเพิ่มอายุการใช้งานค่าเริ่มต้นคือ 1 </p>

<p> จำนวนชีวิตที่เหลืออยู่: <label id = "Life"> 1 </lable> </p>

</div>

</body>

</html>

2.Draw.js

การคัดลอกรหัสมีดังนี้:

* สร้างโดย Alane เมื่อวันที่ 14-3-18

ฟังก์ชั่นวาด () {

// การตรวจจับชีวิตและความตายของกระสุนและถัง

CheckDead ();

// ล้างผ้าใบ

CTX.ClearRect (0,0,500,400);

// วาดผู้เล่น

if (! hero.isdead) {

Drawtank (ฮีโร่);

}อื่น{

Hero.cutlife ();

// วาดรถถังศัตรู

สำหรับ (var i = 0; i <enemys.length; i ++) {

drawtank (enemys [i]);

// วาดกระสุนศัตรู

สำหรับ (var j = 0; j <enemys.length; j ++) {

var temp = enemys [j] .bulletslist;

สำหรับ (var i = 0; i <temp.length; i ++) {

drawbullet (temp [i]);

// วาดกระสุนของผู้เล่น

var temp = hero.bulletslist;

สำหรับ (var i = 0; i <temp.length; i ++) {

drawbullet (temp [i]);

// วาดระเบิด

สำหรับ (var i = 0; i <bombs.length; i ++) {

drawbown (ระเบิด [i]);

ฟังก์ชั่น drawtank (ถัง) {

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

}อื่น{

ctx.beginpath ();

ctx.moveto (x+10, y+24);

ctx.lineto (x+10, y+32);

ctx.closepath ();

ctx.stroke ();

}อื่น{

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

}อื่น{

ctx.beginpath ();

ctx.moveto (x+24, y+10);

ctx.lineto (x+32, y+10);

ctx.closepath ();

ctx.stroke ();

ฟังก์ชั่น drawbullet (กระสุน) {

ctx.fillstyle = bullet.color;

ctx.beginpath ();

ctx.arc (bullet.x, bullet.y, 2,360, จริง);

ctx.closepath ();

ctx.fill ();

ฟังก์ชั่น drawbown (obj) {

if (obj.life> 8) {

CTX.DrawImage (IM, OBJ.X, OBJ.Y, 50,50);

} อื่นถ้า (obj.life> 4) {

CTX.DrawImage (IM2, OBJ.X, OBJ.Y, 50,50);

}อื่น{

CTX.DrawImage (IM3, OBJ.X, OBJ.Y, 50,50);

obj.lifedown ();

if (obj.life <= 0) {

BOMBS.DeleteElement (OBJ);

ฟังก์ชั่น checkdead () {

// การตรวจจับชีวิตและความตายของกระสุนศัตรู

สำหรับ (var j = 0; j <enemys.length; j ++) {

var temp = enemys [j] .bulletslist;

สำหรับ (var i = 0; i <temp.length; i ++) {

var o = temp [i];

ถ้า (O.Isdead) {

Temp.DeleteElement (O);

// การตรวจจับชีวิตกระสุนและความตายของผู้เล่น

var temp = hero.bulletslist;

สำหรับ (var i = 0; i <temp.length; i ++) {

var o = temp [i];

ถ้า (O.Isdead) {

Temp.DeleteElement (O);

// การตรวจจับชีวิตและความตายของถังศัตรู

สำหรับ (var i = 0; i <enemys.length; i ++) {

var o = enemys [i];

ถ้า (O.Isdead) {

enemys.deleteElement (O);

BOMB.JS

การคัดลอกรหัสมีดังนี้:

* สร้างโดย Alane เมื่อวันที่ 14-3-18

ฟังก์ชั่นระเบิด (x, y) {

this.life = 12;

this.x = x;

this.y = y;

bomb.prototype.lifedown = function () {

นี่คือชีวิต-;

tank.js

การคัดลอกรหัสมีดังนี้:

* สร้างโดย Alane เมื่อวันที่ 14-3-7

* ตรง 0 บน

* 1 ขวา

* 2

* 3 ซ้าย

* @param x

* @param y

* @param โดยตรง

* @Constructor

// ***************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** ******************************************************** *********************** *********************************** **************************/

// ชั้นเรียนหลักของรถถัง

Function Tank (X, Y, Direct) {

this.speed = 2;

tank.prototype.moveup = function () {

// การตรวจจับชายแดน

if (this.y <0) {

// เปลี่ยนทิศทาง

this.changedirect ();

กลับ;

this.y -= this.speed;

this.direct = 0;

tank.prototype.movedown = function () {

if (this.y> ความสูง - 30) {

this.changedirect ();

กลับ;

this.y += this.speed;

this.direct = 2;

tank.prototype.moveleft = function () {

if (this.x <0) {

this.changedirect ();

กลับ;

this.x -= this.speed;

this.direct = 3;

tank.prototype.moveright = function () {

if (this.x> width - 30) {

this.changedirect ();

กลับ;

this.x += this.speed;

this.direct = 1;

// เปลี่ยนทิศทาง

tank.prototype.changedirect = function () {

ในขณะที่ (จริง) {

var temp = math.round (math.random () * 3);

if (this.direct! = temp) {

this.direct = temp;

หยุดพัก;

//alert("x="+this.x+ "y ="+this.y+"direct ="+this.direct)

// ยิงกระสุน

tank.prototype.shot = function () {

if (this.isdead) {

กลับ;

if (this.bulletslist.length <this.maxbulletsize) {

// สร้างกระสุนใหม่

bullet var = null;

สวิตช์ (this.direct) {

กรณี 0:

กระสุน = กระสุนใหม่ (this.x + 10, this.y - 2, 0, this.color);

หยุดพัก;

กรณีที่ 1:

กระสุน = กระสุนใหม่ (this.x + 32, this.y + 10, 1, this.color);

หยุดพัก;

กรณีที่ 2:

กระสุน = กระสุนใหม่ (this.x + 10, this.y + 32, 2, this.color);

หยุดพัก;

กรณีที่ 3:

กระสุน = กระสุนใหม่ (this.x - 2, this.y + 10, 3, this.color);

หยุดพัก;

// ใส่ในนิตยสาร

this.bulletslist.push (กระสุน);

// ผู้เล่น

ฟังก์ชั่นฮีโร่ (x, y, โดยตรง) {

this.lifetimes = 5;

this.isdead = false;

this.color = '#ff0000';

this.x = x;

this.y = y;

this.direct = โดยตรง;

this.bulletslist = [];

this.maxbulletsize = 10;

this.newlife = null;

hero.prototype = ใหม่ถัง (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;

ClearTimeOut (Hero.NewLife);

hero.newlife = null;

Document.QuerySelector ("#Life"). innerhtml = hero.lifetimes;

// ถังข้าศึก

ฟังก์ชั่นศัตรู (x, y, โดยตรง) {

this.isdead = false;

this.color = 'blue';

this.x = x;

this.y = y;

this.direct = โดยตรง;

this.bulletslist = [];

this.maxBulletsize = 1;

// ตัวจับเวลาการเคลื่อนไหวอัตโนมัติ

this.timer1 = setInterval ((ฟังก์ชั่น (บริบท) {

return function () {

//เคลื่อนไหว

Enemy.prototype.move.call (บริบท);

}) (นี่), 30);

// ตัวจับเวลายิง

this.timer2 = setInterval ((ฟังก์ชั่น (บริบท) {

return function () {

// การยิง

tank.prototype.shot.call (บริบท);

}) (นี่), 2000);

// ตัวจับเวลาเปลี่ยนทิศทาง

this.timer3 = setInterval ((ฟังก์ชั่น (บริบท) {

return function () {

// การยิง

tank.prototype.changedirect.call (บริบท);

}) (นี่), 3000);

enemy.prototype = New Tank (0, 0, 0);

ศัตรู. prototype.constructor = ศัตรู;

enemy.prototype.move = function () {

สวิตช์ (this.direct) {

กรณี 0:

this.moveup ();

หยุดพัก;

กรณีที่ 1:

this.moveright ();

หยุดพัก;

กรณีที่ 2:

this.movedown ();

หยุดพัก;

กรณีที่ 3:

this.moveleft ();

หยุดพัก;

BULLET.JS

การคัดลอกรหัสมีดังนี้:

* สร้างโดย Alane เมื่อวันที่ 14-3-11

ฟังก์ชั่นกระสุน (x, y, โดยตรง, สี) {

this.isdead = false;

this.x = x;

this.y = y;

this.direct = โดยตรง;

this.speed = 4;

this.color = color;

// ตัวจับเวลาออกกำลังกายด้วยตัวเอง

this.timer = setInterval ((ฟังก์ชั่น (บริบท) {

return function () {

Bullet.prototype.move.call (บริบท)

}) (นี่), 30);

bullet.prototype.move = function () {

สวิตช์ (this.direct) {

กรณี 0:

this.y -= this.speed;

หยุดพัก;

กรณีที่ 1:

this.x += this.speed;

หยุดพัก;

กรณีที่ 2:

this.y += this.speed;

หยุดพัก;

กรณีที่ 3:

this.x -= this.speed;

หยุดพัก;

// การตรวจจับชายแดน

if (this.y <0 || this.x> width || this.y> ความสูง || this.x <0) {

ClearInterval (this.timer);

this.isdead = true;

// การตรวจจับการชนกันตรวจจับถังข้าศึก

สำหรับ (var i = 0; i <alltank.length; i ++) {

var temp = alltank [i];

if (temp.isdead) {

ดำเนินการต่อ;

สวิตช์ (temp.direct) {

กรณี 0:

กรณีที่ 2: ถ้า (this.x> temp.x && this.x <temp.x+20 && this.y> temp.y && this.y <temp.y+30) {

if (this.color == Temp.Color) {

หยุดพัก;

bombs.push (ระเบิดใหม่ (Temp.x-10, Temp.Y-10));

ClearInterval (this.timer);

this.isdead = true;

temp.isdead = true;

}หยุดพัก

กรณีที่ 1:

กรณีที่ 3: ถ้า (this.x> temp.x && this.x <temp.x+30 && this.y> temp.y && this.y <temp.y+20) {

if (this.color == Temp.Color) {

หยุดพัก;

bombs.push (ระเบิดใหม่ (Temp.x-10, Temp.Y-10));

ClearInterval (this.timer);

this.isdead = true;

temp.isdead = true;

}หยุดพัก;

ดาวน์โหลดซอร์สโค้ด