communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Explication détaillée du code source des échecs et des échecs sombres dans les compétences JS mini-game_javascript

Explication détaillée du code source des échecs et des échecs sombres dans les compétences JS mini-game_javascript

WBOY
Libérer： 2016-05-16 16:35:42
original
2076 Les gens l'ont consulté

L'exemple dans cet article décrit le code source des échecs sombres du mini-jeu JS et est partagé avec tout le monde pour votre référence. Les détails sont les suivants :

Une fois le jeu lancé, cela se présente comme indiqué ci-dessous :

Partie Javascript : 

/** chinese chess 
*  Author: fdipzone 
*  Date:  2012-06-24 
*  Ver:  1.0 
*/ 
 
var gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','images/a7.gif','images/b1.gif','images/b2.gif','images/b3.gif','images/b4.gif','images/b5.gif','images/b6.gif','images/b7.gif','images/bg.gif','images/bg_over.gif','images/bg_sel.gif']; 
var chess_obj = new ChessClass(); 
 
window.onload = function(){ 
  $('init_btn').onclick = function(){ 
    chess_obj.init(); 
  } 
  var callback = function(){ 
    chess_obj.init(); 
  } 
  img_preload(gameimg, callback); 
} 
 
// chess class 
function ChessClass(){ 
  this.chess = []; 
  this.boardrows = 4; 
  this.boardcols = 8; 
  this.area = 82; 
  this.player = 1;  // 1:red 2:green 
  this.selected = null;  // selected chess 
  this.chesstype = ['', 'a', 'b']; 
  this.isover = 0; 
} 
 
// init 
ChessClass.prototype.init = function(){ 
  this.reset_grade();  
  this.create_board(); 
  this.create_chess(); 
  this.create_event(); 
  this.player = 1; 
  this.selected = null; 
  this.isover = 0; 
  disp('init_div','hide'); 
} 
 
// create board 
ChessClass.prototype.create_board = function(){ 
  var board = ''; 
  for(var i=0; i<this.boardrows; i++){ 
    for(var j=0; j<this.boardcols; j++){ 
      board = board + '<div id="' + i + '_' + j + '"><img src="images/chessbg.gif" /></div>'; 
    } 
  } 
  $('board').innerHTML = board; 
  $('board').style.width = this.boardcols * (this.area + 2) + 'px'; 
  $('board').style.height = this.boardrows * (this.area + 2) + 'px'; 
} 
 
// create random chess 
ChessClass.prototype.create_chess = function(){ 
  // 32 chesses 
  var chesses = ['a1','b7','a2','b7','a2','b7','a3','b7','a3','b7','a4','b6','a4','b6','a5','b5', 
           'a5','b5','a6','b4','a6','b4','a7','b3','a7','b3','a7','b2','a7','b2','a7','b1']; 
  this.chess = []; 
  while(chesses.length>0){ 
    var rnd = Math.floor(Math.random()*chesses.length); 
    var tmpchess = chesses.splice(rnd, 1).toString(); 
    this.chess.push({'chess':tmpchess, 'type':tmpchess.substr(0,1), 'val':tmpchess.substr(1,1), 'status':0}); 
  } 
} 
 
// create event 
ChessClass.prototype.create_event = function(){ 
  var self = this; 
  var chess_area = $_tag('div', 'board'); 
  for(var i=0; i<chess_area.length; i++){ 
    chess_area[i].onmouseover = function(){ // mouseover 
      if(this.className!='onsel'){ 
        this.className = 'on'; 
      } 
    } 
    chess_area[i].onmouseout = function(){ // mouseout 
      if(this.className!='onsel'){ 
        this.className = ''; 
      } 
    } 
    chess_area[i].onclick = function(){ // onclick 
      self.action(this); 
    } 
  } 
} 
 
// id change index 
ChessClass.prototype.getindex = function(id){ 
  var tid = id.split('_'); 
  return parseInt(tid[0])*this.boardcols + parseInt(tid[1]); 
} 
 
// index change id 
ChessClass.prototype.getid = function(index){ 
  return parseInt(index/this.boardcols) + '_' + parseInt(index%this.boardcols); 
} 
 
// action 
ChessClass.prototype.action = function(o){ 
  if(this.isover==1){ // game over 
    return false; 
  } 
   
  var index = this.getindex(o.id); 
 
  if(this.selected == null){ // 未选过棋子 
    if(this.chess[index]['status'] == 0){  // not opened 
      this.show(index);   
    }else if(this.chess[index]['status'] == 1){ // opened 
      if(this.chess[index]['type'] == this.chesstype[this.player]){ 
        this.select(index); 
      } 
    }     
  }else{ // 已选过棋子 
    if(index != this.selected['index']){        // 與selected不是同一位置 
      if(this.chess[index]['status'] == 0){      // 未打开的棋子 
        this.show(index); 
      }else if(this.chess[index]['status'] == -1){  // 點空白位置 
        this.move(index); 
      }else{                     // 點其他棋子 
        if(this.chess[index]['type']==this.chesstype[this.player]){ 
          this.select(index); 
        }else{      
          this.kill(index); 
        } 
      } 
    } 
  } 
} 
 
// show chess 
ChessClass.prototype.show = function(index){ 
  $(this.getid(index)).innerHTML = '<img src="images/' + this.chess[index]['chess'] + '.gif" />'; 
  this.chess[index]['status'] = 1;  // opened 
  if(this.selected!=null){      // 清空選中 
    $(this.getid(this.selected.index)).className = ''; 
    this.selected = null; 
  }   
  this.change_player(); 
  this.gameover(); 
} 
 
// select chess 
ChessClass.prototype.select = function(index){ 
  if(this.selected!=null){ 
    $(this.getid(this.selected['index'])).className = ''; 
  } 
  this.selected = {'index':index, 'chess':this.chess[index]}; 
  $(this.getid(index)).className = 'onsel'; 
} 
 
// move chess 
ChessClass.prototype.move = function(index){ 
  if(this.beside(index)){ 
    this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']}; 
    this.remove(this.selected['index']); 
    this.show(index); 
  } 
} 
 
// kill chess 
ChessClass.prototype.kill = function(index){ 
  if(this.beside(index)==true && this.can_kill(index)==true){ 
    this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']}; 
    this.remove(this.selected['index']); 
    var killed = this.player==1&#63; 2 : 1; 
    $('grade_num' + killed).innerHTML = parseInt($('grade_num' + killed).innerHTML)-1;  
    this.show(index); 
  } 
} 
 
// remove chess 
ChessClass.prototype.remove = function(index){ 
  this.chess[index]['status'] = -1;  // empty 
  $(this.getid(index)).innerHTML = ''; 
  $(this.getid(index)).className = ''; 
} 
 
/* check is beside 
* @param index   目標棋子index 
* @param selindex  执行的棋子index，可为空, 为空则读取选中的棋子 
*/ 
ChessClass.prototype.beside = function(index,selindex){ 
  if(typeof(selindex)=='undefined'){ 
    if(this.selected!=null){ 
      selindex = this.selected['index']; 
    }else{ 
      return false; 
    } 
  } 
 
  if(typeof(this.chess[index])=='undefined'){ 
    return false; 
  } 
 
  var from_info = this.getid(selindex).split('_'); 
  var to_info = this.getid(index).split('_'); 
  var fw = parseInt(from_info[0]); 
  var fc = parseInt(from_info[1]); 
  var tw = parseInt(to_info[0]); 
  var tc = parseInt(to_info[1]); 
 
  if(fw==tw && Math.abs(fc-tc)==1 || fc==tc && Math.abs(fw-tw)==1){  // row or colunm is same and interval=1 
    return true; 
  }else{ 
    return false; 
  } 
} 
 
/* check can kill 
* @param index   被消灭的棋子index 
* @param selindex  执行消灭的棋子index，可为空, 为空则读取选中的棋子 
*/ 
ChessClass.prototype.can_kill = function(index,selindex){ 
  if(typeof(selindex)=='undefined'){ // 没有指定执行消灭的棋子 
    if(this.selected!=null){    // 有选中的棋子 
      selindex = this.selected['index']; 
    }else{ 
      return false; 
    } 
  } 
  if(this.chess[index]['type']!=this.chesstype[this.player]){ 
    if(parseInt(this.chess[selindex]['val'])==7 && parseInt(this.chess[index]['val'])==1){ // 7 can kill 1 
      return true; 
    }else if(parseInt(this.chess[selindex]['val'])==1 && parseInt(this.chess[index]['val'])==7){ // 1 can't kill 7 
      return false; 
    }else if(parseInt(this.chess[selindex]['val']) <= parseInt(this.chess[index]['val'])){  // small kill big 
      return true; 
    } 
  } 
  return false; 
} 
 
// change player 
ChessClass.prototype.change_player = function(){ 
  if(this.player == 1){ 
    this.player = 2;  // to green 
    $('grade_img2').className = 'img_on'; 
    $('grade_img1').className = 'img'; 
  }else{ 
    this.player = 1;  // to red 
    $('grade_img1').className = 'img_on'; 
    $('grade_img2').className = 'img'; 
  } 
} 
 
// reset grade 
ChessClass.prototype.reset_grade = function(){ 
  $('grade_img1').className = 'img_on'; 
  $('grade_img2').className = 'img'; 
  $('grade_num1').innerHTML = $('grade_num2').innerHTML = 16; 
  $('grade_res1').className = $('grade_res2').className = 'none'; 
  $('grade_res1').innerHTML = $('grade_res2').innerHTML = ''; 
} 
 
// game over 
ChessClass.prototype.gameover = function(){ 
  if($('grade_num1').innerHTML==0 || $('grade_num2').innerHTML==0){  // 任一方棋子为0 
    this.isover = 1; 
    this.show_grade(); 
    disp('init_div','show'); 
  }else{ 
    if(this.can_action()==false){ 
      this.isover = 1; 
      this.show_grade(); 
      disp('init_div','show'); 
    } 
  } 
} 
 
// show grade 
ChessClass.prototype.show_grade = function(){ 
  var num1 = parseInt($('grade_num1').innerHTML); 
  var num2 = parseInt($('grade_num2').innerHTML); 
  if(num1>num2){ // 红方胜 
    $('grade_res2').innerHTML = 'LOSS'; 
    $('grade_res2').className = 'loss'; 
    $('grade_res1').innerHTML = 'WIN'; 
    $('grade_res1').className = 'win'; 
  }else if(num1<num2){ // 黑方胜 
    $('grade_res1').innerHTML = 'LOSS'; 
    $('grade_res1').className = 'loss'; 
    $('grade_res2').innerHTML = 'WIN'; 
    $('grade_res2').className = 'win'; 
  }else{ // 平局 
    $('grade_res1').innerHTML = $('grade_res2').innerHTML = 'DRAW'; 
    $('grade_res1').className = $('grade_res2').className = 'draw'; 
  } 
} 
 
// check chess can action 
ChessClass.prototype.can_action = function(){ 
  var chess = this.chess; 
  for(var i=0,max=chess.length; i<max; i++){ 
  if(chess[i].status==0){ // 有未翻开的棋子 
    return true; 
  }else{ 
    if(chess[i].status==1 && chess[i].type==this.chesstype[this.player]){  // 己方已翻开的棋子 
      if(this.beside(i-this.boardcols, i) && (chess[i-this.boardcols].status==-1 || this.can_kill(i-this.boardcols,i) )){ // 上 
        return true; 
      } 
      if(this.beside(i+this.boardcols, i) && (chess[i+this.boardcols].status==-1 || this.can_kill(i+this.boardcols,i) )){ // 下 
        return true; 
      } 
      if(this.beside(i-1, i) && (chess[i-1].status==-1 || this.can_kill(i-1,i) )){  // 左 
        return true; 
      } 
      if(this.beside(i+1, i) && (chess[i+1].status==-1 || this.can_kill(i+1,i) )){  // 右 
        return true; 
      } 
    } 
  } 
  } 
  return false; 
} 
 
/** common function */ 
 
// get document.getElementBy(id) 
function $(id){ 
  this.id = id; 
  return document.getElementById(id); 
} 
 
// get document.getElementsByTagName 
function $_tag(name, id){ 
  if(typeof(id)!='undefined'){ 
    return $(id).getElementsByTagName(name); 
  }else{ 
    return document.getElementsByTagName(name);  
  } 
} 
 
/* div show and hide 
* @param id dom id 
* @param handle show or hide 
*/ 
function disp(id, handle){ 
  if(handle=='show'){ 
    $(id).style.display = 'block'; 
  }else{ 
    $(id).style.display = 'none';   
  } 
} 
 
/* img preload 
* @param img    要加载的图片数组 
* @param callback  图片加载成功后回调方法 
*/ 
function img_preload(img, callback){ 
  var onload_img = 0; 
  var tmp_img = []; 
  for(var i=0,imgnum=img.length; i<imgnum; i++){ 
    tmp_img[i] = new Image(); 
    tmp_img[i].src = img[i]; 
    if(tmp_img[i].complete){ 
      onload_img ++; 
    }else{ 
      tmp_img[i].onload = function(){ 
        onload_img ++; 
      } 
    } 
  } 
  var et = setInterval( 
    function(){ 
      if(onload_img==img.length){ // 定时器,判断图片完全加载后调用callback 
        clearInterval(et); 
        callback(); 
      } 
    },200); 
}
Copier après la connexion

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

Je crois que ce qui est décrit dans cet article a une certaine valeur de référence pour l'apprentissage par chacun de la conception de jeux javascript.

Étiquettes associées：
源码
source：php.cn
Article précédent：4 façons d'implémenter des modèles de programmation asynchrone dans les compétences JavaScript_javascript Article suivant：Modèle d'observateur de modèles de conception JavaScript (modèle éditeur-abonné)_compétences javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Sélectionnez la bonne ligne de base de données pour obtenir des résultats groupés Je souhaite sélectionner le meilleur score pour chaque utilisateur pour un jeu spécifique....
Depuis 2024-04-05 10:37:31
0
1
407
Python/MySQL ne peut pas conserver correctement les données entières Aucun code n'est requis ici. Je souhaite enregistrer un numéro très long car je crée un je...
Depuis 2024-04-04 19:09:44
0
1
367
PHP : expression régulière pour faire correspondre et remplacer plusieurs instances de plusieurs correspondances en double Je cherche à écrire un système de shortcode pour une communauté/base de données de jeux où...
Depuis 2024-04-04 15:41:01
0
1
439
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal