https://github.com/andresmweber/4dsnake

You've all seen snake, but let's bring it into the fourth D I M E N S I O N!
https://github.com/andresmweber/4dsnake

3d 3d-game 3d-game-engine 3d-graphics 4d-snake andres andresmweber browser-game crossyroad javascript-game maya real-time realtime snake snake-game snakegame three-d three-js threejs weber

Last synced: 3 months ago
JSON representation

You've all seen snake, but let's bring it into the fourth D I M E N S I O N!

• Host: GitHub
• URL: https://github.com/andresmweber/4dsnake
• Owner: AndresMWeber
• License: bsd-3-clause
• Created: 2019-09-02T16:54:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T18:02:32.000Z (over 2 years ago)
• Last Synced: 2024-09-29T05:23:28.501Z (7 months ago)
• Topics: 3d, 3d-game, 3d-game-engine, 3d-graphics, 4d-snake, andres, andresmweber, browser-game, crossyroad, javascript-game, maya, real-time, realtime, snake, snake-game, snakegame, three-d, three-js, threejs, weber
• Language: JavaScript
• Homepage: https://andresmweber.github.io/4DSnake/
• Size: 20.9 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    

        

    



"4D" Snake 🐍




    

        

    

    

        

    

    

        

    

    


    

        

    

    

        

    

    

        

    






 You've all seen snake, but let's bring it into the true third (not really fourth) D I M E N S I O N!

    
 





    

     Live Demo

    ·

     Live Demo

    ·

    Installation

    





    

        

    



## 📝 Table of Contents

- [About](#about)

- [How To Play](#howto)

- [Installation](#installation)

- [Deployment](#deployment)

- [Built Using](#tech)

- [Authors](#authors)

- [Acknowledgments](#acknowledgement)

## 🧐 About 

After seeing Snake game after Snake game, I noticed that the trend was whenever it was adapted to 3D it always lacked Y-axis movement! Since I felt that was a total waste of a dimension that set me off to implement a version of it that wasn't constrained to two axes in JavaScript. After finding [three.js](https://threejs.org/) I knew I would be able to complete my idea! Without futher ado:

## 🕹️ How to Play 



    

        

        

            

        

        

          

                

                    
Control Scheme

                

                

                    

                    PC

                    Mobile

                

                

                    Left

                    A

                    Swipe Left

                

                

                    Right

                    D

                    Swipe Right

                

                

                    Up

                    W

                    Swipe Up

                

                

                    Down

                    S

                    Swipe Down

                

                

                    Rotate Camera

                    Left Click

                    Drag Triple Touch

                

                

                    Zoom Camera

                    Mouse Wheel

                    Drag Double Touch

                

            

        

        

    



### Installation

You can test and run this just by dragging `public/index.html` into the browser.

Feel free to install using NPM as well `npm install 4dsnake`.

## 🚀 Deployment 

This project is deployed on **Github Pages**. By keeping the top level `index.html` file, it will automatically populate to github pages. The only thing you need to do is edit the route to your own `public/index.html` route hosted on github pages.

You can also host this project on any cloud deployment you like, I chose **Heroku** for its quick setup. It hosts the project using **NodeJS** a simple _http-server_ that uses the `$PORT` environment variable (or defaults to `4000`).

## ⛏️ Tech Stack 

- [NodeJS](https://www.nodejs.org/) - Web Server

- [JavaScript](https://www.javascript.com/) - Front End

- [ThreeJS](https://threejs.org/) - 3D Engine

- [CSS](https://www.w3.org/Style/CSS//) - Styling

- [Maya](https://www.autodesk.com/products/maya/overview) - 3D Content

## ✍️ Authors 



    



## 🎉 Acknowledgements 

- [@Ironhack](https://github.com/ironhack) for supporting me during the project!

- [@bobbypwang](https://github.com/bobbypwang) - For keeping me sane throughout the project and helping me brainstorm the idea.

- [@crispinonicky](https://github.com/crispinonicky) - For helping me out with some radian math!