Write JavaScript code for: Implement the following architecture: ([['write a snake game in javascript', 'Certainly! Below is a simple implementation of the classic Snake game using JavaScript and HTML5 Canvas. You can copy the code into your own HTML and JavaScript files to run and play the game.<br/><br/>---<br/><br/>**HTML File (`index.html`):**<br/><pre><code class="html"><br/>&lt;!DOCTYPE html&gt;<br/>&lt;html&gt;<br/>&lt;head&gt;<br/>  &lt;title&gt;Snake Game&lt;/title&gt;<br/>  &lt;style&gt;<br/>    body {<br/>      text-align: center;<br/>      background-color: #111;<br/>      color: #fff;<br/>    }<br/>    canvas {<br/>      border: 1px solid #fff;<br/>      background-color: #000;<br/>    }<br/>  &lt;/style&gt;<br/>&lt;/head&gt;<br/>&lt;body onload="init();"&gt;<br/>  &lt;h1&gt;Snake Game&lt;/h1&gt;<br/>  &lt;canvas id="gameCanvas" width="400" height="400"&gt;&lt;/canvas&gt;<br/>  &lt;p&gt;Use the arrow keys to move the snake.&lt;/p&gt;<br/>  &lt;script src="snake.js"&gt;&lt;/script&gt;<br/>&lt;/body&gt;<br/>&lt;/html&gt;</code></pre><br/><br/>**JavaScript File (`snake.js`):**<br/><pre><code class="javascript"><br/>// Get the canvas and context<br/>const canvas = document.getElementById(\'gameCanvas\');<br/>const ctx = canvas.getContext(\'2d\');<br/><br/>// Game settings<br/>const gridSize = 20; // Size of each cell in the grid<br/>const tileCount = canvas.width / gridSize;<br/><br/>let snake = [{ x: tileCount / 2, y: tileCount / 2 }]; // Initial snake position<br/>let velocity = { x: 0, y: 0 }; // Initial movement direction<br/>let food = getRandomFoodPosition(); // Initial food position<br/>let score = 0;<br/><br/>// Listen for keyboard events to move the snake<br/>document.addEventListener(\'keydown\', keyPush);<br/><br/>// Initialize the game<br/>function init() {<br/>  // Start the game loop<br/>  setInterval(gameLoop, 1000 / 15); // Game loop runs 15 times per second<br/>}<br/><br/>// Game loop function<br/>function gameLoop() {<br/>  update();<br/>  draw();<br/>}<br/><br/>// Update game state<br/>function update() {<br/>  // Move the snake by adding a new head based on the velocity<br/>  const head = { x: snake[0].x + velocity.x, y: snake[0].y + velocity.y };<br/><br/>  // Wrap the snake position on the edges (uncomment below to enable wall collision)<br/>  head.x = (head.x + tileCount) % tileCount;<br/>  head.y = (head.y + tileCount) % tileCount;<br/><br/>  // Uncomment the lines below to end the game when hitting the wall<br/>  /*<br/>  if (head.x &lt; 0 || head.x &gt;= tileCount || head.y &lt; 0 || head.y &gt;= tileCount) {<br/>    return gameOver();<br/>  }<br/>  */<br/><br/>  // Check collision with self<br/>  for (let segment of snake) {<br/>    if (segment.x === head.x && segment.y === head.y) {<br/>      return gameOver();<br/>    }<br/>  }<br/><br/>  snake.unshift(head); // Add new head to the front of the snake<br/><br/>  // Check if snake has eaten the food<br/>  if (head.x === food.x && head.y === food.y) {<br/>    score++;<br/>    // Place new food at random position<br/>    food = getRandomFoodPosition();<br/>  } else {<br/>    snake.pop(); // Remove the tail segment if no food eaten<br/>  }<br/>}<br/><br/>// Draw everything on the canvas<br/>function draw() {<br/>  // Clear the canvas<br/>  ctx.fillStyle = \'black\';<br/>  ctx.fillRect(0, 0, canvas.width, canvas.height);<br/><br/>  // Draw the snake<br/>  ctx.fillStyle = \'lime\';<br/>  for (let segment of snake) {<br/>    ctx.fillRect(<br/>      segment.x * gridSize,<br/>      segment.y * gridSize,<br/>      gridSize - 2,<br/>      gridSize - 2<br/>    );<br/>  }<br/><br/>  // Draw the food<br/>  ctx.fillStyle = \'red\';<br/>  ctx.fillRect(<br/>    food.x * gridSize,<br/>    food.y * gridSize,<br/>    gridSize - 2,<br/>    gridSize - 2<br/>  );<br/><br/>  // Draw the score<br/>  ctx.fillStyle = \'white\';<br/>  ctx.font = \'20px Arial\';<br/>  ctx.fillText(\'Score: \' + score, 10, 20);<br/>}<br/><br/>// Handle keyboard input to control the snake<br/>function keyPush(event) {<br/>  switch (event.keyCode) {<br/>    case 37: // Left arrow key<br/>      if (velocity.x !== 1) {<br/>        velocity = { x: -1, y: 0 };<br/>      }<br/>      break;<br/>    case 38: // Up arrow key<br/>      if (velocity.y !== 1) {<br/>        velocity = { x: 0, y: -1 };<br/>      }<br/>      break;<br/>    case 39: // Right arrow key<br/>      if (velocity.x !== -1) {<br/>        velocity = { x: 1, y: 0 };<br/>      }<br/>      break;<br/>    case 40: // Down arrow key<br/>      if (velocity.y !== -1) {<br/>        velocity = { x: 0, y: 1 };<br/>      }<br/>      break;<br/>  }<br/>}<br/><br/>// Get a random position for the food<br/>function getRandomFoodPosition() {<br/>  return {<br/>    x: Math.floor(Math.random() * tileCount),<br/>    y: Math.floor(Math.random() * tileCount),<br/>  };<br/>}<br/><br/>// Handle game over state<br/>function gameOver() {<br/>  alert(\'Game Over! Your score: \' + score);<br/>  // Reset game<br/>  snake = [{ x: tileCount / 2, y: tileCount / 2 }];<br/>  velocity = { x: 0, y: 0 };<br/>  score = 0;<br/>  food = getRandomFoodPosition();<br/>}</code></pre><br/><br/>**Explanation:**<br/><br/>- **Canvas Setup:** We use an HTML5 Canvas element to draw the game. The canvas is 400x400 pixels in size.<br/>- **Game Grid:** The canvas is divided into a grid, where each cell is 20x20 pixels, making it a 20x20 grid.<br/>- **Snake Representation:** The snake is represented as an array of objects, each with `x` and `y` properties corresponding to grid positions.<br/>- **Movement Control:** The `velocity` object controls the direction of the snake\'s movement, which is updated based on user input from the arrow keys.<br/>- **Game Loop:** The `gameLoop()` function is called repeatedly to update the game state and render the graphics.<br/>- **Food Generation:** Food is placed at random positions on the grid using the `getRandomFoodPosition()` function.<br/>- **Collision Detection:**<br/>  - **Wall Collision:** The snake wraps around the canvas edges. You can uncomment the provided code to enable game-over on wall collision.<br/>  - **Self-Collision:** If the snake\'s head collides with any part of its body, the game ends.<br/>- **Score Tracking:** The player\'s score increases by 1 each time the snake eats food.<br/>- **Rendering:** The `draw()` function handles all the drawing of the snake, food, and score on the canvas.<br/><br/>**How to Run the Game:**<br/><br/>1. **Create the Files:**<br/>   - Save the HTML code in a file named `index.html`.<br/>   - Save the JavaScript code in a file named `snake.js` in the same directory.<br/><br/>2. **Open the Game:**<br/>   - Open `index.html` in your web browser.<br/><br/>3. **Play:**<br/>   - Use the arrow keys (left, up, right, down) to control the snake\'s movement.<br/>   - Try to eat the red food squares to grow the snake and increase your score.<br/>   - Avoid running into the snake\'s own body.<br/><br/>**Optional Enhancements:**<br/><br/>- **Wall Collision:** To make the game more challenging, you can uncomment the code that ends the game when the snake hits the wall.<br/>- **Speed Increase:** Gradually increase the speed of the game as the score increases.<br/>- **High Scores:** Implement a high score system using `localStorage` to save the player\'s best score.<br/><br/>**Enjoy your game!**<br/><br/>---<br/><br/>Feel free to customize and expand upon this code to add more features or improve the game\'s appearance.']], 1, '<Response [200]>', {'interactive': True, '__type__': 'update'})