JS 미니 게임 체스 다크 체스의 소스 코드에 대한 자세한 설명

이 기사에서는 JS 미니 게임에서 체스 다크 체스의 소스 코드를 설명하며 참조를 위해 귀하와 공유됩니다. 세부 사항은 다음과 같습니다.

게임이 실행되면 다음 그림이 표시됩니다.

자바 스크립트 섹션 :

 / ** 중국 체스 * 저자 : fdipzone * 날짜 : 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.g if ','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, 콜백); } // 체스 클래스 함수 chessclass () {this.chess = []; this.boardrows = 4; this.boardcols = 8; this.area = 82; 이. 플레이어 = 1; // 1 : 빨간색 2 : 녹색 this.selected = null; // 선택한 체스 this.chestype = [ '', 'a', 'b']; this.isover = 0; } // init chessclass.prototype.init = function () {this.reset_grade (); this.create_board (); this.create_chess (); this.create_event (); 이. 플레이어 = 1; this.selected = null; this.isover = 0; disp ( 'init_div', 'hide'); } // 보드 생성 chessclass.prototype.create_board = function () {var board = ''; for (var i = 0; i <this.boardrows; i ++) {for (var j = 0; }} $ ( '보드'). innerHtml = 보드; $ ( 'board'). style.width = this.boardcols * (this.area + 2) + 'px'; $ ( 'board'). style.height = this.boardrows * (this.area + 2) + 'px'; } // 임의의 체스 체스 스CLASS.PROTOTYPE.CREATE_CHESS = function () {// 32 Chesses var chesses = 생성 [ 'a1', 'b7', 'a2', 'b7', 'a2', 'b7', 'a3', 'b7', 'a3', 'b7', 'a4', 'b6', 'a4', 'b6', 'b5', 'b5', 'a5', 'b5', 'a6', 'b4', 'a6', 'b4', 'a7', 'b3', 'a7', 'b3', 'a7', 'b2', 'a7', 'b2', '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}); }} // 이벤트 생성 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 index index chessclass.prototype.getIndex = function (id) {var tid = id.split ( '_'); 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) {// return false; } var index = this.getIndex (o.id); if (this.selected == null) {// 체스 조각을 선택하지 않음 (this.chess [index] [ 'status'] == 0) {// this.show (index); } else if (this.chess [index] [ 'status'] == 1) {// if (this.chess [index] [ 'type'] == this.chestype [this.player]) {this.select (index); }}} else {// 선택된 체스 조각 if (index! = this.selected [ 'index']) {// if (this.chess [index] [ 'status']] == 0) {// Unoped Chess Piece this.show (index); } else if (this.chess [index] [ 'status'] == -1) {// blank 위치 this.move (index); } else {// 다른 체스 조각 if (this.chess [index] [ 'type'] == this.chestype [this.player]) {this.select (index); } else {this.kill (색인); }}}}}} // show show show chess chessclass.prototype.show = function (index) {$ (this.getId (index)). innerHtml = '<img src = "images /' + this.chess [ 'chess'] + '.gif" />'; this.chess [index] [ 'status'] = 1; // if (this.selected! = null) {// reto $ (this.getId (this.selected.index)). className = ''; this.selected = null; } this.change_player (); this.gameover (); } // Chess Chessclass.prototype.select = function (index) {if (this.selected! = null) {$ (this.getId (this.Selected [ 'index'])). className = ''; } this.selected = { 'index': 색인, '체스': this.chess [index]}; $ (this.getId (index)). className = 'onsel'; } // Chess Chessclass.prototype.move = function (index) {if (this.beside (index)) {this.the.chess [index] = { 'chess': this. this. this. this. istrected [ 'chess'] [ 'chess'], 'type': this. selected [ 'chess'] [ 'type'], ''val [this [ 'chess']]. '상태': this.selected [ 'chess'] [ 'status']}; this.remove (this.selected [ 'index']); this.show (색인); }} // Chess Chessclass.prototype.kill = function (index) {if (this.beside (index) == true && this.can_kill (index) == true) {this.chess [index] = { 'chess': this.THERECTED [ 'Chess'] [ 'Chess'], 'type': [ 'type']]. 'val': this.selected [ 'chess'] [ 'val'], 'status': this.selected [ 'chess'] [ 'status']}; this.remove (this.selected [ 'index']); var milled = this.player == 1? 2 : 1; $ ( 'grade_num' + killed) .innerhtml = parseint ($ ( 'grade_num' + killed) .innerhtml) -1; this.show (색인); }} // Chess Chessclass.prototype.remove = function (index) {this.chess [index] [ 'status'] = -1; // 빈 $ (this.getId (index)). innerHtml = ''; $ (this.getId (index)). className = ''; } / * 점검은 * @param index 체스 조각 색인 옆에 있습니다. @param selindex 체스 피스 인덱스가 비어있을 수 있습니다. 비어 있으면 선택한 체스 조각이 읽습니다 */ chessclass.prototype.beside = function (index, selindex) {if (type (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 또는 colunm은 동일하고 간격 = 1이 true; } else {return false; }} / * 확인 * @param 색인 * @param index * @param selindex 체스 조각 지수를 죽일 수 있습니다 * @param selindex 실행 된 체스 피스 인덱스가 비어있을 수 있으며 비어 있으면 선택한 체스 조각이 읽히면 * / chessclass.prototype.can_kill = function (selindex) = // hessof (selind) = // if (this.selected! = null) {// 선택된 체스 조각 selindex = this.selected [ 'index']가 있습니다. } else {return false; }} if (this.chess [index] [ 'type']! = th리 } else if (parseint (this.chess [selindex] [ 'val']) == 1 && parseint (this.chess [index] [ 'val']) == 7) {// 1을 죽일 수 없습니다. } else if (parseint (this.chess [selindex] [ 'val']) <= parseint (this.chess [index] [ 'val'])) {// 작은 kill big return true; }} 거짓을 반환합니다. } // Player Change 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; // red $ ( 'grade_img1'). className = 'img_on'; $ ( 'grade_img2'). className = 'img'; }} // 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 = ''; } // 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 show show show show grade chessclass.prototype.show_grade = function () {var num1 = parseint ($ ( 'grade_num1'). innerhtml); var num2 = parseint ($ ( 'grade_num2'). innerhtml); if (num1> num2) {// red square win $ ( 'grade_res2'). innerhtml = 'loss'; $ ( 'grade_res2'). ClassName = 'Loss'; $ ( 'grade_res1'). innerhtml = 'win'; $ ( 'grade_res1'). className = 'win'; } else if (num1 <num2) {// black square win $ ( 'grade_res1'). innerhtml = 'loss'; $ ( 'grade_res1'). ClassName = 'Loss'; $ ( 'grade_res2'). innerhtml = 'win'; $ ( 'grade_res2'). className = 'win'; } else {// draw $ ( 'grade_res1'). innerHtml = $ ( 'grade_res2'). innerHtml = 'draw'; $ ( 'grade_res1'). className = $ ( 'grade_res2'). className = 'draw'; }} // 체스를 확인 할 수있는 체스 클래스가 chestclass.prototype.can_action = function () {var chess = this.chess; for (var i = 0, max = chess.length; i <max; i ++) {if (chess [i] .status == 0) {// 개봉되지 않은 체스 조각이 참으로 반환됩니다. } else {if (chess [i] .status == 1 && chess [i] .type == this.chestype [this.player]) {// if (this.beside (i- this.boardcols, i) && (체스 [i- this.boardcols]. this.can_kill (i- this.boardcols, i))) {// true; } if (this.beside (i+this.boardcols, i) && (chess [i+this.boardcols] .status == -1 || this.can_kill (i+this.boardcols, i))) {// true; } if (this.beside (i+this.boardcols, i) && (chess [i+this.boardcols] .status == -1 || this.can_kill (i+this.boardcols, i))) {// true; } if (this.beside (i-1, i) && (체스 [i-1] .status == -1 || this.can_kill (i-1, i))) {// 왼쪽 return true; } if (this.beside (i+1, i) && (체스 [i+1] .status == -1 || this.can_kill (i+1, i))) {// 오른쪽 반환 true; }}}} 거짓을 반환합니다. } / ** 공통 함수*// get get.getElementBy (id) 함수 $ (id) {this.id = id; return document.getElementById (id); } // get get get.getEtlementSyTagName function $ _tag (name, id) {if (typeof (id)! = 'undefined') {return $ (id) .getElementsByTagName (name); } else {return document.getElementsByTagName (이름); }} / * div show and hide * @param id dom id * @param 핸들 쇼 또는 숨기기 * / function disp (id, handle) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'none'; }} /* img preload* @param img 이미지 배열을로드 할 이미지 배열* @param 콜백 메소드 이미지가 성공적으로로드 된 후* / function img_preload (img, 콜백) {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); 콜백 ();}}, 200); }

전체 예제 코드를 다운로드하려면 여기를 클릭하십시오.

이 기사의 설명은 모든 사람의 JavaScript 게임 디자인 학습에 대한 특정 참조 값을 가질 것이라고 생각합니다.