HTML ใช้ผ้าใบเพื่อให้ได้ฟังก์ชั่นการโจมตี

เมื่อเร็ว ๆ นี้คุณต้องสร้างผู้เล่น Barrage เมื่อคุณทำการบ้านครั้งใหญ่ ฉันจำรหัสแหล่งที่มาของผู้อื่นและได้รับการรับรองใหม่และการสาธิตมีดังนี้

เรือ

ตั้งค่าสีความเร็วและประเภทของเขื่อน

แสดง Barrage

ไม่สามารถเต็มหน้าจอ

ผ้าใบไม่ได้ปรับให้เข้ากับการปรับตัว

ไม่มีการควบคุมผู้เล่นที่กำหนดเอง

เขื่อนที่สอดคล้องกันจะไม่ปรากฏขึ้นตามเวลาเล่น

ไม่สามารถระงับการโจมตีได้

ข้อบกพร่องที่รู้จักจะได้รับการปรับปรุงในอนาคต ซอร์สโค้ดของผู้เล่น Barrage ที่สามารถพบได้บนอินเทอร์เน็ตโดยทั่วไปจะทำให้เกิดการระดมยิงโดยไม่มีการโจมตีแบบคงที่

แกนกลางของผู้เล่นทั้งหมดคือการวาดข้อความและสร้างแอนิเมชั่นม้วนข้อความ

ก่อนอื่นเพิ่มแท็กวิดีโอวิดีโอและสายเคเบิลผ้าใบในไฟล์ HTML

 <div id = barragePlayer> <canvas id = cv_video width = 900px height = 450px> </canvas> <video id = v_video src = test.mp4 controls = video/mp4>/video> </div>

กำหนดรูปแบบตำแหน่งของแท็กผ้าใบเป็นบวก: Absolute และจากนั้นวิดีโอและผ้าใบจะถูกซ้อนทับกัน จากนั้นเพิ่มเนื้อหาของ Barrage ไปยังผืนผ้าใบ

 var c = document.getElementById (CV_VIDEO); ได้รับและตั้งค่าข้อมูลผ้าใบและผู้หญิงที่ฉลาดก็ยากที่จะทำอาหารโดยไม่ต้องทำข้าว , spey) {this.content = เนื้อหา; if (this.type == ด้านบนคงที่) {this.head = parseint ((c_height/2) -math.random ()*c_height/2) +10;} อื่นถ้า (this.type == ttom คงที่) {นี้ .Height = ParseInt ((c_height/2) +math.random ()*c_height/2) +10;} ถ้า (typeof this.move! = ฟังก์ชั่น) {barrage.prototype.move type == ค่าเริ่มต้น) {this.left = this.left- this.speed;}}}}}

วัตถุที่สร้างขึ้น Barrage เริ่มต้นพารามิเตอร์ต่าง ๆ รวมถึงเนื้อหาสีประเภทการเคลื่อนไหวและความเร็วการกำหนดวิธีการย้าย () เพื่อควบคุมการเคลื่อนที่ของการโจมตีแต่ละวิธีการเคลื่อนที่ () ของการหมุนความเร็วหน่วยไปทางซ้ายทุกครั้งเพื่อออกจากซ้าย วิธีซ้ายไปทางซ้าย

หลังจากตัวสร้างของวัตถุ Barrage เสร็จสิ้นชุดรูปแบบจะถูกป้อนการผลิตภาพเคลื่อนไหวโดยตรงบนรหัส

 // วงกลมและผืนผ้าใบเพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหว setInterval (ฟังก์ชัน () {ctx.clearrect (0,0, c_width, c_height); ctx.save (); สำหรับ (var i = 0; i <msgs.length; i +; +) {) {) {ถ้า (msgs [i]! = null) {ถ้า (msgs [i] .type == ค่าเริ่มต้น) {handledefault (msgs [i]);} else {handlestate (msgs [i]); }}}}, 20)

ดำเนินการทุก ๆ 20ms, ctx.clearrct (0,0, c_width, c_height); ลบผืนผ้าใบปัจจุบันทั้งหมดแล้วบันทึกผ้าใบปัจจุบันด้วย ctx.save () แล้วสำรวจรายการระดม Barrage List เมื่อมีการส่งการโจมตีอินสแตนซ์ของ Barrage จะถูกเพิ่มลงในรายการ) จากนั้นประมวลผลแยกต่างหากตามการโจมตีของสไตล์เริ่มต้นหรือสไตล์คงที่ หากเป็น Barrage สไตล์เริ่มต้นมันจะถูกประมวลผลตามวิธีการต่อไปนี้

 // ประมวลผลฟังก์ชั่นสไตล์การโจมตีเริ่มต้น HandleDefault (Barrage) {ถ้า (barrage.left == undefined || barrage.left == null) {barrage.left = c.width;} อื่น (Barrag E.left <-200) {barrage = null;} else {barrage.move () ctx.fillstyle = barrage.color;

ก่อนอื่นหากอินสแตนซ์ของ Barrage ไม่ได้ตั้งค่าแอตทริบิวต์ด้านซ้ายความกว้างของผ้าใบจะถูกมอบให้ ของอินสแตนซ์ Barrage เพื่อเปลี่ยนค่าของแอตทริบิวต์ด้านซ้ายจากนั้นตั้งค่าสีของข้อความเขียนข้อความใหม่ในระดับแรกและกู้คืนผืนผ้าใบ สิ่งนี้ทำให้เฟรมของแอนิเมชั่นเสร็จสมบูรณ์

วิธีการใช้งานของการโจมตีแบบคงที่มีดังนี้

 // การรักษาฟังก์ชั่นการโจมตีแบบคงที่ (Barrage) {ctx.moveto (c_width/2, barrage.height); 2. Barrage.height); ถ้า (barrage.left == undefined || barrage.left == null) {barrage.left = c.width;} else {ถ้า (barrage.left <-200) (xt (, c_width/2, barrage.height); barrage = null; // ctx. store (); ctx.clearrect (0,0, c_width, c_height);} else {barrage.left = barrage.left-6 ;}}}

ก่อนอื่นจุดพื้นฐานของผืนผ้าใบถูกย้ายไปที่ศูนย์กลางของผ้าใบ ไปยังผืนผ้าใบนี้ จากนั้นตั้งค่าการจัดตำแหน่งข้อความให้เข้ากับการจัดตำแหน่งกลางตั้งค่าสไตล์ข้อความและกรอกข้อความ เนื่องจากการโจมตีนั้นคงที่จึงไม่จำเป็นต้องชะลอตัวลง แต่การโจมตีแบบคงที่จะหายไป เพื่อไม่ให้ครอบครองแอตทริบิวต์เพิ่มเติมที่นี่เราใช้แอตทริบิวต์ด้านซ้ายโดยตรงเป็นตำแหน่งโลโก้ซึ่งจะลดแอตทริบิวต์ด้านซ้าย ด้วยวิธีนี้การประมวลผลของการโจมตีแบบคงที่

คนอื่น ๆ ที่มีรากฐานบางอย่างเกี่ยวกับการตั้งค่าสีและสไตล์ควรเป็นเรื่องง่ายที่จะเชี่ยวชาญและไม่แนะนำที่นี่

โครงการนี้ส่วนใหญ่ใช้ผ้าใบสำหรับการวาดข้อความและภาพเคลื่อนไหวช้าของข้อความ

 canvasdom.getConotext () canvas.save () /canvas.restore () canvas.clearrect () canvas.moveto ()

ปรากฎว่าฉันไม่สามารถเข้าใจได้ด้วย Save () และ RESTORE () ตอนนี้ฉันมีความเข้าใจเล็กน้อย ก่อนที่จะแก้ไขสถานะของ Canvas เช่นเดียวกับเมื่อฉันจัดการกับการโจมตีแบบคงที่จุดพื้นฐานของผืนผ้าใบได้รับการเปลี่ยนแปลงดังนั้นวิธีการกวาดล้างของผืนผ้าใบดั้งเดิมจึงไม่สามารถใช้ได้กับผืนผ้าใบปัจจุบันอีกต่อไป จากนั้นกลับไปที่ผืนผ้าใบดั้งเดิม

รหัสกำลัง

 <! UAA -compatible content = ie = edge> <title> เอกสาร </title> </head> <style type = text/css> .pickdiv {width: 30px; inline-black;} #white {background: White;} #red {background: #ff6666;} #yellow {พื้นหลัง: #ffff00;} #blue { #333399;} #green {พื้นหลัง: #339933;} #cv_video ตำแหน่ง: Absolute; ;} </style> <body> <div id = barragePlayer> <mvas id = cv_video width = 900px ความสูง = 450px> </anvas> <video id = v_video src = ทดสอบ. mp4 controls = video/mp4> วิดีโอ> </div> <div id = barrageInput> <div> <ประเภทอินพุต = text id = smsg placeholder = โปรดป้อนเนื้อหา Barrage/> <button id = ส่ง> </button> </div> <div id = colorpick> <div class = pickdiv id = สีขาว> </div> <div class = pickdiv id = สีแดง> </div> <div class = pickdiv id = สีเหลือง> </div> </div> div class = pickdiv id = สีน้ำเงิน> </div> <div class = pickdiv id = green> </div> </div> <div id = typepick> <อินพุตประเภท = ชื่อวิทยุ = type = defaul t> โดยค่าเริ่มต้น <อินพุตประเภท = ชื่อวิทยุ = ค่าประเภท = ค่าคงที่> ด้านบนคงที่ <อินพุตประเภท = ชื่อวิทยุ = ค่าประเภท = ด้านล่างคงที่> ด้านล่างคงที่ </div> <div id = speedpick> <อินพุตประเภท = ชื่อวิทยุ = ค่าความเร็ว = 1> 1x <ประเภทอินพุต = ชื่อวิทยุ = ค่าความเร็ว = 2> 2x <อินพุตประเภท = ชื่อวิทยุ = ค่าความเร็ว = 3> 3x </div> <div id = stylepick> </div> <script> var c = document.getElementById (CV_VIDEO); var typedom = document.getElementByName (ประเภท); 1; AddEventRistener ('คลิก', ฟังก์ชั่น) {Switch (Event.target.id) {Case White: Color = White Break; color =#339933; ความยาว; speeddom [i] .checked) {speed = 2*parseint (speeddom [i]. ค่า); ;} // // ฟังก์ชั่นของชิ้นส่วน Barrage // // วัตถุ Barrage (เนื้อหา, สี, ประเภท, ความเร็ว) {this.content = เนื้อหา; = ความเร็ว; ถ้า (this.type == ค่าเริ่มต้น) {this.height = paraseint (math.random ()*c_hei ght) +10;} อื่น parseint ((c_height/2) -math.random ()*c_height/2) +10;} อื่นถ้า (this.type == ด้านล่างคงที่) {th คือ. height = parseint ((c_height/2) ()*c_height/2) +10;} ถ้า (typeof this.move! = ฟังก์ชั่น) {barrage.prototype.move = fuins {ถ้า (this. type == ค่าเริ่มต้น) {this.left = this.left-this ความเร็ว;}}} // วงกลมผืนผ้าใบของเอฟเฟกต์แอนิเมชั่น setInterval ;; ctx.save (); null) {if (msgs [i] .type == ค่าเริ่มต้น) {handleDefault (msgs [msgs [i]);} else {handlestatic (msgs [i]);}}}, 20) // ดำเนินการสไตล์ Barrage เริ่มต้น ฟังก์ชั่น HandleDefault (Barrage) {if (barrage.left == undefined || barrage.left == null) {barrage.left = c.width;} else {ถ้า (barrage.left <-200) {barrage = null;}} else {barrage.move () ctx.fillstyle = barrage.color; {ctx.moveto (c_width/2, barrage.height); c tx.textalign = center; ซ้าย == undefined || barrage.left == null) {barrage.left = c = null;

ข้างต้นเป็น HTML ที่แนะนำโดยบรรณาธิการให้คุณใช้ Canvas เพื่อใช้งานฟังก์ชั่น Barrage ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!