Snake Game

This project is a classic Snake game implemented using Rust for the game logic and Bun + Vite + TypeScript for the web frontend. The game is built using WebAssembly (Wasm) to enable running Rust code in the browser.

Project Structure

The project consists of two main folders:

• snake_game: Contains the Rust project that implements the game logic and exposes it as a WebAssembly module.
• web-snake: Contains the Bun + Vite + TypeScript starter project that serves as the web frontend for the game.

Prerequisites

Before running the project, make sure you have the following installed:

• Rust: Installation Guide
• Bun: Installation Guide

Getting Started

To get started with the project, follow these steps:

1. Clone the repository:

git clone https://github.com/svssdeva/Rust-Wasm.git
cd snake-game

2. Build the Rust project and generate the WebAssembly module:

cd snake_game
wasm-pack build --target web

This command will compile the Rust code and generate a pkg folder containing the WebAssembly module and the necessary JavaScript bindings.

3. Change to the web-snake directory and install the dependencies:

cd ../web-snake
bun install

This command will install all the required dependencies for the web frontend.

4. Start the development server:

bun run dev

This command will start the Vite development server and open the game in your default browser.

Gameplay

The objective of the game is to control the snake and eat as much food as possible without colliding with the walls or the snake's own body. The snake grows longer each time it eats food, making the game progressively more challenging.

• Use the arrow keys to control the direction of the snake's movement.
• The snake will move continuously in the chosen direction until it collides with a wall or its own body.
• Each time the snake eats food, its length increases, and the score is incremented.
• The game ends if the snake collides with a wall or its own body.
• After the game is over, a confetti effect will appear if the score is above a certain threshold.
• Click the "Reset" button to start a new game.

Customization

The game includes several visual customization features:

• The canvas background color changes randomly whenever food is spawned.
• The food color is randomly generated each time food appears on the game board.
• The snake's body has a random gradient flow that excludes the world and food colors.

Feel free to explore and modify the code to add your own customizations and enhancements to the game.

Project Explanation

The Snake game is implemented using a combination of Rust and web technologies. Here's a detailed explanation of the project:

• The game logic, including the snake's movement, food spawning, collision detection, and scoring, is implemented in Rust. Rust provides a fast and safe programming language that can be compiled to WebAssembly.
• The Rust code is organized into a module called snake_game, which defines the necessary data structures and functions for the game.
• The wasm-pack tool is used to compile the Rust code to WebAssembly and generate the necessary JavaScript bindings. The --target web flag specifies that the output should be suitable for web browsers.
• The web frontend is built using Bun, Vite, and TypeScript. Bun is a fast JavaScript runtime that provides a development server and bundling capabilities. Vite is a build tool that enables fast development and hot module replacement. TypeScript adds type safety and enhanced tooling to JavaScript.
• The web frontend code is located in the web-snake folder. It includes HTML, CSS, and TypeScript files that define the structure, styling, and interactivity of the game.
• The TypeScript code interacts with the WebAssembly module generated by Rust. It calls the exposed functions to initialize the game, update the game state, and render the game elements on the canvas.
• The game utilizes the HTML5 canvas API to draw the game board, snake, food, and other visual elements. The canvas is dynamically updated based on the game state received from the WebAssembly module.
• The game incorporates various visual effects, such as changing the canvas background color, food color, and snake body gradient. These effects are implemented using JavaScript and CSS.
• The project demonstrates the integration of Rust and WebAssembly with modern web technologies to create an interactive and visually appealing game experience in the browser.

Acknowledgements

This project was inspired by the classic Snake game and serves as an example of integrating Rust and WebAssembly with web technologies. It showcases the power and flexibility of using Rust for game logic and leveraging the capabilities of Bun, Vite, and TypeScript for building web applications.

License

This project is open-source and available under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license. If you have any questions, suggestions, or feedback, please feel free to open an issue or contact the project maintainer.

Happy gaming ! Plus Ultra ~~~~