Interactivity

Developer
Kevin Giguere
Size
19,158 Kb
Views
14,168
  1. Interactivity Previews
  2. Interactivity HTML Codes
  3. Interactivity CSS Codes
  4. Interactivity JS Codes

How do I make an interactivity?

Experiment about Characters with different abilities and machines they can interact with. What is a interactivity? How do you make a interactivity? This script and codes were developed by Kevin Giguere on 30 November 2022, Wednesday.

Interactivity Previews
IQ Test

Interactivity - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactivity</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/lrpqxy.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="game">
<div class="visuals"> <div class="ressourcesBox"></div> <div class="charactersBox"></div> <div class="machinesBox"></div>
</div>
<div class="details"></div>
<div class="victoryScreen" style="display: none;"> <h2>Success</h2> <p>Congratulations, you activated the Win-o-matic</p> <a href="" class="restart">restart</a>
</div>
<div class="tips"> <h2>Help</h2> <div class="tip" name="start"> <p>Your goal is to active the machine on the right.</p> <p>Start by clicking on one of the machine to select it.</p> <p>You can also select a character the same way</p> </div> <div class="tip" name="health" style="display: none;"> <p>Some machine are damaged (see their health).</p> <p>You should probably repair them to use them at full capacity.</p> </div> <div class="tip" name="repair" style="display: none;"> <p>Character skill affect how much they can repair a given machine. </p> <p>You can try to repair with different characters to see the difference</p> </div> <div class="tip" name="miner" style="display: none;"> <p>The miner can provide you metal, however it require a lot of power, an active computer, and someone with the skill to use it</p> </div> <div class="tip" name="win-o-matic" style="display: none;"> <p>This machine can make you win, however it requires a lot of things.</p> <p>Other machine should be able to help you with that</p> </div>
</div>
</div>
<div class="links"> <a href="https://codepen.io/kevthunder/pen/jWopNp" class="prev" target="_top"> <span class="collection">Game Development Experiments</span> <span class="number">pt 5</span> : <span class="title">Approach</span> </a> <a href="https://codepen.io/kevthunder/pen/vLMOLG" class="next" target="_top"> <span class="collection">Game Development Experiments</span> <span class="number">pt 7</span> : <span class="title">Damage Propagation</span> </a>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='http://npmcdn.com/[email protected]/EventEmitter.min.js'></script>
<script src='https://rawgit.com/kevthunder/spark-starter/property-class/dist/spark-starter.min.js'></script>
<script src='js/lrpqxy.js'></script> <script src="js/index.js"></script>
</body>
</html>

Interactivity - Script Codes CSS Codes

@charset "UTF-8";
body { background: #000; color: #666; font-size: 30px; font-family: Verdana, Geneva, sans-serif; text-align: center; position: relative;
}
.game { text-align: left; display: inline-block;
}
.visuals { float: left; height: 230px;
}
.details { width: 300px; font-size: 12px; float: left; border: 1px #333 solid; padding: 1em; margin: 0 15px;
}
.details h2 { text-align: center;
}
.charactersBox, .machinesBox { cursor: pointer;
}
.charactersBox, .machinesBox, .ressourcesBox { margin-bottom: 0.5rem;
}
.charactersBox > div, .machinesBox > div, .ressourcesBox > div { padding: 2px;
}
.charactersBox > div.selected, .machinesBox > div.selected, .ressourcesBox > div.selected { border: 2px #066 solid;
}
.ressourcesBox { width: 250px;
}
.ressourcesBox .ressource { margin-right: 15px;
}
.actions > ul > li { position: relative;
}
.actions > ul > li:hover .requirements { display: block;
}
.actions .impossible a { color: #333;
}
.actions .requirements { background: #111; padding: 5px; display: none; position: absolute; left: 3em; bottom: 100%;
}
.actions .requirements li { list-style: none;
}
.actions .requirements li.pass { color: #363;
}
.actions .requirements li.pass::before { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; margin-right: 0.3em;
}
.actions .requirements li.fail { color: #733;
}
.actions .requirements li.fail::before { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; margin-right: 0.3em;
}
.machine { display: inline-block; font-size: 4rem; position: relative;
}
.machine::before { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "";
}
.machine::after { position: absolute; font-size: 0.25em; left: 40%; top: 32%;
}
.machine.computer::after { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "";
}
.machine.generator::after { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "";
}
.machine.miner::after { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "";
}
.machine.win-o-matic::after { display: inline-block; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "";
}
.victoryScreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; font-size: 15px; padding: 0 30%;
}
.tips { width: 350px; font-size: 14px; clear: both; float: left; margin-bottom: 6em;
}
.tips h2 { margin-top: 0;
}
.tips p { margin: 0.5em 0;
}
.links { font-size: 16px; text-align: left;
}

Interactivity - Script Codes JS Codes

(function() { var $, Action, ActionInstance, BreakPoint, Character, Computer, ComputerRequirement, Element, Force, Game, Generator, InteractiveObject, Machine, Miner, Modificator, OperateAction, RepairAction, Requirement, RequirementInstance, Ressource, RessourceRequirement, SkillRequirement, StatDisplay, StopOperationAction, Tip, TriggerVictoryAction, TurnOffAction, TurnOnAction, WinOMatic, game, extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, hasProp = {}.hasOwnProperty, indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; $ = jQuery; Element = this.Spark.Element; Action = (function() { function Action(name1, options1, type) { this.name = name1; this.options = options1 != null ? options1 : {}; this.type = type != null ? type : ActionInstance; this.requirements = []; if (this.options.req != null) { this.requirements = this.options.req; } } Action.prototype.getInstance = function(actor) { return new this.type(this, actor); }; Action.prototype.getTags = function() { var tags; tags = this.object.getTags(); if (this.options.tags != null) { tags = tags.concat(this.options.tags); } return tags; }; return Action; })(); Requirement = (function(superClass) { extend(Requirement, superClass); function Requirement(funct, text) { this.funct = funct; this.text = text; } Requirement.prototype.getInstance = function(context) { return new RequirementInstance(context, this.funct, this.text); }; return Requirement; })(Element); RequirementInstance = (function(superClass) { extend(RequirementInstance, superClass); RequirementInstance.include(EventEmitter.prototype); function RequirementInstance(context1, funct, textRaw) { this.context = context1; this.funct = funct != null ? funct : null; this.textRaw = textRaw != null ? textRaw : null; } RequirementInstance.getInstance = function(context) { var contruct; contruct = this; return new contruct(context); }; RequirementInstance.properties({ fulfilled: { calcul: function(invalidated) { return this.funct.call(this, invalidated); } }, cls: { calcul: function(invalidated) { var classes; classes = [invalidated.prop('fulfilled') ? 'pass' : 'fail']; if (!invalidated.prop('visible')) { classes.push('hide'); } return classes; }, change: function(old) { var cls, i, j, len, len1, ref, results; if (this.getPropertyInstance('display').calculated) { for (i = 0, len = old.length; i < len; i++) { cls = old[i]; this.display.removeClass(cls); } ref = this.cls; results = []; for (j = 0, len1 = ref.length; j < len1; j++) { cls = ref[j]; results.push(this.display.addClass(cls)); } return results; } } }, text: { change: function(old) { if (this.getPropertyInstance('display').calculated) { return this.display.text(this.text); } } }, visible: { "default": true }, display: { calcul: function() { var cls, display, i, len, ref; display = $("<li>" + this.text + "</li>"); ref = this.cls; for (i = 0, len = ref.length; i < len; i++) { cls = ref[i]; display.addClass(cls); } return display; } } }); RequirementInstance.prototype.remove = function() { return this.destroyProperties(); }; return RequirementInstance; })(Element); ComputerRequirement = (function(superClass) { extend(ComputerRequirement, superClass); function ComputerRequirement() { return ComputerRequirement.__super__.constructor.apply(this, arguments); } ComputerRequirement.properties({ fulfilled: { calcul: function(invalidated) { return invalidated.prop('activeComputer', game) != null; } }, text: { "default": "Require an active computer" } }); return ComputerRequirement; })(RequirementInstance); RessourceRequirement = (function(superClass) { extend(RessourceRequirement, superClass); function RessourceRequirement(ressource, qte) { this.ressource = ressource; this.qte = qte; } RessourceRequirement.prototype.getInstance = function(context) { return new this.constructor.Instance(context, this.ressource, this.qte); }; return RessourceRequirement; })(Requirement); RessourceRequirement.Instance = (function(superClass) { extend(Instance, superClass); function Instance(context1, ressource, qte) { this.context = context1; this.ressource = ressource; this.qte = qte; } Instance.properties({ fulfilled: { calcul: function(invalidated) { return !this.visible || invalidated.prop('qte', game.ressources[this.ressource]) >= this.qte; } }, text: { calcul: function() { return "Needs " + this.qte + " " + game.ressources[this.ressource].name + " units"; } } }); return Instance; })(RequirementInstance); SkillRequirement = (function(superClass) { extend(SkillRequirement, superClass); function SkillRequirement(descr, tags1, lvl) { this.descr = descr; this.tags = tags1; this.lvl = lvl; } SkillRequirement.prototype.getInstance = function(context) { return new this.constructor.Instance(context, this.descr, this.tags, this.lvl); }; return SkillRequirement; })(Requirement); SkillRequirement.Instance = (function(superClass) { extend(Instance, superClass); function Instance(context1, descr, tags1, lvl) { this.context = context1; this.descr = descr; this.tags = tags1; this.lvl = lvl; } Instance.properties({ fulfilled: { calcul: function(invalidated) { var skill; skill = this.context.actor.calculMod('skill', { tags: this.tags }); return skill >= this.lvl; } }, text: { calcul: function() { return "Require " + this.descr + " skill level " + this.lvl; } } }); return Instance; })(RequirementInstance); ActionInstance = (function(superClass) { extend(ActionInstance, superClass); ActionInstance.include(EventEmitter.prototype); function ActionInstance(action1, actor1) { this.action = action1; this.actor = actor1; this.setupRequirements(); } ActionInstance.properties({ visible: { "default": true, change: function() { if (this.getPropertyInstance('button').calculated) { return this.button.toggle(this.change); } } }, possible: { "default": true, calcul: function(invalidated) { return this.requirements.length === 0 || this.requirements.every(function(req) { return invalidated.prop('fulfilled', req); }); }, change: function() { if (this.startBtn != null) { this.startBtn.toggle(this.possible); } if (this.getPropertyInstance('button').calculated) { this.button.toggleClass('possible', this.possible); return this.button.toggleClass('impossible', !this.possible); } } }, hasOptions: { "default": false }, started: { "default": false }, button: { calcul: function() { var $req, btn, cssClass, self; cssClass = this.possible ? 'possible' : 'impossible'; self = this; btn = $('<li class="' + cssClass + '"><a href="#">' + this.buttonText + '</a></li>').toggle(this.visible).click((function(_this) { return function(e) { _this.btnClick(); return e.preventDefault(); }; })(this)); if (this.requirements.length) { $req = $('<ul class="requirements"></ul>').prependTo(btn); this.requirements.forEach(function(req) { return $req.append(req.display); }); } return btn; } }, buttonText: { calcul: function() { return this.action.name; }, change: function() { if (this.getPropertyInstance('button').calculated) { return $('a', this.button).text(this.buttonText); } } }, actorStatusText: { calcul: function() { return "Currently performing " + this.action.name + " on " + this.action.object.name; } }, targetStatusText: { calcul: function() { return this.action.name + " performed by " + this.actor.name; } }, infoDisplay: { calcul: function() { var display; display = $('<div class="actioInfo"> <h3>' + this.action.name + '</h3> <div class="actions"> <ul> </ul> </div> </div>'); $('.actions > ul', display).append(this.startBtn = $('<li><a href="#">Start</a></li>').toggle(this.possible).click((function(_this) { return function(e) { _this.unselect(); _this.start(); return e.preventDefault(); }; })(this))); $('.actions > ul', display).append($('<li><a href="#">Cancel</a></li>').click((function(_this) { return function(e) { _this.unselect(); return e.preventDefault(); }; })(this))); return display; } } }); ActionInstance.prototype.setupRequirements = function() { this.requirements = this.action.requirements.map((function(_this) { return function(req) { return req.getInstance(_this); }; })(this)); if (this.constructor.requirements) { return this.requirements = this.requirements.concat(this.constructor.requirements.map((function(_this) { return function(req) { return req.getInstance(_this); }; })(this))); } }; ActionInstance.prototype.remove = function() { this.destroyProperties(); return this.requirements.forEach(function(req) { return req.remove(); }); }; ActionInstance.prototype.getTags = function() { return this.action.getTags(); }; ActionInstance.prototype.btnClick = function() { if (this.hasOptions) { return this.select(); } else if (this.possible) { return this.start(); } }; ActionInstance.prototype.select = function() { var actions; actions = this.button.closest('.actions'); $('> .actioInfo', actions).remove(); $('> ul', actions).hide(); return $(actions).append(this.getInfoDisplay()); }; ActionInstance.prototype.unselect = function() { var actions; actions = this.button.closest('.actions'); $('> .actioInfo', actions).remove(); $('> ul', actions).show(); return this.infoDisplay = null; }; ActionInstance.prototype.start = function() { var ref; if (this.possible) { if (this.actor.currentAction != null) { this.actor.currentAction.cancel(); } this.actor.currentAction = this; if (((ref = this.action.object) != null ? ref.activeActions : void 0) != null) { this.action.object.activeActions.push(this); } this.started = true; return true; } }; ActionInstance.prototype.end = function() { var ref; if (this.actor.currentAction === this) { if (((ref = this.action.object) != null ? ref.activeActions : void 0) != null) { this.action.object.activeActions.remove(this); } this.started = false; this.actor.currentAction = null; return true; } }; ActionInstance.prototype.cancel = function() { return this.end(); }; ActionInstance.prototype.finish = function() { if (this.end()) { if (this.nextAction != null) { return this.nextAction.start(); } } }; return ActionInstance; })(Element); ActionInstance.HealthRequirement = (function(superClass) { extend(HealthRequirement, superClass); function HealthRequirement(health) { this.health = health != null ? health : 100; } HealthRequirement.prototype.getInstance = function(context) { return new this.constructor.Instance(context, this.health); }; return HealthRequirement; })(Requirement); ActionInstance.HealthRequirement.Instance = (function(superClass) { extend(Instance, superClass); function Instance(context1, health) { this.context = context1; this.health = health != null ? health : 100; } Instance.properties({ fulfilled: { calcul: function(invalidated) { return invalidated.prop('health', this.context.action.object) >= this.health; } }, text: { calcul: function() { if (this.health === 100) { return "Should be fully Repared"; } else { return "Health Should be at least " + this.health + "%"; } } } }); return Instance; })(RequirementInstance); ActionInstance.PowerRequirement = (function(superClass) { extend(PowerRequirement, superClass); function PowerRequirement(power) { this.power = power != null ? power : null; } PowerRequirement.prototype.getInstance = function(context) { return new this.constructor.Instance(context, this.power); }; return PowerRequirement; })(Requirement); ActionInstance.PowerRequirement.Instance = (function(superClass) { extend(Instance, superClass); function Instance(context1, power) { this.context = context1; this.power = power != null ? power : null; } Instance.properties({ fulfilled: { calcul: function(invalidated) { return !this.visible || invalidated.prop('available', game.ressources.power) >= this.powerRequired; } }, powerRequired: { calcul: function(invalidated) { if (this.power != null) { return this.power; } else { return this.context.action.object.powerConsumed; } } }, visible: { calcul: function(invalidated) { return (this.power != null) || (this.context.action.object.powerConsumed != null); } }, text: { calcul: function() { return "Needs " + this.powerRequired + " Power units"; } } }); return Instance; })(RequirementInstance); RepairAction = (function(superClass) { extend(RepairAction, superClass); function RepairAction() { return RepairAction.__super__.constructor.apply(this, arguments); } RepairAction.requirements = [ RepairAction.Requirement = (function(superClass1) { extend(Requirement, superClass1); function Requirement() { return Requirement.__super__.constructor.apply(this, arguments); } Requirement.properties({ fulfilled: { calcul: function(invalidated) { var next; next = this.context.action.object.getNextBreakPoint(); return (next == null) || invalidated.prop('health', this.context.action.object) !== next.prc - 1 || this.context.canPassBreakPoint(next); } }, text: { calcul: function(invalidated) { var prc; if (invalidated.prop('fulfilled')) { prc = this.context.getBestBreakPointPrc(); if (prc === 100) { return "Can be repaired fully with current skill level"; } else { return "Can be repaired up to " + prc + "% with current skill level"; } } else { return "Canot be repaired with current skill level"; } } } }); return Requirement; })(RequirementInstance) ]; RepairAction.create = function() { return new Action('Repair', { tags: 'repair' }, RepairAction); }; RepairAction.properties({ maxRepair: { calcul: function() { var next, pos; pos = this.action.object.health; next = this.action.object.getNextBreakPointAt(pos); while ((next != null) && this.canPassBreakPoint(next)) { pos = next.prc; next = this.action.object.getNextBreakPointAt(pos); } if (next != null) { return next.prc - 1; } else { return 100; } } }, tickDelay: { calcul: function() { var speed; speed = this.action.object.getPrevBreakPoint().repairSpeed; return 1000 / speed; } }, visible: { calcul: function(invalidated) { return invalidated.prop('health', this.action.object) < 100; } } }); RepairAction.prototype.canPassBreakPoint = function(breakPoint) { return breakPoint.repairComplexity <= this.getActorSkill(); }; RepairAction.prototype.getBestBreakPointPrc = function() { var i, len, min, pt, ref; min = null; ref = this.action.object.breakPoints; for (i = 0, len = ref.length; i < len; i++) { pt = ref[i]; if (pt.repairComplexity > this.getActorSkill() && ((min == null) || min.prc > pt.prc)) { min = pt; } } if (min != null) { return min.prc - 1; } else { return 100; } }; RepairAction.prototype.getActorSkill = function() { return this.actor.calculMod('skill', this); }; RepairAction.prototype.start = function() { if (RepairAction.__super__.start.call(this)) { game.showTip('repair'); this.interval = setInterval((function(_this) { return function() { if (_this.action.object.health < _this.maxRepair) { _this.action.object.health++; } if (_this.action.object.health >= _this.maxRepair) { return _this.finish(); } }; })(this), this.tickDelay); return true; } }; RepairAction.prototype.end = function() { RepairAction.__super__.end.call(this); return clearInterval(this.interval); }; return RepairAction; })(ActionInstance); TurnOnAction = (function(superClass) { extend(TurnOnAction, superClass); function TurnOnAction() { return TurnOnAction.__super__.constructor.apply(this, arguments); } TurnOnAction.requirements = [new ActionInstance.HealthRequirement(), new ActionInstance.PowerRequirement()]; TurnOnAction.prototype.setupRequirements = function() { TurnOnAction.__super__.setupRequirements.call(this); if (this.action.options.requireComputer) { return this.requirements.push(new ComputerRequirement(this)); } }; TurnOnAction.create = function(options) { if (options == null) { options = {}; } return new Action('Turn on', Object.assign({ tags: 'turn-on' }, options), TurnOnAction); }; TurnOnAction.properties({ visible: { calcul: function(invalidated) { return !invalidated.prop('enabled', this.action.object); } } }); TurnOnAction.prototype.start = function() { this.action.object.enabled = true; return this.finish(); }; return TurnOnAction; })(ActionInstance); TurnOffAction = (function(superClass) { extend(TurnOffAction, superClass); function TurnOffAction() { return TurnOffAction.__super__.constructor.apply(this, arguments); } TurnOffAction.create = function() { return new Action('Turn off', { tags: 'turn-off' }, TurnOffAction); }; TurnOffAction.properties({ visible: { calcul: function(invalidated) { return invalidated.prop('enabled', this.action.object); } } }); TurnOffAction.prototype.updateVisible = function() { this.visible = this.initVisible(); return null; }; TurnOffAction.prototype.start = function() { this.action.object.enabled = false; return this.finish(); }; return TurnOffAction; })(ActionInstance); OperateAction = (function(superClass) { extend(OperateAction, superClass); function OperateAction() { return OperateAction.__super__.constructor.apply(this, arguments); } OperateAction.requirements = [new ActionInstance.HealthRequirement(), new ActionInstance.PowerRequirement()]; OperateAction.create = function(options) { if (options == null) { options = {}; } return new Action('Operate', Object.assign({ tags: 'operate' }, options), OperateAction); }; OperateAction.properties({ visible: { calcul: function(invalidated) { return invalidated.prop('alreadyOperated') == null; } }, targetStatusText: { calcul: function() { return "Operated by " + this.actor.name; } }, alreadyOperated: { calcul: function(invalidated) { if (invalidated.prop('started')) { return this; } else { return invalidated.prop('activeActions', this.action.object).find(function(act) { return act instanceof OperateAction && invalidated.prop('started', act); }); } } } }); OperateAction.prototype.setupRequirements = function() { OperateAction.__super__.setupRequirements.call(this); if (this.action.options.requireComputer) { return this.requirements.push(new ComputerRequirement(this)); } }; OperateAction.prototype.start = function() { if (OperateAction.__super__.start.call(this)) { return this.action.object.enabled = true; } }; OperateAction.prototype.end = function() { OperateAction.__super__.end.call(this); return this.action.object.enabled = false; }; return OperateAction; })(ActionInstance); StopOperationAction = (function(superClass) { extend(StopOperationAction, superClass); function StopOperationAction() { return StopOperationAction.__super__.constructor.apply(this, arguments); } StopOperationAction.create = function(options) { if (options == null) { options = {}; } return new Action('Stop Operation', Object.assign({ tags: 'stop-operate' }, options), StopOperationAction); }; StopOperationAction.properties({ visible: { calcul: function(invalidated) { return invalidated.prop('alreadyOperated') != null; } }, alreadyOperated: { calcul: function(invalidated) { return invalidated.prop('activeActions', this.action.object).find(function(act) { return act instanceof OperateAction && invalidated.prop('started', act); }); } } }); StopOperationAction.prototype.start = function() { if (this.alreadyOperated != null) { this.alreadyOperated.finish(); return this.finish(); } }; return StopOperationAction; })(ActionInstance); TriggerVictoryAction = (function(superClass) { extend(TriggerVictoryAction, superClass); function TriggerVictoryAction() { return TriggerVictoryAction.__super__.constructor.apply(this, arguments); } TriggerVictoryAction.requirements = [new ActionInstance.HealthRequirement(), new ActionInstance.PowerRequirement(), ComputerRequirement, new SkillRequirement('Win-o-matic', ['win-o-matic'], 10)]; TriggerVictoryAction.create = function() { return new Action('Make me win!', { tags: 'trigger-victory' }, TriggerVictoryAction); }; TriggerVictoryAction.prototype.setupRequirements = function() { TriggerVictoryAction.__super__.setupRequirements.call(this); return this.requirements.push(new RessourceRequirement.Instance(this, 'metal', this.action.object.metalConsumed)); }; TriggerVictoryAction.prototype.start = function() { game.win(); return this.finish(); }; return TriggerVictoryAction; })(ActionInstance); StatDisplay = (function(superClass) { extend(StatDisplay, superClass); function StatDisplay(title, callback) { this.title = title; this.callback = callback; } StatDisplay.properties({ display: { calcul: function() { return $('<dt>' + this.title + '</dt><dd>' + this.getVal() + '</dd>'); } } }); StatDisplay.prototype.getVal = function() { return this.callback(); }; StatDisplay.prototype.update = function() { if (this.getPropertyInstance('display').calculated) { return this.display.filter('dd').html(this.getVal()); } }; return StatDisplay; })(Element); InteractiveObject = (function(superClass) { extend(InteractiveObject, superClass); function InteractiveObject(name1) { this.name = name1; this.bindEvents(); this.actions = []; this.stats = {}; this.tags = []; } InteractiveObject.prototype.init = function() {}; InteractiveObject.prototype.bindEvents = function() { return this.display.click((function(_this) { return function() { return game.selectObject(_this); }; })(this)); }; InteractiveObject.properties({ activeActions: { collection: true, change: function() { return this.updateStatus(); } }, currentAction: { change: function() { return this.updateStatus(); } }, selected: { change: function() { return this.display.toggleClass('selected', this.selected); } } }); InteractiveObject.prototype.getInfoDisplay = function(actor) { var actionInst, display, i, key, len, ref, ref1, stat; display = $('<div class="objectInfo"><h2>' + this.name + '</h2><ul class="status"></ul><dl class="stats"></dl><div class="actions"><h3>Actions</h3><ul></ul></div></div>'); ref = this.stats; for (key in ref) { stat = ref[key]; $('>.stats', display).append(stat.display); } this.actionInContext = this.actions.map(function(action) { return action.getInstance(actor); }); $('>.actions', display).toggle(this.actionInContext.length > 0); ref1 = this.actionInContext; for (i = 0, len = ref1.length; i < len; i++) { actionInst = ref1[i]; $('>.actions > ul', display).append(actionInst.getButton()); } this.infoDisplay = display; this.updateStatus(); return display; }; InteractiveObject.prototype.removeInfoDisplay = function() { var actionInst, i, len, ref; ref = this.actionInContext; for (i = 0, len = ref.length; i < len; i++) { actionInst = ref[i]; actionInst.remove(); } this.actionInContext = []; return this.infoDisplay = null; }; InteractiveObject.prototype.updateStatus = function() { var li; if (this.infoDisplay != null) { $('>.status', this.infoDisplay).empty(); if ((this.currentAction != null) && (this.currentAction.actorStatusText != null)) { li = $('<li></li>').appendTo($('>.status', this.infoDisplay)).text(this.currentAction.actorStatusText + ' '); $('<a href="" class="cancelAction">Stop</a>').appendTo(li).click((function(_this) { return function(e) { _this.currentAction.cancel(); return e.preventDefault(); }; })(this)); } return this.activeActions.forEach((function(_this) { return function(act) { if (act.targetStatusText) { li = $('<li></li>').appendTo($('>.status', _this.infoDisplay)).text(act.targetStatusText + ' '); return $('<a href="" class="cancelAction">Stop</a>').appendTo(li).click(function(e) { act.cancel(); return e.preventDefault(); }); } }; })(this)); } }; InteractiveObject.prototype.addAction = function(action) { this.actions.push(action); return action.object = this; }; InteractiveObject.prototype.getTags = function() { return this.tags; }; return InteractiveObject; })(Element); Character = (function(superClass) { extend(Character, superClass); function Character(name1, data) { var i, key, len, mod, val; this.name = name1; if (data == null) { data = {}; } this.display = $(document.createElement("div")).addClass('character').addClass('fa').addClass('fa-smile-o').appendTo('.charactersBox'); Character.__super__.constructor.call(this, this.name); this.modificators = []; for (key in data) { val = data[key]; if (key = 'modificators' || (key = 'mods')) { for (i = 0, len = val.length; i < len; i++) { mod = val[i]; this.addModificator(mod); } } else { this[key] = val; } } } Character.prototype.addModificator = function(mod) { this.modificators.push(mod); return mod.object = this; }; Character.prototype.calculMod = function(modName, context, def) { var i, len, mod, ref, res; if (context == null) { context = null; } if (def == null) { def = 0; } res = def; ref = this.modificators; for (i = 0, len = ref.length; i < len; i++) { mod = ref[i]; if (mod.available(modName, context)) { res = mod.applyTo(res, modName, context); } } return res; }; Character.prototype.getInfoDisplay = function(actor) { var display, i, len, mod, ref; display = Character.__super__.getInfoDisplay.call(this, actor); if (this.modificators.length > 0) { display.append('<div class="modificators"><h3>Skills</h3><ul class="mod-list"></ul></div>'); ref = this.modificators; for (i = 0, len = ref.length; i < len; i++) { mod = ref[i]; $('.mod-list', display).append('<li>' + mod.descr + ' lvl ' + mod.mods.skill + '</li>'); } } return display; }; return Character; })(InteractiveObject); Machine = (function(superClass) { extend(Machine, superClass); Machine.include(EventEmitter.prototype); function Machine(name1, data) { var key, val; this.name = name1; if (data == null) { data = {}; } this.display = $(document.createElement("div")).addClass('machine').addClass(this.name.toLowerCase()).appendTo('.machinesBox'); Machine.__super__.constructor.call(this, this.name); this.addAction(RepairAction.create()); this.stats = { health: new StatDisplay('Health', (function(_this) { return function() { return _this.health + '%'; }; })(this)) }; this.breakPoints = []; for (key in data) { val = data[key]; this[key] = val; } } Machine.properties({ health: { "default": 100, change: function() { this.stats.health.update(); return this._efficiency = null; } }, selected: { change: function(old, overrided) { overrided(old); if (this.health < 100) { return game.showTip('health'); } } }, efficiency: { calcul: function() { var max, maxPos, min, minPos, next, prev; next = this.getNextBreakPoint(); maxPos = next != null ? next.prc - 1 : 100; max = next != null ? (next.efficiencyBefore != null ? next.efficiencyBefore : next.prc - 1) : 100; prev = this.getPrevBreakPoint(); minPos = prev.prc; min = prev.efficiency != null ? prev.efficiency : prev.prc; return Math.floor((this.health - minPos) / (maxPos - minPos) * (max - min) + min); } } }); Machine.prototype.getDefaultBreakPoint = function() { return new BreakPoint(0); }; Machine.prototype.getNextBreakPointAt = function(prc) { var i, len, min, pt, ref; min = null; ref = this.breakPoints; for (i = 0, len = ref.length; i < len; i++) { pt = ref[i]; if (pt.prc > prc && ((min == null) || min.prc > pt.prc)) { min = pt; } } return min; }; Machine.prototype.getPrevBreakPointAt = function(prc) { var i, len, max, pt, ref; max = null; ref = this.breakPoints; for (i = 0, len = ref.length; i < len; i++) { pt = ref[i]; if (pt.prc <= prc && ((max == null) || max.prc < pt.prc)) { max = pt; } } if (max == null) { max = this.getDefaultBreakPoint(); } return max; }; Machine.prototype.getNextBreakPoint = function() { return this.getNextBreakPointAt(this.health); }; Machine.prototype.getNextBreakPrc = function() { var pt; pt = this.getNextBreakPointAt(this.health); if (pt != null) { return pt.prc; } else { return 100; } }; Machine.prototype.getPrevBreakPoint = function() { return this.getPrevBreakPointAt(this.health); }; return Machine; })(InteractiveObject); Generator = (function(superClass) { extend(Generator, superClass); function Generator(name1, data) { this.name = name1; if (data == null) { data = {}; } Generator.__super__.constructor.call(this, this.name, data); this.tags.push('generator'); this.provider = (function(_this) { return function() { return _this.power; }; })(this); } Generator.prototype.init = function() { return game.ressources.power.addProvider(this.provider); }; Generator.properties({ maxPower: { "default": 100 }, power: { get: function() { return Math.floor(this.maxPower * this.efficiency / 100); } }, health: { "default": 100, change: function(old, overrided) { overrided(old); if ((typeof game !== "undefined" && game !== null ? game.ressources : void 0) != null) { return game.ressources.power.calcul(); } } } }); return Generator; })(Machine); Miner = (function(superClass) { extend(Miner, superClass); function Miner(name1, data) { this.name = name1; if (data == null) { data = {}; } Miner.__super__.constructor.call(this, this.name, data); this.tags.push('miner'); this.powerRequest = (function(_this) { return function() { return _this.powerConsumed; }; })(this); this.addAction(OperateAction.create({ requireComputer: true, req: [new SkillRequirement('mining', ['miner'], 4)] })); this.addAction(StopOperationAction.create()); this.extractTime = 1000; } Miner.properties({ powerConsumed: { "default": 75 }, selected: { change: function(old, overrided) { overrided(old); return game.showTip('miner'); } }, enabled: { "default": false, change: function() { if (this.enabled) { game.ressources.power.addRequester(this.powerRequest); return this.interval = setInterval((function(_this) { return function() { return _this.extractRessource(); }; })(this), this.extractTime); } else { clearInterval(this.interval); return game.ressources.power.removeRequester(this.powerRequest); } } } }); Miner.prototype.extractRessource = function() { return game.ressources.metal.qte += 1; }; return Miner; })(Machine); Computer = (function(superClass) { extend(Computer, superClass); function Computer(name1, data) { this.name = name1; if (data == null) { data = {}; } Computer.__super__.constructor.call(this, this.name, data); this.tags.push('computer'); this.powerRequest = (function(_this) { return function() { return _this.powerConsumed; }; })(this); this.addAction(TurnOnAction.create()); this.addAction(TurnOffAction.create()); } Computer.properties({ powerConsumed: { "default": 25 }, enabled: { "default": false, change: function() { if (this.enabled) { game.ressources.power.addRequester(this.powerRequest); return game.activeComputer = this; } else { game.ressources.power.removeRequester(this.powerRequest); return game.activeComputer = null; } } } }); return Computer; })(Machine); WinOMatic = (function(superClass) { extend(WinOMatic, superClass); function WinOMatic(name1, data) { this.name = name1; if (data == null) { data = {}; } WinOMatic.__super__.constructor.call(this, this.name, data); this.tags.push('win-o-matic'); this.addAction(TriggerVictoryAction.create()); } WinOMatic.properties({ selected: { change: function(old, overrided) { overrided(old); return game.showTip('win-o-matic'); } }, powerConsumed: { "default": 75 }, metalConsumed: { "default": 50 } }); return WinOMatic; })(Machine); BreakPoint = (function() { function BreakPoint(prc1, data) { var key, val; this.prc = prc1; this.repairComplexity = 0; this.repairCosts = {}; this.repairSpeed = 2; for (key in data) { val = data[key]; this[key] = val; } } return BreakPoint; })(); Ressource = (function(superClass) { extend(Ressource, superClass); Ressource.include(EventEmitter.prototype); function Ressource(name1) { this.name = name1; if (this.icon == null) { this.icon = 'fa-cube'; } this.display = $(document.createElement("div")).addClass('ressource').addClass('fa').addClass(this.icon).appendTo('.ressourcesBox').text(this.getText()); } Ressource.properties({ qte: { "default": 0, change: function() { return this.display.text(this.getText()); } } }); Ressource.prototype.getText = function() { return this.qte; }; return Ressource; })(Element); Force = (function(superClass) { extend(Force, superClass); function Force(name1) { this.name = name1; this.icon = 'fa-bolt'; Force.__super__.constructor.call(this, this.name); this.providers = []; this.requesters = []; } Force.properties({ drawn: { "default": 0, change: function() { return this.display.text(this.getText()); } }, available: { "default": 0 } }); Force.prototype.addProvider = function(provider) { this.providers.push(provider); return this.calcul(); }; Force.prototype.addRequester = function(requester) { this.requesters.push(requester); return this.calcul(); }; Force.prototype.removeRequester = function(requester) { var index; index = this.requesters.indexOf(requester); if (index > -1) { this.requesters.splice(index, 1); } return this.calcul(); }; Force.prototype.setStrength = function(val) { return this.qte = val; }; Force.prototype.calcul = function() { this.calculStrength(); this.calculDrawn(); return this.available = this.qte - this.drawn; }; Force.prototype.calculStrength = function() { var i, len, provider, ref, strength; strength = 0; ref = this.providers; for (i = 0, len = ref.length; i < len; i++) { provider = ref[i]; strength += provider(strength); } return this.setStrength(strength); }; Force.prototype.calculDrawn = function() { var i, len, ref, requester, strength; strength = 0; ref = this.requesters; for (i = 0, len = ref.length; i < len; i++) { requester = ref[i]; strength += requester(strength); } return this.drawn = strength; }; Force.prototype.getText = function() { return this.drawn + '/' + this.qte; }; return Force; })(Ressource); Modificator = (function() { function Modificator(descr, mods, cond1) { this.descr = descr; this.mods = mods; this.cond = cond1 != null ? cond1 : null; } Modificator.prototype.available = function(prop, context) { return prop in this.mods && (!this.cond || this.cond.call(this, context)); }; Modificator.prototype.applyTo = function(val, prop, context) { return val + this.mods[prop]; }; Modificator.cond = { tags: function(tags) { var cond; if (tags.constructor !== Array) { tags = [tags]; } cond = function(context) { var contextTags, i, len, tag; contextTags = typeof context.getTags === "function" ? context.getTags() : Array.isArray(context.tags) ? context.tags : []; for (i = 0, len = tags.length; i < len; i++) { tag = tags[i]; if (indexOf.call(contextTags, tag) < 0) { return false; } } return true; }; cond.tags = tags; return cond; } }; return Modificator; })(); Tip = (function(superClass) { extend(Tip, superClass); function Tip(elem1) { this.elem = elem1; } Tip.properties({ shown: { "default": false }, show: { "default": false, change: function() { this.elem.toggle(this.show); if (this.show) { return this.shown = true; } } } }); return Tip; })(Element); Game = (function(superClass) { extend(Game, superClass); Game.include(EventEmitter.prototype); function Game() { var game; this.activeComputer = null; this.ressources = { power: new Force('Power'), metal: new Ressource('Metal') }; this.characters = [ new Character('Mike', { mods: [ new Modificator('Reactor knowledge', { skill: 10 }, Modificator.cond.tags('generator')), new Modificator('Mining studies', { skill: 5 }, Modificator.cond.tags('miner')) ] }), new Character('Jonny', { mods: [ new Modificator('Reparation expert', { skill: 5 }, Modificator.cond.tags('repair')) ] }), new Character('Carl', { mods: [ new Modificator('Win-o-matic mastery', { skill: 10 }, Modificator.cond.tags('win-o-matic')), new Modificator('Mining studies', { skill: 5 }, Modificator.cond.tags('miner')) ] }) ]; this.machines = [ new Computer('Computer', { health: 60, breakPoints: [ new BreakPoint(75, { repairComplexity: 4 }) ] }), new Generator('Generator', { health: 50, breakPoints: [ new BreakPoint(55, { repairComplexity: 4 }), new BreakPoint(75, { repairComplexity: 9 }) ] }), new Miner('Miner', {}), new WinOMatic('Win-o-matic', {}) ]; this.tips = {}; game = this; $('.tips .tip').each(function() { var elem; elem = $(this); return game.tips[elem.attr('name')] = new Tip(elem); }); } Game.properties({ activeComputer: {}, currentTip: { change: function(old) { if (old != null) { old.show = false; } return this.currentTip.show = true; } } }); Game.prototype.start = function() { var character, i, j, len, len1, machine, ref, ref1; ref = this.characters; for (i = 0, len = ref.length; i < len; i++) { character = ref[i]; character.init(); } ref1 = this.machines; for (j = 0, len1 = ref1.length; j < len1; j++) { machine = ref1[j]; machine.init(); } this.showTip('start'); return $("a.restart").click(function(e) { game.restart(); return e.preventDefault(); }); }; Game.prototype.selectCharacter = function(character) { if (this.selectedCharacter != null) { this.selectedCharacter.selected = false; } this.selectedCharacter = character; return this.selectedCharacter.selected = true; }; Game.prototype.selectObject = function(obj) { if (obj instanceof Character) { this.selectCharacter(obj); } if ((this.selectedObject != null) && !(this.selectedObject instanceof Character)) { this.selectedObject.selected = false; this.selectedObject.removeInfoDisplay(); } this.selectedObject = obj; if (this.selectedObject != null) { this.selectedObject.selected = true; return $('.details').empty().append(this.selectedObject.getInfoDisplay(this.selectedCharacter)); } }; Game.prototype.showTip = function(name) { if ((this.tips[name] != null) && !this.tips[name].shown) { return this.currentTip = this.tips[name]; } }; Game.prototype.win = function() { return $(".victoryScreen").show(); }; Game.prototype.restart = function() { this.machines[0].enabled = false; this.machines[0].health = 60; this.machines[1].health = 50; this.machines[2].enabled = false; this.ressources.metal.qte = 0; this.characters.forEach(function(char) { if (char.currentAction != null) { return char.currentAction.cancel(); } }); return $(".victoryScreen").hide(); }; return Game; })(Element); this.game = game = new Game(); game.start(); game.selectObject(game.characters[0]);
}).call(this);
Interactivity - Script Codes
Interactivity - Script Codes
Home Page Home
Developer Kevin Giguere
Username kevthunder
Uploaded November 30, 2022
Rating 3
Size 19,158 Kb
Views 14,168
Do you need developer help for Interactivity?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Giguere (kevthunder) Script Codes
Name
Line-of-sight
Room Generator
Path finder
Keyboard capture
Pen-Navigation
Wiring
Giving orders
Brawl
Strategy
Fog of war
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!