-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (105 loc) · 5.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="assets/favicon.png">
<title>OverFX by RogueSignal.io</title>
<link rel="stylesheet" href="overfx.css" id="page_style">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.24.1/phaser.min.js" crossorigin="anonymous"></script>
--><!-- Phaser 3.5+ changed rotation behavior on particles!?!?!? Need to find some answers /-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js" crossorigin="anonymous"></script>
<script src="fx/overfx.js" crossorigin="anonymous"></script>
</head>
<body>
<button id="controlz" class="control_icon" onclick="toggle_controls();">🠻🠻</button>
<div id="controls" class="controls">
<button onClick="" class="toggle"><label for="bgt"><input type="checkbox" id="bgt" checked="true" onclick="toggle_bg();">🗔</label></button>
<button onClick="" class="toggle"><label for="logt"><input type="checkbox" id="logt" checked="true" onclick="toggle_logo()">🖾</label></button>
<br>
<button onClick="" class="toggle"><label for="vol"><input type="checkbox" id="vol" checked="true" onclick="ofx.audio_toggle();">🕪</label></button>
<button onClick="ofx.stop()" class="toggle" style="color:red;">🛑</button>
<br>
<button onClick="ofx.canned_sparks()">Sparks</button><br>
<button onClick="ofx.canned_fountain()">Fountain</button><br>
<button onClick="ofx.canned_confetti()">Confetti</button><br>
<button onClick="ofx.canned_heart()">Heart</button><br>
<button onClick="ofx.canned_spray()">Spray</button><br>
<button onClick="ofx.canned_boom()">Boom!</button><br>
<button onClick="ofx.canned_chill()">Chill</button><br>
<button onClick="ofx.canned_fireworks()">Fireworks</button><br>
<button onClick="ofx.canned_heartsplode()">💔Splode</button><br>
<button onClick="ofx.canned_sparks(14)">Sparks!</button><br>
<button onClick="ofx.canned_fountain(5)">Fountains!</button><br>
<button onClick="ofx.canned_confetti(10)">Confetti!</button><br>
<button onClick="ofx.canned_mega()">Mega-Mega</button><br>
<button onClick="ofx.canned_hell()">Mega-Hell</button><br>
<button onClick="ofx.canned_fireworks_show()">July 4th</button><br>
<button onClick="add_canned_example()">DynamicCan</button><br>
<button onClick="ofx.run_fx_timed('bullzeye',3,{},500,1000)">Wonderful1</button><br>
<button onClick="ofx.run_fx('ascension')">Spirits</button><br>
<button onClick="ofx.canned_pixelstix()">PixelStix</button><br>
<button onClick="ofx.canned_pixelstix2()">PStxMashup</button><br>
<button onClick="ofx.run_fx('pixelstix',{ image: './fx/assets/boom.png', bg_on: false})">PStixImg</button><br>
<button onClick="ofx.run_fx('ascension'); ofx.run_fx('webfonttext',{ hold: 8000, fade: 1300, text: 'C🤠🤠L!', font: 'Rancho', font_size: 120, color: '#FFDD44', border_color: '#785722'})">Webfont</button><br>
<button onClick="ofx.run_fx('vortex')">Shader</button><br>
<button onClick="ofx.run_fx('vortex', { shake: 0.007}); ofx.run_fx('webfonttext',{ blend: 2, hold: 6000, text: '👁', font: 'Roboto', font_size: 300, color: '#FFDD44', border_color: '#883300'})">Shaker</button><br>
<button onClick="ofx.canned_wonderful()">Wonderful2</button><br>
<button onClick="ofx.run_fx('invaders')">Invaders</button><br>
</div>
<div id="logo" class="logo">
<p class="rsyellow">OverFx 0.7b by <a href="http://www.roguesignal.io" target="_BLANK_">RogueSignal.IO</a><p>
<img src="assets/RogueSignal_FullLogo.svg" style="width:350px;"/>
<p>Click Me!</p>
<ul id="details" class="details">
<li> OverFx prevents click thru during effect (ie., OVER)
<li> Uses FX plugin architecture. 14+ built-in FX.
<li> Makes available full power of PhaserJS scenes.
<li> Simple to use in any Javascript or Web page.
<li> Easy to modify or build new particle FX plugins.
<li> Collect FX into a "canned" method collection to run a show.
<li> See code & <a href="https://github.com/roboyeti/overfx" target="_BLANK_" id="readme">Git Project</a> for more.
<li> Uses Phaser-3.24. Particle rotation issue on 3.5+
<li> Audio sourced from:
<a href="http://www.freesoundslibrary.com" target="_BLANK_">FreeSoundsLibrary</a> &
<a href="http://pixabay.com" target="_BLANK_">Pixabay</a>
<ul>
</div>
<script>
var bg_vis = true
var logo_vis = true
var ofx;
window.onload = function() {
ofx = new OverFx({ pre_canned: true, debug: false })
logo = document.getElementById('logo');
logo.addEventListener("click", function(event) { this.blur(); ofx.run_fx_timed('roguesignal',3); event.stopPropagation();}, false);
document.getElementById('readme').addEventListener("click", function(event) { event.stopPropagation(); }, false);
};
function add_canned_example() {
ofx.add_canned('lala',(cnt=1) => {
ofx.run_fx_timed('hearts',cnt*3,{},500,1000);
ofx.run_fx_timed('sparks',cnt*4,{},500,700);
})
ofx.canned_lala(3); // Note the new method name...
}
function toggle_controls() {
let controls = document.getElementById('controls');
if (controls.style.visibility == "hidden" || controls.style.visibility == "") {
controls.style.visibility = "visible";
//document.getElementById('controlz').style.visibility = "hidden";
} else {
controls.style.visibility = "hidden";
//document.getElementById('controlz').style.visibility = "visible";
}
}
function toggle_bg() {
if (bg_vis == true) { document.body.style.backgroundImage = 'none'; bg_vis = false; }
else { document.body.style.backgroundImage = "url('assets/roguesignal_bg.png')"; bg_vis = true; }
}
function toggle_logo() {
document.getElementById('logo').style.visibility = logo_vis ? "hidden" : "visible"
logo_vis = logo_vis ? false : true
}
</script>
</body>