Dieser Artikel teilt den spezifischen Implementierungscode des JavaScript -Schreibens von Canvas -Version von Lianliankan Game für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Implementierungscode:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <title> < /title> <style> #box { /*Border: 1PX Solid #D1D1D1; */ Überlauf: versteckt; Position: Relativ; Padding-Bottom: 60px; } #bg {Hintergrundfarbe: RGBA (254,195,89, .2); } #mycanvas {Position: absolut; Oben: 36px; links: 0; } #toolsbar {width: 100%; Position: absolut; unten: 10px; links: 0; Überlauf: versteckt; } Taste {umriss: keine; Grenze: Keine; Breite: 100px; Höhe: 32px; Hintergrundfarbe: #D80049; Farbe: #fffff; Border-Radius: 5px; Rand-Rechts: 10px; Cursor: Zeiger; } #timeline {Höhe: 26px; Breite: 568px; Padding-Bottom: 10px; Hintergrund: URL (Bilder/Zeit_Slot-Hd.png) No-Repeat; Überlauf: versteckt; } #timeline span {display: block; Breite: 100%; Höhe: 100%; Anzeige: Flex; Überlauf: versteckt; } #timeline span: vor, #timeline span: After {display: block; Inhalt: ""; Höhe: 26px; Hintergrund: URL (Bilder/Zeit_Bars-hd.png) No-Repeat; } #timeline span: vor {width: 12px; } #timeline span: After { /*Breite: 100%;* / Hintergrundposition: Right Top; -Webkit-flex: 1; /*Margin-Top: -26px;*/} </style> </head> <body> <div id = "box"> <div id = "timeline"> <span> </span> </div> <div id = "ToolsBar"> <Button> RE-List (3) </button #00AA79; "> Pause </button> <button style =" margin-lind: 50px; src = "../../ public/js/jQuery-1.11.2.min.js"> </script> <script type = "text/javaScript" src = "control.js"> </script> <script type = "text/javascript" src = "matrix.js"> </script> <script text = "script"/script "/script =" text "/text/javascript" src = "src =" type = "text/javaScript" src = "map.js">/script> <script type = "text/javaScript"> $ (function () {var matrix = map_arr [parseInt (math.random ()*map_arr.Length); Matrix: _matrix.matrix, Dir: "Images/", Geschwindigkeit: 300}); E.Offsetx, y = e.offsety; if (count) {count--; $ (this) .Text ("Hinweis ("+count+")"); Controller.Boom ();}); Controller.Watch (Funktion (Prozent) {$ ("#Timeline span"). Breite (Prozent+"%");});}); </script>Quellcode -Download: Sehen Sie sich das Spiel in Lianlian an
Es gibt viele Entwicklungsbeispiele für JavaScript -Schreibspiele. Für Details können Sie sich auf das spezielle Thema "JavaScript Classic Mini Games Summary" beziehen, um zu lernen. Ich hoffe, es wird für Ihr Lernen hilfreich sein.