В этой статье описывается быстрый исходный код MINI Games JS и обменивается вам для вашей ссылки. Детали следующие:
После того, как игра запускается, показан следующий рисунок:
Часть кода JavaScript заключается в следующем:
/** Speed Run* Автор: fdipzone* Дата: 2012-07-15* ver: 1.0*/var gameimg = ['images/start.png', 'image/start_over.png', 'images/go_over.png', 'images/go_over.png', 'Images/run.gif', 'image 'Images/run_start3.gif']; var speed_obj = new speedclass (); window.onload = function () {var callback = function () {speed_obj.init (); } img_preload (gameimg, callback);} // speed classfunction speedclass () {this.levelset = [8,5,8,12]; // сложности параметр this.playerlist = null; // Список игроков это.player = 0; // выбрал игрок this.level = 2; // Сложность This.Lock = 0; // заблокировать это.isstart = 0; // Будет ли начать это. Isover = 0; // Будет ли закончить} // initspeedclass.prototype.init = function () {this.reset (); this.create_player (); this.create_event ();} // resetspeedclass.prototype.reset = function () {this.player = 0; this.level = $ ('level'). value; // Уровень 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; // разблокировать это.isstart = 0; // Нестапировать это. isover = 0; // Необоротный} // Создать playerspeedclass.prototype.create_player = function () {var runway = []; var player list = []; for (var i = 1; i <= 8; i ++) {взлетно-посадочная полоса [i] = '<li> <div id = "player' + (9-i) + '"> </div> </li>'; PlayerList [i] = '<li>' + i + '</li>'; } $ ('взлетно -посадочная полоса'). 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.playerList [i] .onMouseout = function () {if (this.classname! = 'on') {this.classname = ''; / 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 (); }} // start gamesspeedclass.prototype.start = function (c) {var o = $ ('player' + c); var step = 1; var self = это; var Exert = 0; o.style.marginleft = '62px'; // init var et = setInterval (function () {if (step <4) {// step 1-3 готов o.classname = 'run_status' + step;} else {// run if (o.classname! = 'running') {o.classname = 'running';} // start can go if. достиг финишной черты, если (self.isover == 1) {clearInterval (et); Math.floor (math.random ()*8) +4 + function () {if (this.isstart == 1 && this.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'; } вернуть false;} // gameoverspeedclass.prototype.gameover = function (id) {id = id.replace ('player', ''); var self = это; var msg = ''; if (id == this.player) {msg = "Поздравляю, игроки, которых вы поддерживаете Won/n/n"; } else {msg = "К сожалению, игроки, которых вы поддерживаете, не выиграли, тот, кто выиграл, был" + id + "select/n/n"; } if (enform (msg + 'запускается ли это снова?') == true) {setTimeout (function () {self.init ();}, 1000); } else {return false; }}/** Общая функция*/// get document.getElementby (id) function $ (id) {this.id = id; return document.getElementById (id);} // get document.getElementsbytagnamefunction $ _tag (имя, id) {if (typeof (id)! = 'undefined') {return $ (id) .getElementsbytagname (name); } else {return document.getElementsbytagname (name); }}/* div Показать и скрыть* @param id dom id* @param handle show или hide* @param classname*/function disp (id, handle, classname) {if (hand= '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, 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 ++; /Нажмите здесь, чтобы загрузить полный пример кода.
Я считаю, что эта статья имеет определенную справочную ценность для дизайна игры JavaScript.