# Show and Tell - Node-RED playing Snake, and more!

**URL:** https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653
**Category:** Share Your Projects
**Created:** [12 November 2021 23:48 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653 "2021-11-12T23:48:50Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![mdkrieg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdkrieg/32/39091_2.png) [@mdkrieg](https://discourse.nodered.org/u/mdkrieg)
#### Post date: [12 November 2021 23:48 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653/1 "2021-11-12T23:48:50Z")

</div>

Hello everyone,

I have three projects to share today, but the common thread in these projects is that these are all "no backend" applications. Meaning, everything is served with flat files and the flow is interpreted in browser scope. Nothing here is immediately useful, but I'm hoping this will spark some inspiration about what else is possible.

## [#1] Flow-based Snake AI:

Using Node-RED to play a simulated game of Snake, inspired by this video: [https://www.youtube.com/watch?v=TOpBcfbAgPg](https://www.youtube.com/watch?v=TOpBcfbAgPg)

This is by far the most finished of these projects. Note that if you Deploy changes to the flow they will be retained in your browser's localStorage until you run `localStorage.clear()` which will cause the page to load the default flow.

### Link to Live Demo: [https://mdkrieg.github.io/snakeAI/red.html](https://mdkrieg.github.io/snakeAI/red.html)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49295cf2e39b4a3c7edb0a2e56025253a2ff99c6.gif)

## [#2] Node-RED TamperTool

Write TamperMonkey ([https://www.tampermonkey.net/](https://www.tampermonkey.net/)) scripts using Node-RED. I think this has a lot of potential for user-automation scripting.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f9850aa20392eb236dfa36458aeb2a9aaa112f8.gif)

## [#3] RED-Grapes

An integration of Node-RED and Grapes.js ([https://grapesjs.com](https://grapesjs.com)) which is a browser-based WYSIWYG editor for HTML. The thought here is to create a low-code environment that can create a fully dynamic web page. Similar to how I did the Snake AI, there would be a custom interpreter that attaches your flow to the web page.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bb9b8eff07964ab7a9a7137d90a91e9a81ae3e3b.gif)

Regards,  
-Matt

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [13 November 2021 00:11 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653/2 "2021-11-13T00:11:34Z")

</div>

Love the snake game.

😉

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [13 November 2021 08:16 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653/3 "2021-11-13T08:16:52Z")

</div>

> [#1] Flow-based Snake AI:

Please include gamepad controller please, cant wait 😉

Great work 😃

---

<div class="post-metadata">

### Author: ![pranavthakkar](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@pranavthakkar](https://discourse.nodered.org/u/pranavthakkar)
#### Post date: [20 November 2021 12:39 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653/4 "2021-11-20T12:39:01Z")

</div>

Hi @mdkrieg. Very interesting projects. I was specifically searching for your grapesjs idea. can you share some more information on it. Can we work with it and develop any web pages right now?

---

<div class="post-metadata">

### Author: ![mdkrieg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdkrieg/32/39091_2.png) [@mdkrieg](https://discourse.nodered.org/u/mdkrieg)
#### Post date: [22 November 2021 19:05 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653/5 "2021-11-22T19:05:08Z")

</div>

Thanks for your interest! That project is a work in progress but it sounds like you envision it correctly.

For the GrapesJS integration, I think all the technical pieces are there, the next step is to create useful templates and nodes, also the interpreter needs to be written and I want to find a better interface solution. I'll edit this response with the github repo later today.

@pranavthakkar - Here is a link to a live demo: [https://mdkrieg.github.io/REDGrapes/](https://mdkrieg.github.io/REDGrapes/)

The "BUTTON" object all the way at the bottom is the only one that has a node that can be dropped. The next major hurdle is developing a usable set of templates for the GrapesJS engine. Also, I'm still not sure if it is best to have GJS be dynamic with the flow, I'm thinking not, probably best to only show an isolated "end result" (webpage, probably in a popup (will new tab work?)).

The demo page has the "websites" theme linked from the grapesjs homepage enabled, I'm not sure how usable it is for dashboard purposes or any kind of interactive website. Perhaps Bootstrap would be a way to go here (looks like there's some grapesjs templates already done: [GitHub - kaoz70/grapesjs-blocks-bootstrap4: GrapesJS Bootstrap v4 Blocks Plugin](https://github.com/kaoz70/grapesjs-blocks-bootstrap4)).

---

<div class="post-metadata">

### Author: ![sharonv](https://avatars.discourse-cdn.com/v4/letter/s/ce7236/32.png) [@sharonv](https://discourse.nodered.org/u/sharonv)
#### Post date: [29 November 2021 21:06 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653/6 "2021-11-29T21:06:44Z")

</div>

Looks amazing,  
How can this be deployed as a backend for the form? I'm not able to trigger anything after setting up the trigger...seems we are missing some steps to have ability to interact with the flow.

---

<div class="post-metadata">

### Author: ![mdkrieg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdkrieg/32/39091_2.png) [@mdkrieg](https://discourse.nodered.org/u/mdkrieg)
#### Post date: [30 November 2021 23:26 UTC](https://discourse.nodered.org/t/show-and-tell-node-red-playing-snake-and-more/53653/7 "2021-11-30T23:26:42Z")

</div>

Correct, there is no pseudo-backend on this one. The snake-AI is the only project with a working interpreter.

There is an example csv generator I made that you can demo here: [ReQUI Example App](https://mdkrieg.github.io/ReQUI/html/app.html)

If you look in the source here there is an element `<script type="text/json" id="flow">` that contains the flow and the script in the header reads and interprets it to make the page work.

In this example app the page was built manually but it is essentially a template for the backend, Here is what the flow in that script tag looks like:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99da7099d0a750f58e65a1f922ea66b305e23999.png)

I also had successfully implanted GrapesJS into the configuration panel of a template node, but can't seem to find it at the moment.
