Hello, I recently decided I want to create a clicker game on my website, kind of in the vein of cookie clicker. I could do this already using the wix editor and javascript, but it’s not very flexible, because I wouldn’t be able to make custom buttons, animations and so on. Is it possible to make a game using html, css and javascript and host it on a page on my site?
-
You can do some animations using wix-animations
-
If you have a premium account you can create custom elements using html and css.
-
If you don’t have a premium account you can use css and html in a sandboxed iframe (htmlComponenet)
See:
https://www.wix.com/velo/reference/wix-animations
https://support.wix.com/en/velo-by-wix/wix-custom-element-with-velo
Thank you, I think the iframe will work fine, because I don’t really need interaction with the rest of the website if I’m just making a simple game. However, how do I add css styles and javascript code to this iframe? Also, is it possible for me to somehow add custom assets (just basic sprites) and access them from the iframe?
@craftbrothers2012 You click the htmlComponenet and add the a style tag with the CSS and body with the html.
And you can add any html or js code to the iframe as long as you don’t have to reach the outside DOM.
@jonatandor35 What about using custom sprites? Is it possible to somehow use my own images in this iframe?
@craftbrothers2012 I don’t see why not. In the iframe code crate an with src attribute equal to the image url.
@craftbrothers2012 I would also consider about using custom sprites in this situation. I would consider about implementing new in-game features using multiple technologies, and after that - simply testing those, to understand what would be more reliable and consume less memory, you know. Anyway, development process is not so easy, so I would even ask professionals from game development agencies like iLogos, here their website ( web link: https://www.ilogos.biz/ ). I know that it’s one of the most promising game dev companies, because I’ve heard a lot of positive reviews about this agency.
If you choose slots, I think it’s crucial that you do it carefully. I can let you know that a comprehensive list of websites that can aid in this regard is available at pokiesman.com/real-money-pokies . I therefore urge you to discover more about them here and get to know them. For instance, it was helpful to me, and I quickly learned how to locate a wonderful slot machine and a casino where I could play it. Compared to playing typical games, it is significantly more intriguing.
Thanks for sharing this info about making a game with Wix. I know this thread is a few months old, but I’m on the hunt for similar info, and this thread is really helpful.
What kind of game are you aiming for?
Do note that I am still working on it, but it is possible.
(Do something with my cookies banner, then read my page and if you figure it out read my introduction page and do that and it will show you a simple “game”.)
Works more optimal on desktop Edge and it is my test page, so I am still working on it.
Moving things around is also possible if this is what you are aiming for.
Do be aware that iOS needs a slower approach when it comes to animating things, and therefore, I would focus your testing on iOS because if that can run it than chances are high Android and Windows will also.
This because their graphical pipeline is more optimized for time being.
Well, I created a vector *.svg image cycler using a bit of code.
However, if you use very complex images the loading or cycling through them will have a delay because they need to be rendered this you do need to take into account.
Create an interval and cycle through the URL’s targeting shape element in my case because I use vector images.
I did notice, that when you first set the URL’s to be used in your code it will cycle smoother than fetching them from an array nested inside a dataset without doing this.
When I place single images in fields in a dataset and fetch on page load it cycles faster, but I am not sure adding a URL array as field in your dataset also fetches them on page load.
Anyways, this is what I did.
//Concept code
(Will need some adapting and if you use vector images your element must be a shape)
let interval
let pause = false;
let repeat = true;let tick = 0;
let maxFrame = 0;let url = [“url1”,“url2”,“url3”,“url4”,“url5”]
function spriteAnimation() {
maxFrame = url.length-1interval = setInterval(() =>{ if (pause === false) { if (tick <= maxFrame){ $w('#element').src = url[tick]; }else{ if(repeat === true){ tick = 0; $w('#element').src = url[tick] }else{ clearInterval(interval) } } tick++ } }, 100);}
//couple notes
iOS mainly iPads and such have a bit of difficulties with loading a lot of vector images because this fills up the graphical pipeline and this needs to be cleared to maintain performance and I have little to no control over this.
This is what I am trying to figure out and therefore, my website on iOS will slow down eventually.
So, I would advise to use wix.animation above doing something like this.
If you use wix.animation I would load the animation like a bullet and reuse them as often as you can because if you set an animation at run time it will fill up the graphical pipeline; repeatedly and it will slow down on iOS mobile devices eventually.
If you use this, I recommend coding a pause function into your code because making too many things animate in one go will have a similar effect on iOS therefore, I animate things one by one as much as possible.
//Keyboard input cheat
If you want keyboard controls on Windows.
Add an input text field and name it: “focuser”, resize it to 1,1 pixels and opacity to 1% set it off screen but do note that doing this will scroll the page to it when it gets focus.
To avoid this, get the scroll of the page and set the position of the input text field to this or pin it to your page if you use EditorX.
I added the setFocus() function because sometimes a certain interaction with your website will make it lose focus and then the keyboard inputs won’t be detected.
//To use this
Call setFocus() in your code and add a onKeyPress listener to the focuser_keyPress function
//Concept code (needs some adapting)
let active = true;
let detector;
export function focuser_keyPress(event) {
let key = event.key; if (active === true) { switch (key) { case 'ArrowLeft': //DoSomething break; case 'ArrowRight': //DoSomething break; }}
}
function setFocus() {
detector = setInterval(function () {
if ((active === true)) {
$w(‘#focuser’).focus();
}else{
clearInterval(detector)
}
}, 100);
}
//Sound
Well, I had difficulties playing multiple sounds at a time.
My workaround was to create a HTML5 jukebox. This dynamically adds a *.mp3 files based on URL and name and loads it on a postMessage().
After you added it, you can play it by posting a message to this iFrame with the name of the sound you gave it when you added it.
Do note that certain browsers need a click interaction before HTML5 starts playing sound.
My solution was to make it very transparant and to add the same onClick() function to it as the button to toggle the sound on and off and I hide it after that first press.
I have been thinking about how to create games for a long time and this information has been really useful to me