Este artigo compartilha o código de implementação específico da versão em tela de redação JavaScript do jogo Lianliankan para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
Código de implementação:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> < /title> <style> #box { /*borda: 1px Solid #d1d1d1; */ Overflow: Hidden; Posição: relativa; Botting-Bottom: 60px; } #BG {Background-Color: RGBA (254,195,89, .2); } #MyCanvas {Position: Absolute; topo: 36px; Esquerda: 0; } #ToolsBar {Width: 100%; Posição: Absoluto; Inferior: 10px; Esquerda: 0; estouro: oculto; } botão {esboço: nenhum; fronteira: nenhuma; Largura: 100px; Altura: 32px; Background-Color: #D80049; Cor: #fffff; Radio de fronteira: 5px; Margem-direita: 10px; Cursor: Ponteiro; } #timeline {altura: 26px; Largura: 568px; Botting-Bottom: 10px; Antecedentes: URL (imagens/time_slot-hd.png) sem repetição; estouro: oculto; } #timeline span {display: block; largura: 100%; Altura: 100%; exibição: flex; estouro: oculto; } #timeline span: antes, #timeline span: após {display: block; contente: ""; Altura: 26px; Antecedentes: URL (imagens/time_bars-hd.png) sem repetição; } #timeline span: antes de {largura: 12px; } #timeline span: após { /*largura: 100%;* / posição de fundo: topo direito; -Webkit-Flex: 1; /*margin-top: -26px;*/} </style> </ad Head> <body> <div id = "box"> <div id = "Linha do tempo"> </span> </span> </div> <div id = "ToolsBar"> <butto> re-lista (3) </button> <butt> hint (3) <//button> button> #00AA79; "> pausa </butão> <button style =" margin-left: 50px; type="text/javascript" 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 = "draw.js">/script> <script type = "text/javascript" src = "map.js">/script> <script type = "text/javascript"> $ (function () {var matrix = map_arr [parseInt (math.random ()*map_arr.luct)]; new Draw ({id: "mycanvas", etapa: 42, matriz: _matrix.matrix, dir: "imagens/", velocidade: 300}); $ ("#mycanvas"). on ("clique", function (e) {var x = e.offsetx, y = e.offsety; var _x = math.floor ((x-1)/43), _y = math.floor ((y-1)/43); Parseint ($ (TIM). parseint ($ (this) .Text (). parsent ($ (this) .text (). $ (". Parse"). ON ("Clique", function () {var bool = $ (this) .Text () == "pausa"; $ (this) .text (bool? "Continue": "pausa") controlador;Download do código -fonte: Assista ao jogo em Lianlian
Existem muitos exemplos de desenvolvimento de jogos de escrita de JavaScript. Para detalhes, você pode consultar o tópico especial "JavaScript Classic Mini Games Resumo" para aprender. Espero que seja útil para o seu aprendizado.