(Revised) Lightning effect

OurJud
24 Dec 2016, 18:47

Credit for the JavaScript goes to The Pixie (Thank you)

NB: I suspect this will only be practical for those NOT using the default panes such as compass, etc, because of the custom width.

  • Set your game's background to black (or very dark colour)
  • Use a custom width of 1300, and left / right margins of 300
  • In your game code add the following JavaScript just before your </game> tag:
<js><![CDATA[
    <script>
      events = [0];
      onColour = 'black';
      offColour = 'white';
      state = false;
      startTime = 0;
      active = null;
      
      function setTimer(col, s) {
        if (active) return;
        
        offColour = $('#gameBorder').css('background-color');
        events = [0];
        onColour = col;
        d = new Date();
        startTime = d.getTime();
        active = setInterval(myTimer, 10);
        ary = s.split(';');
        count = 0;
        for (i = 0; i < ary.length; i++) {
          count += parseInt(ary[i]);
          events.push(count);
        }
        counter = events.length;
      }

      function myTimer() {
        timeNow = new Date();
        lapsed = timeNow.getTime() - startTime;
        for (var i = 0; i < events.length; i++) { 
          if (events[i] < lapsed) {
            if (state) {
              $('#gameBorder').css('background-color', offColour);
            } else {
              $('#gameBorder').css('background-color', onColour);
            }
            state = !state;
            events[i] = 9999999999;
            counter--;
          }
        }
        if (counter < 1) {
          clearInterval(active);
          active = null;
        }
      }
    </script>
    ]]></js>
  • In your game's start script add:
JS.addText (game.js)
JS.eval ("$('#gamePanesRunning').css('background-color', 'transparent');")
JS.eval ("$('#gamePanes').css('background-color', 'transparent');")

And finally, where ever you want the lightning to trigger, use this script:

JS.eval ("setTimer('white', '50;20;50');")

The values in the last script set the number of flashes and duration of each. You may add as many 'flashes' as you like and vary the duration by using a higher/lower value. You must ensure there are an odd number of flashes in, other wise the sequence will finish on white.