HTML5 + Javascript

Hi,

I am trying to embed this into a webflow site:

I have read and watched several tutorials that make it seem relatively straight forward but cant seem to get anywhere!

Have tried various methods but am wondering what the recommended way to do something like this would be in Webflow?

Thank you for your help,

Thanks for the fun morning coffee time.

So adding things like this to Webflow is pretty straightfoward, but the main thing to realize is that Webflow doesn’t provide the ability to upload script files.

This means that when you find a library you like, your best option is usually to reference it through a content delivery network (CDN).

Anything you find on Github can be referenced through e.g. jsDelivr, so you just have to form those URLs in order to reference the scripts and CSS you want to add to your site.

In this integration, there are 2 URLs you need;

https://cdn.jsdelivr.net/gh/Aerolab/blockrain.js/dist/blockrain.css
https://cdn.jsdelivr.net/gh/Aerolab/blockrain.js/dist/blockrain.jquery.js

Here’s a demo.
Scroll to the bottom to see the CodePen and some instructions on how to add it to your Webflow site.

https://effects-demo.webflow.io/tetris

1 Like

Hi Michael, thanks so much for your help really appreciate it!

It works perfectly on the test site that you posted, great to see that it is possible and i’d love to incorporate a customised version into a site of my own.

I began following your steps but didn’t get further than creating the ‘tetris’ div and allocating a size.

Is there supposed to be code included in the <HEAD> and </BODY> sections mentioned in the codepen instructions?

Apologies for my lack of understanding… any further advice would be appreciated.

Thanks,

Yes you absolutely need that, and it appears that I got distracted before I finished writing my implementation notes. I’ve added that in to the CodePen markdown at the bottom.

At the top right of the page, you can also access the currently-viewed page in readonly designer view, to see implementation details;

image

Thank you (Haha, tetris has that effect in my experience!)

I’ve added that code into the page’s HEAD and BODY tags. I am feel like I missing something obvious but I took a look at your readonly site and can’t see where to implement anything else that would make this work (from the info I can see the related div blocks look as though they are empty of any content (e.g. ‘Tetris 2’).

This is as far as I can get: https://tetris-test.webflow.io/

Again, sorry for being a nuisance I am sure this is just due to my lack of knowledge!

Appreciate any further help you can offer,

Share your readonly project link, I’ll have a look when I can. Yes those DIVs are meant to be empty. The JS library creates the all of the content for the game.

Glancing at your source, you’ll need these.
I may not have had my first coffee yet.

image

1 Like

Thank you, here is the readonly if you are able to take a look:

https://preview.webflow.com/preview/tetris-test?utm_medium=preview_link&utm_source=designer&utm_content=tetris-test&preview=e05de6980976239e0a9ab07d5ac304fe&workflow=preview

Thank you :slight_smile:

Close. you created and assigned tetris as a class selector, instead of specifying it as the ID for the element. Classes are more for styling. ID’s help you target specific things.

Click that gear tab-

image

And put tetris there.
Republish and you should see it running on your demo site.

1 Like

Brilliant, thank you Michael! (That makes more sense, so close! :rofl: )

You’ve been more than generous with your time so last question if possible…

I spent a little time trying to customise the look of the game (change colours etc) and can see that there are options mentioned here:

Would love to playa round with some of these but can’t quite get my head around where to implement the changes…

Any help appreciated, thanks again.

Hey Lewis, I know as much as you do about their library. My best advice is read the docs, several times… experiment, a lot… and look through the GIT repo to see how they’ve setup demos.

The docs could be better, but they’re a decent starting point. It will be really good practice for you, and it’s how you’ll learn a lot of coding.

If you are really trying to build something, and need a pro, you can PM me and I can see if I have some free hours for a small project.

Otherwise I’ll just suggest that at this point you’re well outside the domain of Webflow and dealing purely with the JS config side. You might find some good support on stack overflow for specific JS questions.

Thanks Michael, appreciate all your help with this!

Will take a look and PM you :raised_hands: