Created
February 27, 2019 18:59
-
-
Save acidsound/43166189dcb8cfa456cb8f4a38f3d80a to your computer and use it in GitHub Desktop.
JS Bin Blaze-Ladder Game // source https://jsbin.com/feceh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta name="description" content="Blaze-Ladder Game"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <script type="text/spacebars" name="main"> | |
| <div class="selector" id="left"></div> | |
| <div class="selector" id="right"></div> | |
| <div class="ladder"> | |
| {{#each ladder}} | |
| <div class="{{s}}"></div> | |
| {{/each}} | |
| </div> | |
| </script> | |
| <script src="http://jsbin.com/yeceqe.js"></script> | |
| <style id="jsbin-css"> | |
| .selector { | |
| background: #eaa; | |
| width: 20px; | |
| height: 20px; | |
| margin-right: 182px; | |
| float: left; | |
| } | |
| .selector + .selector { | |
| margin-right: 0px; | |
| } | |
| .ladder { | |
| clear: both; | |
| margin-left: 10px; | |
| } | |
| .ladder div { | |
| width: 200px; | |
| height: 70px; | |
| border-left-color: black; | |
| border-left-width: 1px; | |
| border-left-style: solid; | |
| border-right-color: black; | |
| border-right-width: 1px; | |
| border-right-style: solid; | |
| border-top-color: black; | |
| border-top-width: 1px; | |
| border-top-style: solid; | |
| } | |
| .ladder div:first-child { | |
| border-top-style: none; | |
| } | |
| .ladder .ladder_1 { | |
| border-top-width: 3px; | |
| border-left-width: 3px; | |
| } | |
| .ladder .ladder_2 { | |
| border-top-width: 3px; | |
| border-right-width: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| var a; | |
| this.ladderSize = 6; | |
| this.sides = new Blaze.Var((function() { | |
| var _i, _results; | |
| _results = []; | |
| for (a = _i = 1; 1 <= ladderSize ? _i <= ladderSize : _i >= ladderSize; a = 1 <= ladderSize ? ++_i : --_i) { | |
| _results.push({ | |
| s: 'ladder_body' | |
| }); | |
| } | |
| return _results; | |
| })()); | |
| Template.main.helpers({ | |
| ladder: function() { | |
| return sides.get(); | |
| } | |
| }); | |
| Template.main.events({ | |
| 'click .selector': function(e) { | |
| var node; | |
| node = $(e.target).attr('id'); | |
| return sides.set((function() { | |
| var _i, _results; | |
| _results = []; | |
| for (a = _i = 1; 1 <= ladderSize ? _i <= ladderSize : _i >= ladderSize; a = 1 <= ladderSize ? ++_i : --_i) { | |
| _results.push({ | |
| s: 'ladder_' + (((a + (node === 'left' && 1 || 0)) % 2) + 1) | |
| }); | |
| } | |
| return _results; | |
| })()); | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.selector { | |
| background: #eaa; | |
| width: 20px; | |
| height: 20px; | |
| margin-right: 182px; | |
| float:left; | |
| } | |
| .selector+.selector { | |
| margin-right: 0px; | |
| } | |
| .ladder { | |
| clear:both; | |
| margin-left: 10px; | |
| div { | |
| width: 200px; | |
| height: 70px; | |
| border-left-color: black; | |
| border-left-width: 1px; | |
| border-left-style: solid; | |
| border-right-color: black; | |
| border-right-width: 1px; | |
| border-right-style: solid; | |
| border-top-color: black; | |
| border-top-width: 1px; | |
| border-top-style: solid; | |
| } | |
| div:first-child { | |
| border-top-style: none; | |
| } | |
| .ladder_1 { | |
| border-top-width: 3px; | |
| border-left-width: 3px; | |
| } | |
| .ladder_2 { | |
| border-top-width: 3px; | |
| border-right-width: 3px; | |
| } | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">@ladderSize=6 | |
| @sides = new Blaze.Var(s:'ladder_body' for a in [1..ladderSize]) | |
| Template.main.helpers | |
| ladder: -> | |
| sides.get() | |
| Template.main.events | |
| 'click .selector': (e)-> | |
| node = $(e.target).attr 'id' | |
| sides.set(s: 'ladder_'+(( | |
| (a+(node is 'left' and 1 or 0)) % 2 | |
| )+1) for a in [1..ladderSize])</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .selector { | |
| background: #eaa; | |
| width: 20px; | |
| height: 20px; | |
| margin-right: 182px; | |
| float: left; | |
| } | |
| .selector + .selector { | |
| margin-right: 0px; | |
| } | |
| .ladder { | |
| clear: both; | |
| margin-left: 10px; | |
| } | |
| .ladder div { | |
| width: 200px; | |
| height: 70px; | |
| border-left-color: black; | |
| border-left-width: 1px; | |
| border-left-style: solid; | |
| border-right-color: black; | |
| border-right-width: 1px; | |
| border-right-style: solid; | |
| border-top-color: black; | |
| border-top-width: 1px; | |
| border-top-style: solid; | |
| } | |
| .ladder div:first-child { | |
| border-top-style: none; | |
| } | |
| .ladder .ladder_1 { | |
| border-top-width: 3px; | |
| border-left-width: 3px; | |
| } | |
| .ladder .ladder_2 { | |
| border-top-width: 3px; | |
| border-right-width: 3px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var a; | |
| this.ladderSize = 6; | |
| this.sides = new Blaze.Var((function() { | |
| var _i, _results; | |
| _results = []; | |
| for (a = _i = 1; 1 <= ladderSize ? _i <= ladderSize : _i >= ladderSize; a = 1 <= ladderSize ? ++_i : --_i) { | |
| _results.push({ | |
| s: 'ladder_body' | |
| }); | |
| } | |
| return _results; | |
| })()); | |
| Template.main.helpers({ | |
| ladder: function() { | |
| return sides.get(); | |
| } | |
| }); | |
| Template.main.events({ | |
| 'click .selector': function(e) { | |
| var node; | |
| node = $(e.target).attr('id'); | |
| return sides.set((function() { | |
| var _i, _results; | |
| _results = []; | |
| for (a = _i = 1; 1 <= ladderSize ? _i <= ladderSize : _i >= ladderSize; a = 1 <= ladderSize ? ++_i : --_i) { | |
| _results.push({ | |
| s: 'ladder_' + (((a + (node === 'left' && 1 || 0)) % 2) + 1) | |
| }); | |
| } | |
| return _results; | |
| })()); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment