Explicación detallada del código fuente del mini Juego JS: Fairy Sword Flop

Este artículo describe el código fuente de la espada Flip del mini-juego JS, que es un código fuente muy excelente del juego. Compártelo para su referencia. Los detalles son los siguientes:

1. Introducción al juego:

Este es un juego de emparejamiento de flop con un total de diez niveles.

1. El juego dibuja al azar 9 cartas de 42 cartas para jugar, cada grupo es 2 mismas cartas, con un total de 18 cartas.

2. Recurrir a dos idénticos seguidos es una victoria. Cuando se giran los 9 grupos, pasarás. Si no recurre a dos imágenes consecutivas, debe volver a girarlas.

3. El juego tiene 10 niveles, y tendrá éxito en el desafío dentro del tiempo especificado.

4. Si un nivel no pasa dentro del tiempo especificado, el juego continuará desde el nivel actual.

5. Las fotos y la música en el juego son propiedad de Daewoo.

6. Requiere un navegador que admite HTML5, Chrome y Firefox son los mejores.

Fotos del juego:

Haga clic aquí para descargar el código de ejemplo completo.

2. Parte de JavaScript:

 /** Juego de flip de espada de hadas* Fecha: 2013-02-24* Autor: fdipzone* ver 1.0*/window.onload = function () {var gameImg = ['Images/start.png', 'Images/Succes.png', 'Images/fail.png', 'Images/Clear.png', 'Images/Cardbg.jpg', 'Images/Sword.png']; for (var i = 1; i <= card.get_total (); i ++) {gameImg.push ('imágenes/card' + i + '.jpg'); } var callback = function () {card.init (); } img_preload (gameImg, llamado);}/** clase de tarjeta*/var card = (function (total, cardnum) {var gameTime = [0,65,60,55,50,45,40,35,30,30,25,20]; // Tiempo de reproducción por nivel VAR TIEMPO = 8; // VAR TIME TIME VAR NIVEL = 1; // Card Data Card. LevelData = []; el Game Start = Function () {Reset (); Turnall (); i <= total; i ++) {cardData.push (i); } // dibujar tarjetas para (var i = 0; i <n; i ++) {var curcard = cardData.splice (math.random ()*cardData.length, 1) .pop (); LevelData.push ({'Cardno': Curcard, 'Turn': 0}, {'Cardno': Curs, 'Turn': 0}); } // Generar tarjetas de juego de orden aleatorias LevelData = shuffle (LevelData); } // generar la tarjeta show = function () {var cardhtml = ''; for (var i = 0; i <niveldata.length; i ++) {cardhtml+= '<div>'; cardhtml + = '<div id = "tarjeta' + i + '">'; cardhtml + = '<div> <img src = "imágenes/card' + niveldata [i] ['Cardno'] + '.jpg"> </div>'; cardhtml += '<div> <img src = "images/cardbg.jpg"> </div>'; cardhtml += '</div>'; cardhtml += '</div>'; } sethtml ('gamePlane', cardhtml); } // Flip All Turnall = function () {for (var i = 0; i <niveldata.length; i ++) {Turn_animate (i); }} // Flip Animation Turn_animate = function (Key) {var obj = $ _tag ('div', 'card' + key); var cardfont, cardback; if (getClass (obj [0]). indexOf ('out')! =-1) {cardFont = obj [0]; cardback = obj [1]; } else {cardFont = obj [1]; cardback = obj [0]; } setClass (cardback, 'list flip out'); var et = setTimeOut (function () {setClass (cardFont, 'list flip in');}, 225); } // set Hick Event set_event = function () {var o = $ _tag ('div', 'gamePlane'); for (var i = 0, count = o.length; i <count; i ++) {if (getClass (o [i]) == 'Card Viewport-flip') {o [i] .Onclick = function () {thur (this.id); }}}} // Time Start Process = function () {is_lock = 0; var Curtime = gameTime [nivel]; sethtml ('Livetime', Curtime); var et = setInterval (function () {if (matchNum == cardnum) {clearInterval (et); return;} curtime--; sethtml ('livetime', curtime); if (curtime == 0) {clearinterval (et); is_over = 1; mensaje ('fail', start);}}, 1000); } // Mensaje de juego Message de animación = function (type, llamado) {is_lock = 1; Var Message = $ ('Mensaje'); var procesado = 0; Opacidad var = 0; var soundtime = {'start': 1500, 'éxito': 4000, 'fail': 6000, 'claro': 4000}; disp ('mensaje', 'show'); setClass (mensaje, 'Message_' + type); setOpacity (mensaje, opacidad); setPosition (mensaje, 'izquierda', 0); setPosition (mensaje, 'top', 390); if (type == 'start') {bgsound (type, true); } else {bgsound (type); } var et = setInterval (function () {var message_left = getPosition (mensaje, 'izquierda'); procesado = procesado + 25; if (procesado> = 500 && procesado <= 750) {opacidad = opacidad + 10; setPosition (mensaje, 'izquierda', mensaje_left + 30); setOpacity (mensaje (mensaje);} else if (procesado> = setPosit procesado <= Soundtime [type] +250) {Opacity = Opacity-10; }}}, 25); } // flop gurn = function (id) {if (is_lock == 1) {return; } var key = parseInt (id.replace ('tarjeta', '')); if (LevelData [Key] ['Turn'] == 0) {// No abierto if (primero ==-1) {// First Turn_animate (Key); Primero = clave; LevelData [Key] ['Turn'] = 1; } else {// segundo Turn_animate (clave); LevelData [Key] ['Turn'] = 1; check_turn (clave); }}} // verifique si el flop es exitoso check_turn = function (key) {is_lock = 1; if (LevelData [Primero] ['Cardno'] == LevelData [Key] ['Cardno']) {// exitoso MatchNum ++; if (matchNum == Cardnum) {var et = setTimeOut (function () {Message ('Success', LevelUp);}, 225); } primero = -1; is_lock = 0; } else {// emparejado falló, voltee la tarjeta abierta var et = setTimeOut (function () {Turn_animate (primero); niveles de nivel [primero] ['Turn'] = 0; Turn_animate (Key); LevelData [Key] ['Turn'] = 0; First = -1; if (is_over == 0) {IS_Lock = 0;}}, 300); }} // pase nivel de nivelp = function () {if (nivel <gameTime.length-1) {nivel ++; sethtml ('nivel', nivel); comenzar(); } else {clear (); }} // pasar todo clear = function () {nivel = 1; disp ('LevelPlane', 'Ocultar'); disp ('proceso', 'ocultar'); sethtml ('gamePlane', ''); mensaje ('claro', init); } // reproducción musical bgsound = function (archivo, bucle) {var id = 'audioplayer'; if (typeof (file)! = 'Undefined') {if (typeof (loop) == 'Undefined') {bucle = false; } var audiofile = []; audiofile ['mp3'] = 'music/' + file + '.mp3'; audiofile ['ogg'] = 'music/' + file + '.ogg'; AudioPlayer (id, audiofile, bucle); } else {AudioPlayer (id); }} // GamePlay Tips = function (type) {disp ('tips', type); } // Obtenga el número total de tarjetas get_total = function () {return Total; } // RESET PARAMETER RESET = function () {disp ('LevelPlane', 'show'); sethtml ('nivel', nivel); disp ('proceso', 'show'); sethtml ('Livetime', ''); sethtml ('gamePlane', ''); is_lock = 1; is_over = 0; primero = -1; MatchNum = 0; } devolver esto;}) (42,9);

Creo que la descripción en este artículo tendrá cierto valor de referencia para el aprendizaje de todos en el diseño del juego JavaScript.