Este artículo comparte el código de implementación específico de JavaScript escribiendo la versión de lienzo del juego Lianliankan para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código de implementación:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style> #box { /*border: 1px sólido #d1d1d1; */ desbordamiento: oculto; Posición: relativo; Botón de relleno: 60px; } #bg {Background-Color: RGBA (254,195,89, .2); } #mycanvas {posición: absoluto; arriba: 36px; Izquierda: 0; } #ToolsBar {ancho: 100%; Posición: Absoluto; Abajo: 10px; Izquierda: 0; desbordamiento: oculto; } botón {contorno: ninguno; borde: ninguno; Ancho: 100px; Altura: 32px; Color de fondo: #D80049; Color: #fffff; Border-Radius: 5px; margen-derecha: 10px; cursor: puntero; } #timeline {altura: 26px; Ancho: 568px; Botón de relleno: 10px; fondo: url (images/time_slot-hd.png) No-repeat; desbordamiento: oculto; } #timeline span {display: block; Ancho: 100%; Altura: 100%; Pantalla: Flex; desbordamiento: oculto; } #timeline span: antes, #timeline span: después {display: block; contenido: ""; Altura: 26px; Antecedentes: url (imágenes/time_bars-hd.png) no-repeat; } #timeline span: antes {ancho: 12px; } #Timeline Span: After { /*ancho: 100%;* / Background-Position: Right Top; -WebKit-Flex: 1; /*margin-top: -26px;*/} </style> </head> <body> <div id = "box"> <div id = "timeline"> <span> </span> </div> <divi = "herramientas de herramientas"> <button> re-list (3) </botte> <botte> sugerir (3) </boton> <botin> bombar #00AA79; "> pausa </boton> <button style =" margin-left: 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 type = "text/javascript" src = "scripts" type="text/javascript" src="map.js" >/script><script type="text/javascript" >$(function(){ var matrix = MAP_ARR[parseInt(Math.random()*MAP_ARR.length)]; window._Matrix = new Matrix(matrix,36); window.draw = new Draw({ id : "mycanvas", step : 42, matriz: _matrix.matrix, dir: "imágenes/", velocidad: 300}); E.OffSetX, y = E.OffSety; parseint ($ (this) .Text (). parseint ($ (this) .Text (). parseint ($ (this) .Text (). Match (// d+/) [0]); $ (". parse"). on ("click", function () {var bool = $ (this) .Text () == "pausa"; $ (this) .Text (bool? "Continuar": "pausa") controlador.parse ();});Descarga del código fuente: Mira el juego en Lianlian
Hay muchos ejemplos de desarrollo de juegos de escritura de JavaScript. Para más detalles, puede consultar el tema especial "JavaScript Classic Mini Games Games" para aprender. Espero que sea útil para su aprendizaje.