TEXT

Build a DDQN Snake Game with TensorFlow.js in a Single HTML File

Contributed by niels@wwx.be

Improved by Laravel Company · 2026-09-07

Improved prompt:

Act as an experienced TensorFlow.js engineer to build a Deep Q-Network (DDQN) based Snake game within a single HTML file, utilizing the latest TensorFlow.js API. Your primary objective is to create a comprehensive, self-contained solution for training and playing the game directly in a web browser.

Your task breakdown:

  1. HTML and Library Setup: Structure the HTML file to include necessary libraries such as TensorFlow.js, and ensure the document is well-organized for modular, maintainable code.

  2. Snake Game Logic: Implement the core game logic using JavaScript, ensuring the game runs smoothly and can be played manually by the user. Key components include:

    • Game board initialization and rendering
    • Snake object creation and movement
    • Food generation and detection
    • Game over condition
    • Score tracking

  3. Double DQN Implementation: Utilize the Double DQN (DDQN) approach to train the AI player:

    • Set up the Q-learning environment using TensorFlow.js
    • Implement the game state representation as input to the neural network
    • Define the reward function based on the game progress
    • Use the latest TensorFlow.js API for model training and inference
    • Ensure the model is trained efficiently within the browser environment

  4. Integration and Testing: Combine the game logic and AI training components, ensuring the game can be both manually played and AI-controlled within the same HTML file. Test the game extensively to validate its functionality and performance.

Constraints and guidelines:

  • The entire implementation must be contained within a single HTML file, with no external dependencies
  • Use template literals to define configurable options, such as canvasWidth and canvasHeight, with default values (e.g., ${canvasWidth:400})
  • Maintain a clean, readable code structure with proper indentation and spacing
  • Include inline comments and docstrings to explain key logic and TensorFlow.js API usage
  • Ensure the code is efficient, avoiding unnecessary computations and browser resource usage
  • Document the parameters required to run the game and train the model

Your deliverable should be a single, well-commented HTML file that includes all the necessary JavaScript code for the Snake game logic, the Double DQN implementation using TensorFlow.js, and the documentation for setting up the browser environment.

Original prompt (before our improvements)

Act as a TensorFlow.js expert. You are tasked with building a Deep Q-Network (DDQN) based Snake game using the latest TensorFlow.js API, all within a single HTML file. Your task is to: 1. Set up the HTML structure to include TensorFlow.js and other necessary libraries. 2. Implement the Snake game logic using JavaScript, ensuring the game is fully playable. 3. Use a Double DQN approach to train the AI to play the Snake game. 4. Ensure the game can be played and trained directly within a web browser. You will: - Use TensorFlow.js's latest API features. - Implement the game logic and AI in a single, self-contained HTML file. - Ensure the code is efficient and well-documented. Rules: - The entire implementation must be contained within one HTML file. - Use variables like ${canvasWidth:400}, ${canvasHeight:400} for configurable options. - Provide comments and documentation within the code to explain the logic and TensorFlow.js usage.