Recentemente, fiz um simples jogo de quebra -cabeça móvel. O código é simples e fácil de entender. Não vou dizer muita bobagem. Deixe todos provar tudo!
Vejamos as renderizações primeiro:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <titter> document type = "texto/css"> html, corpo, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, forma, fieldset, legend, img {margin: 0; padding: 0} body {body: rinks;} #Box {Width: url ('img/300.jpg'); posição: relativa; margem: 50px automático;}. Absoluto; cor: vermelho; topo: 15px; esquerda: 300px; font-size: 20px;} </style> </ad Head> <body> <div class = 'controller'> <h1> jigsaw quebra Estilo = 'Posição de fundo: 0px 0px; esquerda: 0px; topo: 0px;'> </div> <div data-index = '2' style = 'Posição de fundo: -100px 0px; esquerda: 100px; topo: 0px; 0px; esquerda: 200px; topo: 0px; '> </div> <div data-index =' 4 'style =' posição de fundo: 0px -100px; esquerda: 0px; topo: 100px; '> </div> <div dados-index =' 5 '=' '' ': -100px ;100px; esquerda; esquerda: IDEX =' 5 '=' '' ': -100px; Dados-index = '6' style = 'Posição de fundo: -200px -100px; esquerda: 200px; topo: 100px;'> </div> <div data-index = '7' style = 'Posição de fundo: 0px -200px; esquerda: 0px; top: 200px;'> </div> <d data-ndex; -200px; esquerda: 100px; topo: 200px; '> </div> <cript> var picbox = document.getElementById (' picbox '); var pic = document.QuerySelectorAll ('. picboxHeight = picbox.offsetHeight; var go = document.getElementById ('go'); var times = document.getElementById ('times'); // time. Usado para estender var dx, dy, newleft, newtop, starttime, final; go.addeventListener ('touchstart', function () {startTime = date.parse (new Date ()); // Obtenha o número de milissegundos (aqui o mais de 1970; {pic [i] .style.display = "bloco"; Math.floor (math.random ()*9); if (a! = B) {aleatório (a, b);}}}) para (var i = 0; i <pic.length; i ++) {pic [i] .AddeventListener ('touchstart', função (e) {this.style.zinder.zinderx = 100; top.dx = e.TargetTouches [0] .Pagex-this.OffSetLeft; this. O estado horizontal do arrasto muda newtop = e.TargetTouches [0] .Pagey-dy; if (newleft <=-picwidth/2) {// restringe o bloco de código de contorno, a área de arrasto não pode exceder a metade do limite newleft = -picwidth/2;} else if (newLeft> = (picboxWidth-picWidth/2)) {newleft = (picboxwidth-picwidth/2);} if (newtop <=-picheight/2) {newtop = -picWidth/2;} else if (newtop> = (picboxHeight-PichEight/2)) {newtop = (PicboxHeight-Pichight/2);} this.style.left = newleft+'px'; elemento; pic [i] .AddeventListener ('Toukend', function (e) {this.style.zindex = 0; this.style.Transition = 'todos os 0.5s facilitam 0s'; // adicione o efeito de animação CSS3. No final do slide, compare -o com o elemento de entrada e julgue quem trocar var obj = alteração (e.Target, this.endx, this.endy); //Otherwise var _left=obj.style.left;obj.style.left=this.startX+'px';this.style.left=_left;var _top=obj.style.top;obj.style.top=this.startY+'px';this.style.top=_top;var _index = obj.getAttribute ('Data-index'); obj.setAtattribute ('Data-index', this.getAttribute ('data-index'); }}); pic [i] .AddeventListener ('transitionend', function () {if (iSsuccess ()) {console.log ('success!'); // Há um bug no evento de escuta aqui, e vários eventos serão adicionados. Alterar (obj, x, y) {// A função de troca determina se a posição do elemento de arrasto entrou no 1/2 original do alvo if (math.abs (pic [i] .offsetleft-x) <= picwidth/2 && Math.abs (pic [i] .offsetTop-y) <= picheight/2 && pic [i]! pic [a]; var bele = pic [b]; var _left; _left = aele.style.left; aele.style.left = bele.style.left; bele.style.left = _left; var _top; _top = aele.style.top; aele.Sty.Sty.Sty.Sty.Sty.Sty.Styny; bele.style.top; bele.style.top = _top; var _index; _index = aele.getAttribute ("data-index"); aele.setAttribute ("data-index", bele.getattribute ("data-index); Critérios para julgar o sucesso var str = '' para (var i = 0; i <pic.length; i ++) {str+= pic [i] .getAttribute ('dados-index');} if (str == '123456789') {return true; Date ()); times.innerhtml = (Endtime-startTime)/1000 || '';}, 1000) </script> </body> </html>Existem muitas maneiras de otimizar o código, como adicionar funções de tempo, efeitos de sucesso do jogo e efeitos sonoros, eventos personalizados para os dedos deslizantes, traços esquerdo e direito, traços para cima e para baixo, embalagens adicionais etc. Quando você pensa sobre isso, não pode deixar de tentar bater no código. . O editor continuará atualizando você mais tarde. Vamos aqui hoje. Espero que gostem!