ความคิดเห็น: ในบทความก่อนหน้านี้ฉันแนะนำวิธีใช้ HTML5 เพื่อใช้ถังขนาดเล็กมือถือ ในบทความนี้ฉันจะนำคุณเข้าสู่สงครามถัง เพื่อนที่ชอบ HTML5 ไม่ควรพลาด
<pre> tank.html </pre> <pre> <! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
</head>
<body onkeydown = "getCommand ();">
<H1> สงครามถังคลาสสิก HMTL5 </h1>
<!-สนามรบแห่งสงครามถัง->
<Canvas> </sanvas>
<span> data </span>
<!-แนะนำ tankgames.js ในหน้านี้->
<script type = "text/javascript" src = "tank.js"> </script>
<script type = "text/javascript">
// รับผ้าใบ
var canvas1 = document.getElementById ("tankmap");
// รับบริบทการวาด (คุณสามารถเข้าใจเป็นแปรงได้)
var cxt = canvas1.getContext ("2d");
// ฮีโร่รถถังของฉัน
//ทิศทาง
Var Hero = New Hero (140,140,0, Herocolor);
// กำหนดกระสุนเปล่า
var herobullet = null;
// กำหนดถังของศัตรู (มีรถถังศัตรูกี่คันมันมีคำจำกัดความเดียวหรือใส่ในอาร์เรย์?)
var enemyTanks = new Array ();
// ตายก่อนจากนั้นมีชีวิตอยู่ตั้ง 3 แล้วเราจะสร้างตัวแปรสำหรับจำนวนรถถังศัตรู
// 0-> บน, 1-> ขวา, 2-> ลง 3-> ซ้าย
สำหรับ (var i = 0; i <3; i ++) {
// สร้างถัง
var enemyTank = ใหม่ enemytank ((i+1)*50,0,2, enmeycolor);
// ใส่ถังนี้ลงในอาร์เรย์
EnemyTanks [i] = ENEMYTANK;
-
// เรียกมันครั้งเดียว
flashtankmap ();
// การเขียนฟังก์ชั่นพิเศษเพื่อรีเฟรชโซนการต่อสู้ของเราเป็นประจำและรวมถึงองค์ประกอบที่จะปรากฏในโซนการต่อสู้ (รถถังของตัวเอง, ถังข้าศึก, กระสุน, ระเบิด, ระเบิด, ระเบิด, ระเบิด, ระเบิด, ระเบิด, ระเบิด, ระเบิด, ระเบิด
//obstructions... )-> ความคิด
ฟังก์ชั่น flashtankmap () {
// การทำความสะอาดผืนผ้าใบ
CXT.ClearRect (0,0,400,300);
// ถังของฉัน
Drawtank (ฮีโร่);
// วาดกระสุนของคุณเอง
// เอฟเฟกต์การบินกระสุนปรากฏขึ้นอย่างไร? [คำตอบ: ก่อนอื่นเราควรรีเฟรชโซนการต่อสู้ทุกครั้ง (setInterval) หากกระสุนมีการเปลี่ยนแปลงเมื่อสดชื่นกระสุนปืนจะให้ความรู้สึกว่ากระสุนกำลังบินอยู่!]
drawherobullet ();
// ถังข้าศึก
// วาดรถถังศัตรูทั้งหมด
สำหรับ (var i = 0; i <3; i ++) {
Drawtank (ศัตรู enemytanks [i]);
-
-
// นี่คือฟังก์ชั่นที่ยอมรับการกดแป้นพิมพ์ของผู้ใช้
ฟังก์ชั่น getCommand () {
// ฉันจะรู้ได้อย่างไรว่าผู้เล่นกดปุ่มอะไร
// คำแนะนำ: วัตถุเหตุการณ์ -------> ฟังก์ชันตัวจัดการเหตุการณ์ ()
var code = event.keycode; // ascii code สำหรับตัวอักษรที่เกี่ยวข้อง-> ลองดูที่ตารางรหัส
สลับ (รหัส) {
กรณี 87: // บน
Hero.moveup ();
หยุดพัก;
กรณี 68:
Hero.Moveright ();
หยุดพัก;
กรณีที่ 83:
Hero.movedown ();
หยุดพัก;
กรณี 65:
Hero.moveleft ();
หยุดพัก;
กรณี 74:
Hero.Shotenemy ();
หยุดพัก;
-
// ทริกเกอร์ฟังก์ชั่นนี้ flashtankmap ();
flashtankmap ();
// ทาสีรถถังศัตรูทั้งหมด คุณสามารถเขียนโค้ดได้ที่นี่ (คิดว่าเรามีฟังก์ชั่นเฉพาะเพื่อรีเฟรชผืนผ้าใบของเราเป็นประจำ [เขตสงคราม])
-
// รีเฟรชโซนการต่อสู้ทุก ๆ 100 มิลลิวินาที
window.setInterval ("flashtankmap ()", 100);
</script>
</body>
</html> </pre>
tank.js
<pre> </der>
<pre> <pre> // เพื่อความสะดวกในการเขียนโปรแกรมเรากำหนดอาร์เรย์สองสี
var herocolor = new Array ("#ba9658", "#fef26e");
var enmeycolor = อาร์เรย์ใหม่ ("#00a2b5", "#00fefe");
// การขยายตัวของรถถังศัตรูอื่น ๆ ที่นี่ค่อนข้างดี
// กระสุนปืน
ฟังก์ชั่นกระสุน (x, y, โดยตรง, ความเร็ว) {
this.x = x;
this.y = y;
this.direct = โดยตรง;
this.peed = ความเร็ว;
this.timer = null;
this.islive = true;
this.run = function run () {
// เมื่อมีการแสดงพิกัดของกระสุนนี้ก่อนอื่นเราจะพิจารณาว่ากระสุนมาถึงขอบเขต
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// กระสุนต้องหยุด
window.clearinterval (this.timer);
// กระสุนตาย
this.islive = false;
}อื่น{
// สิ่งนี้สามารถใช้ในการปรับเปลี่ยนพิกัด
สวิตช์ (this.direct) {
กรณี 0:
this.y- = this.speed;
หยุดพัก;
กรณีที่ 1:
this.x+= this.speed;
หยุดพัก;
กรณีที่ 2:
this.y+= this.speed;
หยุดพัก;
กรณีที่ 3:
this.x- = this.speed;
หยุดพัก;
-
-
document.getElementById ("aa"). innerText = "Bullet x ="+this.x+"Bullet y ="+this.y;
-
-
// นี่คือคลาสรถถัง
Function Tank (X, Y, Direct, Color) {
this.x = x;
this.y = y;
this.speed = 1;
this.direct = โดยตรง;
// ถังต้องใช้สองสี
this.color = color;
// เลื่อนขึ้น
this.moveup = function () {
this.y- = this.speed;
this.direct = 0;
-
// ไปทางขวา
this.moveright = function () {
this.x+= this.speed;
this.direct = 1;
-
// เลื่อนลง
this.movedown = function () {
this.y+= this.speed;
this.direct = 2;
-
//ซ้าย
this.moveleft = function () {
this.x- = this.speed;
this.direct = 3;
-
-
// กำหนดคลาสฮีโร่
// x หมายถึงพิกัดแนวนอนของถัง y หมายถึงพิกัดแนวตั้งทิศทางโดยตรง
ฟังก์ชั่นฮีโร่ (x, y, โดยตรง, สี) {
// วัตถุประสงค์ของสองประโยคต่อไปนี้คือการบรรลุผลของการสืบทอดผ่านการเลียนแบบวัตถุ
this.tank = tank;
this.tank (x, y, โดยตรง, สี);
// เพิ่มฟังก์ชั่นในการยิงรถถังศัตรู
this.shotenemy = function () {
// สร้างกระสุนตำแหน่งของกระสุนควรเกี่ยวข้องกับฮีโร่และทิศทางของฮีโร่ ... !!!
//this.x เป็นพิกัดแนวนอนของฮีโร่ปัจจุบัน ที่นี่เราจะดำเนินการเพียง (ปรับแต่ง)
สวิตช์ (this.direct) {
กรณี 0:
herobullet = กระสุนใหม่ (this.x+9, this.y, this.direct, 1);
หยุดพัก;
กรณีที่ 1:
herobullet = กระสุนใหม่ (this.x+30, this.y+9, this.direct, 1);
หยุดพัก;
กรณีที่ 2:
herobullet = กระสุนใหม่ (this.x+9, this.y+30, this.direct, 1);
หยุดพัก;
กรณีที่ 3: // ถูกต้อง
herobullet = กระสุนใหม่ (this.x, this.y+9, this.direct, 1);
หยุดพัก;
-
// การเรียกกระสุนของเราวิ่ง 50 เป็นข้อสรุปที่ได้รับจากการทดสอบหลายครั้งของครู
var timer = window.setInterval ("herobullet.run ()", 50);
// กำหนดตัวจับเวลานี้ให้กับกระสุนนี้ (วัตถุ JS คือการอ้างอิงผ่าน!)
herobullet.timer = ตัวจับเวลา;
-
-
// กำหนดชั้นเรียนศัตรู
ฟังก์ชั่น enemytank (x, y, โดยตรง, สี) {
// มรดกถังโดยการแอบอ้างวัตถุ
this.tank = tank;
this.tank (x, y, โดยตรง, สี);
-
// วาดกระสุนของคุณเองและพูดอีกอย่างหนึ่งคุณสามารถห่อหุ้มฟังก์ชั่นลงในคลาสฮีโร่
ฟังก์ชั่น drawherobullet () {
// ที่นี่เราเพิ่มประโยค แต่คุณจำเป็นต้องรู้ว่าการเพิ่มที่นี่ต้องการให้คุณมั่นใจในโปรแกรมทั้งหมด
ถ้า (herobullet! = null && herobullet.islive) {
cxt.fillstyle = "#fef26e";
cxt.fillrect (herobullet.x, herobullet.y, 2,2);
-
-
// วาดถัง
ฟังก์ชั่น drawtank (ถัง) {
// พิจารณาทิศทาง
สวิตช์ (tank.direct) {
กรณี 0: // on
กรณีที่ 2: // ลง
// วาดถังของคุณเองและใช้เทคนิคการวาดก่อนหน้านี้
// ตั้งค่าสี
cxt.fillstyle = tank.color [0];
// ครูฮันใช้ความตายก่อน ---> จากนั้นใช้ชีวิต (ดีที่สุดสำหรับผู้เริ่มต้น)
// วาดสี่เหลี่ยมทางด้านซ้ายก่อน
cxt.fillrect (tank.x, tank.y, 5,30);
// วาดสี่เหลี่ยมทางด้านขวา (โปรดคิดเกี่ยวกับมันในเวลานี้ -> อย่าลืมมีจุดอ้างอิง)
cxt.fillrect (tank.x+15, tank.y, 5,30);
// วาดสี่เหลี่ยมตรงกลาง
cxt.fillrect (tank.x+6, tank.y+5,8,20);
// วาดฝาครอบถัง
cxt.fillstyle = tank.color [1];
cxt.arc (tank.x+10, tank.y+15,4,0,360, จริง);
cxt.fill ();
// วาดปืนใหญ่ (เส้นตรง)
cxt.strokestyle = tank.color [1];
// ตั้งค่าความกว้างของเส้น
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);
} อื่นถ้า (tank.direct == 2) {
cxt.lineto (tank.x+10, tank.y+30);
-
cxt.closepath ();
cxt.stroke ();
หยุดพัก;
กรณีที่ 1: // ขวาและซ้าย
กรณีที่ 3:
// วาดถังของคุณเองและใช้เทคนิคการวาดก่อนหน้านี้
// ตั้งค่าสี
cxt.fillstyle = tank.color [0];
// ครูฮันใช้ความตายก่อน ---> จากนั้นใช้ชีวิต (ดีที่สุดสำหรับผู้เริ่มต้น)
// วาดสี่เหลี่ยมทางด้านซ้ายก่อน
cxt.fillrect (tank.x, tank.y, 30,5);
// วาดสี่เหลี่ยมทางด้านขวา (โปรดคิดเกี่ยวกับมันในเวลานี้ -> อย่าลืมมีจุดอ้างอิง)
cxt.fillrect (tank.x, tank.y+15,30,5);
// วาดสี่เหลี่ยมตรงกลาง
cxt.fillrect (tank.x+5, tank.y+6,20,8);
// วาดฝาครอบถัง
cxt.fillstyle = tank.color [1];
cxt.arc (tank.x+15, tank.y+10,4,0,360, จริง);
cxt.fill ();
// วาดปืนใหญ่ (เส้นตรง)
cxt.strokestyle = tank.color [1];
// ตั้งค่าความกว้างของเส้น
cxt.lineWidth = 1.5;
cxt.beginpath ();
cxt.moveto (tank.x+15, tank.y+10);
// ไปทางขวา
if (tank.direct == 1) {
cxt.lineto (tank.x+30, tank.y+10);
} อื่นถ้า (tank.direct == 3) {// ไปทางซ้าย
cxt.lineto (tank.x, tank.y+10);
-
cxt.closepath ();
cxt.stroke ();
หยุดพัก;
-
-
</der>
<pre> </der>
</der>