이 기사에서는 JS Mini Games의 빠른 실행 소스 코드를 설명하며 참조를 위해 귀하와 공유됩니다. 세부 사항은 다음과 같습니다.
게임이 실행되면 다음 그림이 표시됩니다.
JavaScript 코드의 일부는 다음과 같습니다.
/** Speed Run* 저자 : fdipzone* 날짜 : 2012-07-15* ver : 1.0*/var gameimg = [ 'images/start.png', 'images/start_over.png', 'images/go_over.png', 'images/go_over.png', 'images/runip', 'image_start1.gif', 'image/run _,'image_start1.gif ','image/run_start1.gif ' '이미지/run_start3.gif']; var speed_obj = new speedclass (); window.onload = function () {var callback = function () {speed_obj.init (); } img_preload (gameimg, 콜백);} // speed classfunction speedclass () {this.levelset = [8,5,8,12]; // 난이도 매개 변수 this.playerList = null; // 플레이어 목록 님이 this.player = 0; // 선택한 플레이어 this.Level = 2; // 난이도 this.lock = 0; // hove this.isstart = 0; // this.isover = 0; // 종료 여부} // initspeedclass.prototype.init = function () {this.reset (); this.create_player (); this.create_event ();} // resetspeedclass.prototype.reset = function () {this.player = 0; this.level = $ ( 'level'). 값; // level this.playerList = $ _tag ( 'li', 'playerList'); for (var i = 0; i <this.playerlist.length; i ++) {this.playerList [i] .className = ''; } disp ( 'start_btn', 'show', 'start_btn'); disp ( 'go_btn', 'hide', 'go_btn'); this.lock = 0; // 잠금 해제 this.isstart = 0; // this.isover = 0; // unover} // playerspeedclass.prototype.create_player = function () {var runway = []; var playerList = []; for (var i = 1; i <= 8; i ++) {런웨이 [i] = '<li> <div id = "player' + (9-i) + '"> </div> </li>'; playerList [i] = '<li>' + i + '</li>'; } $ ( 'runway'). innerhtml = runway.join ( ''); $ ( 'playerList'). innerHtml = playerList.join ( ''); 활주로 = null; playerList = null;} // eventspeedclass.prototype.create_event = function () {var self = this; this.playerList = $ _tag ( 'li', 'playerList'); for (var i = 0; i <this.playerList.length; i ++) {this.playerList [i] .onMouseOver = function () {if (this.className! = 'on') {this.className = 'over'; }} this.This.PlayERList [i] .onMouseOut = function () {if (this.className! = 'on') {this.className = ''; }} this.This.PlayERList [i] .onClick = function (o, c) {return function () {if (self.lock == 0) {O.PlayERList [c] .className = 'on'; if (O.Player! = 0 && O.Player! = C+1) {// 0과 같지 않으며 자신과 같지 않습니다. O.PlayerList [O.Player-1] .className = ''; } O.player = c + 1; }}}} (self, i); } $ ( 'start_btn'). onmouseOver = function () {this.className = 'start_over_btn'; } $ ( 'start_btn'). onMouseOut = function () {this.className = 'start_btn'; } $ ( 'start_btn'). onclick = function () {if (self.player == 0) {return alert ( '지원하려는 플레이어를 선택하십시오'); } else {self.lock = 1; // 잠긴 disp ( 'start_btn', 'hide'); disp ( 'go_btn', 'show'); for (var i = 1; i <= 8; i ++) {self.start (i); }}} $ ( 'go_btn'). onmouseOver = function () {this.className = 'go_over_btn'; } $ ( 'go_btn'). onmouseout = function () {this.classname = 'go_btn'; } $ ( 'go_btn'). onclick = function () {self.go (); }} // GamesPeedClass.prototype.start = function (c) {var o = $ ( 'player' + c); var 단계 = 1; var self = 이것; var Exert = 0; o.style.marginleft = '62px'; // init var et = setInterVal (function () {if (spet <4) {// 1-3 단계가 준비되었습니다. if (self.isover == 1) {clearinterval (et) {if (self.player! = c) {// exert = math.random (self.Levelset [self.Level]) +3; Math.Random ()*8) +'PX'; function () {if (this.isstart == 1 && this.is.isover == 0) {var o = $ ( 'player' + this.player); var exert = math.floor (math.random ()*3) +2; // 2-5 O.style.marginleft = parseint (o.style.marginleft) + Exert + 'PX'; } return false;} // gameOverSpeedClass.prototype.gameOver = function (id) {id = id.replace ( 'player', ''); var self = 이것; var msg = ''; if (id == this.player) {msg = "축하합니다. } else {msg = "슬프게도, 당신이지지하는 플레이어는 이기지 못했고,이긴 사람은" + id + "select/n/n"; } if (확인 (msg + '다시 시작합니까?') == true) {settimeout (function () {self.init ();}, 1000); } else {return false; }}/** 공통 함수*/// get get.getElementby (id) 함수 $ (id) {this.id = id; return document.getElementById (id);} // get get.getEtlementsByTagNameFunction $ _tag (name, id) {if (typeof (id)! = 'undefined') {return $ (id) .getElementsByTagName (name); } else {return document.getElementsByTagName (이름); }}/* div show and hide* @param id dom id* @param 핸들 쇼 또는 숨은* @param classname*/function disp (id, handle, classname) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'none'; } if (typeof (className)! = 'undefined') {$ (id) .className = className; }}/* 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); Callback ();}}, 200);}전체 예제 코드를 다운로드하려면 여기를 클릭하십시오.
이 기사는 모든 사람의 JavaScript 게임 디자인에 대한 특정 참조 가치가 있다고 생각합니다.