Flashing background colors (with JS)

K.V.
12 Dec 2017, 06:07The two important bits:
<function name="DoFlashing">
JS.eval ("var colorFlash = setInterval(function(){var colorArr = ['black','red','orange','green','blue','white','yellow'];var randomNumber = Math.floor(Math.random()*colorArr.length);$('body').css('background', colorArr[randomNumber]);}, 100);")
</function>
It sets up a timed function (named colorFlash
), which repeatedly goes off at the set interval:
var colorFlash = setInterval(function(){
//This next line sets up the colors it will iterate through. Adjust as you please.
var colorArr = ['black','red','orange','green','blue','white','yellow'];
//This next line picks a random number which corresponds to the color array's length
var randomNumber = Math.floor(Math.random()*colorArr.length);
//The next line sets the background of the document's body to the random color from colorArr
$('body').css('background', colorArr[randomNumber]);
//The next line is the timer's interval in milliseconds. Adjust as you please.
}, 100);```
<function name="StopFlashing">
JS.eval ("clearInterval (colorFlash);")
</function>
clearInterval(colorFlash)
stops the flashing by clearing the timer named colorFlash
, which is why we started the last function off with var colorFlash = setInterval(function(){
. Otherwise, the timer would have no name, and we couldn't stop it.
You can do this in Quest without using JS, but the timer minimum is one second (no milliseconds).
The example game:
http://textadventures.co.uk/games/view/gq6_4cmj5uyxhshik2ve8g/flashing
The example game's code:
<!--Saved by Quest 5.7.6404.16853-->
<asl version="550">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="Flashing">
<gameid>25cedb1f-aa8a-417f-9b6a-508a96cc3ae4</gameid>
<version>1.0</version>
<firstpublished>2017</firstpublished>
<menufont>Georgia, serif</menufont>
<start type="script">
DoFlashing
</start>
</game>
<object name="room">
<inherit name="editor_room" />
<description><![CDATA[You can enter {command:STOP FLASHING} or {command:START FLASHING}.<br/><p style='position:fixed;right:0;bottom:0;background:silver;border:.5 solid blue;' id='stopCmd' class='button'>{command:stop flashing}</p><br/><br/><p style='display:none;position:fixed;bottom:0;right:0;background:silver;border:.5 solid blue;' id='startCmd'>{command:start flashing}</p>]]></description>
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
</object>
<command name="stop_flash_cmd">
<pattern>stop flashing</pattern>
<script>
StopFlashing
</script>
</command>
<command name="start_flash_cmd">
<pattern>start flashing</pattern>
<script>
StopFlashing
DoFlashing
</script>
</command>
<function name="DoFlashing">
JS.eval ("$('#stopCmd').show();$('#startCmd').hide();var colorFlash = setInterval(function(){var colorArr = ['black','red','orange','green','blue','white','yellow'];var randomNumber = Math.floor(Math.random()*colorArr.length);$('body').css('background', colorArr[randomNumber]);}, 100);")
</function>
<function name="StopFlashing">
JS.eval ("$('#startCmd').show();$('#stopCmd').hide();clearInterval (colorFlash);")
</function>
</asl>
The Pixie
12 Dec 2017, 08:56You can do this in Quest without using JS, but the timer minimum is one second (no milliseconds).
And I would strongy advise against using a timer with a one second interval; the online version will have problems if the interval is that small.

K.V.
12 Dec 2017, 09:19Hi, Pixie!
I hope you're doing well!
Does that go for the JS timer, as well?
Or just Quest's SetTimeout
function?