HTML5는 캔버스를 사용하여 폭발 기능 예제를 구현합니다

최근에 나는 폭발 비디오 웹 사이트를 개발하기 시작했고 HTML5에서 캔버스를 통해 사격의 기능을 달성했습니다.

그런 다음 가십에 대해 이야기하지 말고 먼저 생각에 대해 이야기합시다.

아이디어 : 페이지 레이아웃에서 비디오 태그로 생성 된 비디오 창의 캔버스를 다루며 절대 위치로 달성 할 수 있습니다. 가장 중요한 것은 JS 컨트롤 캔버스의 사격이 객체에 포함 된 속성이 사격이 나타나야합니다. 그리고 사격은 텍스트입니다. 사격 물체에는 다음이 포함됩니다. 구현 원리는 청취 비디오가 재생되기 시작하며, 동영상이 시작될 때 타이머가 생성됩니다 사격 코드, 타이머에는 총알 배열 업데이트 코드도 있습니다.

아래 그림은 사격 효과의 스크린 샷입니다.

그런 다음 코드를 직접 시작하십시오.

 (function () {window.onload = function () {var video = document.getElementsByTagName (video) [0] var cav = document.getElementsBytagName (캔버스) [0] // 상수 캔버스의 높이와 너비를 설정 = 800 var cavheight = 420 cav.width = cavwidth cav.height = cavheight var ctx = cav.getContext (2d) // 스토리지 배지 객체 var capobjs = [] var lastitemtime var 8 = 20 var inputele = document.getElementsByclassName (caption -input-text) [0] var sendele = document.getElementsByClassName (caption-sendButton) [0] var colorm = document.getElementsByClassName (colorItems) [0] ar ismoveInputele = document.getEmentsByClassName (caption-input-ismove) [ // 사격 색상 var colors = [#fff,#ffcccc,#ccffcc,#ccccff,#ccfffff] var selectColorIndex = 0 var prevplaytime = 0 // 테스트 데이터 // 캔버스 varitobjs = [{blank : true, value : 20, index : 0}, {blank : true, value : 50, index : 1}, {blank : true, value : 80, index : 2}, {blank : true, value : 110, index : 3}, {blank : true, value : 140, index : 4}, {blank : true, value : 170, index : 5}, { blank : true, value : 200, index : 6}, {blank : true, value : 230, index : 7}, {blank : true, value : 260, index : 8}, {blank : true, value : 290, 색인 : 9}, {blank : true, value : 320, index : 10}, {blank : true, value : 350, index : 11}, {blank : true, value : 380, index : 12}, {{{{{ blank : true, value : 410, index : 13}] // 데이터 테스트 데이터 테스트 데이터 var testarray = [{content : abcdefghijklmmnopqrstuvwxyz, time : 1, ismove : false, colorIndex : 0}, {conne, 텐트 : 233333333333333, 시간 : 2, ismove : true, colorindex : 0}, {내용 : 건식, hahaha ~~~~~~~, 시간 : 2, ismove : true, colorIndex : 5}, {content : dry, hahaha ~~~~~ 시간 : 시간 : 2, ismove : true, colorindex : 4}, {내용 : 건식 토스트, 하하하 ~~~~~~~, 시간 : 2, Ismove : true, colorindex : 4}, {내용 : 건조 토스트, 하하하 ~~~ ~ ~~ ~, 시간 : 2, ISMOVE : True, ColorIndex : 0}, {내용 : 건식 토스트, 하하하 ~~~~~~, 시간 : 2, Ismove : True, ColorIndex : 0}, {내용 : 233333333333333, 시간 : 3, ISMOVE : True, ColorIndex : 0}, {내용 : 233333333333333, 시간 : 3, ISMOVE : True, ColorIndex : 0}, {내용 : 233333333333333, 시간 : 3, Ismove : T : T Rue, ColorIndex : 0}, {Content : 2333333333333333, 시간 : 3, ismove : true, colorIndex : 0}, {내용 : 2333333333, 시간 : 3, ismove : true, colorIndex : 0}, {내용 : 23333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333 명까지 : 0}, {내용 : 2333333333333333, 시간 : 4, ISMOVE : FALSE, COLORINDEX : 0}, {CO NTENT : 233333333333333, TIME : 5, ISMOVE : TRUEX : 4}, {컨퍼런스 : {컨퍼런스 : 23333333333333333333333333333333333333333333333333333333333333, 시간 : ISMOVE : True, ColorIndex : 2}, {내용 : 233333333333333, 시간 : 7, ismove : true, colorIndex : 2}, {내용 : 2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333, 시간 : 7, ismove : true, colorindex : 2}, {내용 : 2333333333333333, 시간 : 7, Ismov E : True, ColorIndex : 2}, {내용 : 233333333333333, Time : 7, True : True, ColorIndex : 2 }, {내용 : 233333333333333, 시간 : 7, ISMOVE : TRUE, COLORINDEX : 2}, {내용 : 2333333333333333, 시간 : 8, ISMOVE : 0}, {컨텐츠 : 23333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333 명, 시간 : True, ColorIndex : 0}, {내용 : 23333333333333, 시간 : 10, ISMOVE : True, ColorIndex : 0}, {Content : 교사가 매우 잘 말했고, 열심히 공부하고 싶다 ",", ", Ismove : Ismove : true, colorIndex : 0}, {content : 老师说的非常好 老师说的非常好, 我要好好学习了》》》》, 시간 : 13, ismove : true, colorIndex : 0}, {content : 老师说的非常好 老师说的非常好, 我要짐 ColorIndex : 0}, {내용 : 교사 : 교사는 아주 잘 말했고, 열심히 공부하고 싶습니다. "" "" "", ismove : true, colorIndex : 3}, {내용 : 교사가 아주 잘 말했고, 열심히 공부하고 싶습니다 "" "" "" "", 시간 : 18, ismove : true, colorIndex : 2}, {내용 : 선생님이 매우 잘 말했고, 열심히 공부하고 싶습니다 "" "" "", 시간 : 19, Ismove : True, ColorIndex : 0}, {내용 : 교사가 잘 말하고, 공부하고 싶습니다 "" " "", 20, ismove : true : true : true : true : true : true : true : true : true : true : true : true : true : true : true : true : true : true : true : true, colorIndex : 3}, {내용 : 교사가 아주 잘 말했고, 열심히 공부하고 싶습니다. 잘 지내고 싶어요 작은 로켓은 브러시가 닦여 있습니다 ===========, 시간 : 23, ismove : true, colorIndex : 0}, {내용 : 오래된 철, 작은 선물은 파도를 잡았고, 작은 로켓은 브러시를 닦았습니다 ===== =============== : True, ColorIndex : 0}, {컨텐츠 : 오래된 철, 작은 선물은 파도를 가져 갔고, 작은 자동차 로켓 브러시 업 =======, 시간 : 25, ISMOVE : True, ColorIndex : 3 : 3}, {내용 : 오래된 철, 작은 선물이 파도를 잡았고, 작은 로켓은 브러시가 닦았습니다 =============== 26, Ismove : True, ColorIndex : 0}, {내용 : 구식 : 오래된 철, 작은 선물은 파도를 찍었고, 차의 작은 로켓은 브러시가 닦았습니다 ==========, 시간 : 27, ismove : true, colorIndex : 5} , {내용 : 구식 철, 작은 선물은 파도입니다, 작은 자동차 로켓 브러시 iT ========================================================= =================================================== =================================================== = 일반 차는 차입니다. 차는 차가 브러시를위한 작은 로켓입니다 ============================================================== =================================================== =================================================== ======================================, Ismove : Trutex의 오래된 로켓 ======= =, Time : 30, Ismove : True, ColorIndex : 5}, {내용 : 수업 직후에 Varo Lan이 올라갑니다 ~~~, 시간 : 31, Ismove : True, ColorIndex : 5}, {내용 : I 'm 바로 수업에 가면 varo blue 컨스트리트가 일어나 ~~~, 시간 : 32 : true, colorIndex : 2}, {content : 바로 바로 바로 블루 대륙이 올라가서 ~~~입니다. 시간 : 33, Ismove : True, ColorIndex : 2}, {내용 : 수업 직후, 바로 블루 대륙은 ~~~, 시간 : 33, ismove : true, colorIndex : 5}, {내용 : 클래스가 오른쪽에 있습니다. Away, Varo Lan은 시간 : 35, Ismove : True, ColorIndex : 5}, {Content : 바로 수업에서 나올 것입니다. Varo Blue Continent는 ~~~, 시간 : 36, ISMOVE : TRUE, COLORINDEX : 2}, {내용 : 바로 : 바로 수업 직후에 바로 바로 바로, 바로 란 ​​본토가 등장했습니다 ~~~, 시간 : 37, ISMOVE : True, ColorIndex : 2}] // 테스트 데이터 뒤로 , TestArayCopy) /*바비이트 물체, 매개 변수, 매개 변수, 매개 변수는 다음과 같습니다. 1.Ismove : 사격이 이동 사격인지, 2.spe : 사격의 움직임 속도, 3.col : 사격의 색, 4 .Text : 사격 텍스트* / /*프로토 타입 체인 메소드 SETTOPVALUE SETTECTION 좌표를 설정하고, setleftValue는 수평 좌표를 설정하고, 움직임은 좌표 변경을 완료하고, setID는 ID 값 설정* / function capption (ISMOVE, SPE, ISMOVE, SPE, col, text) {this.ismove this.color = col || .TopIndex = 0 this.occupypos = true this.top = 300 this.left = 0 this .setValue () this.setTopValue ()} caption.protople.setTopValue = function () {for (var i = 0, len = topobjs 길이; i len; if (topo bjs [i] .blank) {value this.topindex = i]. .prototype.setleftValue = function () {if (this.is.is.is.is move) {this.left = cavwidth} else {var contentlength = this.content.length var nowitemleft = 420 -ContentLength * 9 this.left = nowitemleft}} caption = function () {if (this.ismove) {this.left + this.width <cavwidth && orpockypos) {this.occupypos = false topobjs [this. topIndex] .blank = true}} time += 1 if (this.latesttime> 450) {topobjs [this.topindex] .blank = true}}} cappion.protople.setid = function () {this.id = capobjid capobjid ++} var cap1 = 새로운 캡처 (F. alse, 1, 0, 작은 선물은 파도를, 이중 -Click 6666을 가져갑니다. 본질 본질 본질 ) capobjs.push (cap1) cap1.setId () // 배열에 동그라미를 잡고 (for (for (var i = 0의 경우, len = capobjs. length; i <len; i ++) {ctx.fillstyle = capobjs [i] .color ctx.font = bold 20px 택배 new ctx.filltext [capobjs i]. capobjs.splice (i, 1) / / / /이 명령문은 배열의 항목이 null이면 결함이 있습니다. 솔루션은 다음과 같습니다. 배열을 새로 고치는 새로운 함수 작성 //}} // 배열 업데이트, 개체 객체 기능이 나올 때 이미 슈퍼 슈퍼 삭제 IS 객체 함수 refreshobjs (objs) {for (var i = objs.length -1; i> = 0; i-) {if (ibjs [i] .let < -cavwidth || [i] .time) if (nowitemtime == now) {// 컨트롤의 첫 번째 제어 높이로는 충분하지 않았으며 SettoPvalue의 공간 방식이 충분하지 않았습니다. difftime = math.abs (nowitemtime -lastitemtime) // if (difftime <6) {// capheight += 30 // capheight> 400 : capeight / /} var temcolor = colors [i]. colorIndex] varge temcap = new 캡션 (testArray [i] .Smove, temcolor, testArray [i] .content)) capobjs [capobjs.length-1] .setid () temcap = null testarray.splice (i, 1)}} // 사용자가 sendcaption (argument)의 콜백 함수를 클릭하면 {var inputeletxt = inputele.value var w = parseint (video .currenttime) var inputismovalue = ismoveinputele.checked var temobj = {content : inputeletxt, time : ismove : inputismovalue, colororIndex : s ElectedColorIndex} testarray.push (temobj) inputle.value =} // 함수 getleftValue (obj) {// if (obj.ismove) {// return 0 //} // else {// contactlength = obj.content.length // var notemleft = 420 -ContentLength * 9 // nowited //} //} // 캔버스를 다시 시작하여 reinitcav (argument) {// testarray copyarray (testaraycopy , testArray) capeight = 0 0 0 ClearInterval (Canvastimer) Canvastimer = null initcanvas ()} var canvastimer = null // 재생을 시작할 때 initcanvas () {if (canvastimer == null) {canvastImer = setInterval (argument) {drawalltext () updatearrr ay () refreshobjs (capobjs}, 10)} // end function initcanvas // 배열 함수 coverray (arr1, arr2) {for (var i = 0, len = arr1 길이; i len; arr2 [i] = color select ehver evid eMID = colorItemFrist break; 사례 2 : COLORORITEMPOUNFOURTH BREAK; = var eventtarget = e.target eventtarget.classname = selectColor var evetarid = eventTarget.substring (evetarid) {selectedcolorInde x = 0 Case : selectedcolorIndex = 2 break; 사례 4 : SelectedColorIndex = 4 Break; }) // 프로그레시브 스트립은 실행 코드 video.AdDeventListener (timeUpdate, function () {var nowplaytime = video.currentTime var diftime = mathtime = mathplaytime = nowplaytime if (difftime> 1) {ReinitCav (ReinitCav )}}, false) // 실행 코드 video.addeventListener (pause, function () {clearInterval (Canvastimer) canvastimer = null}) ck, sendcaption) // 입력 입력 입력 입력 inputdele.addeventListener (keydown, function) e) {var keynum = 0 keynum = wind /function b (aaaa) {// return aaaa () //} // b ()} // end})

사격을 원하는 학생들을 도울 수 있기를 바랍니다. Github로 가서 전체 프로젝트 코드를 다운로드 할 수도 있습니다. Gitbub 프로젝트 주소

위는이 기사의 모든 내용입니다.