Untitled

avatar
unknown
plain_text
a month ago
9.4 kB
6
Indexable
export default function SnakeGame() { return ( <div className="flex items-center justify-center min-h-screen bg-black text-white"> <div className="text-center space-y-4"> <h1 className="text-4xl font-bold">AI Snake Game</h1> <p className="text-gray-400">Use Arrow Keys to Play</p> <iframe title="Snake Game" className="w-[420px] h-[520px] rounded-2xl border border-gray-700 bg-gray-900" srcDoc={`

<!DOCTYPE html><html>
<head>
<style>
body {
      margin: 0;
        display: flex;
          justify-content: center;
            align-items: center;
              background: #111;
                color: white;
                  font-family: Arial;
                    flex-direction: column;
}
canvas {
      background: #1e1e1e;
        border: 2px solid #444;
          margin-top: 10px;
}
button {
      margin-top: 10px;
        padding: 10px 20px;
          border: none;
            border-radius: 10px;
              background: limegreen;
                color: black;
                  font-weight: bold;
                    cursor: pointer;
}
</style>
</head>
<body>
<h2>🐍 Snake Game</h2>
<p>Score: <span id="score">0</span></p>
<canvas id="game" width="400" height="400"></canvas>
<button onclick="restartGame()">Restart</button><script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');

const grid = 20;
let snake = [{x: 160, y: 160}];
let dx = grid;
let dy = 0;
let food = randomFood();
let score = 0;
let gameOver = false;

function randomFood() {
      return {
            x: Math.floor(Math.random() * 20) * grid,
                y: Math.floor(Math.random() * 20) * grid
      };
}

function drawGame() {
      if (gameOver) {
            ctx.fillStyle = 'white';
                ctx.font = '30px Arial';
                    ctx.fillText('Game Over', 110, 200);
                        return;
      }

        requestAnimationFrame(drawGame);

          if (++count < 6) return;
            count = 0;

              ctx.clearRect(0, 0, canvas.width, canvas.height);

                const head = {
                        x: snake[0].x + dx,
                            y: snake[0].y + dy
                };

                  if (
                        head.x < 0 ||
                            head.y < 0 ||
                                head.x >= canvas.width ||
                                    head.y >= canvas.height
                  ) {
                        gameOver = true;
                  }

                    for (let cell of snake) {
                            if (head.x === cell.x && head.y === cell.y) {
                                      gameOver = true;
                            }
                    }

                      snake.unshift(head);

                        if (head.x === food.x && head.y === food.y) {
                                score++;
                                    scoreEl.textContent = score;
                                        food = randomFood();
                        } else {
                                snake.pop();
                        }

                          ctx.fillStyle = 'red';
                            ctx.fillRect(food.x, food.y, grid - 1, grid - 1);

                              ctx.fillStyle = 'lime';
                                snake.forEach((cell, index) => {
                                        ctx.fillRect(cell.x, cell.y, grid - 1, grid - 1);
                                });
}

let count = 0;
requestAnimationFrame(drawGame);

window.addEventListener('keydown', e => {
      if (e.key === 'ArrowLeft' && dx === 0) {
            dx = -grid;
                dy = 0;
      } else if (e.key === 'ArrowUp' && dy === 0) {
            dx = 0;
                dy = -grid;
      } else if (e.key === 'ArrowRight' && dx === 0) {
            dx = grid;
                dy = 0;
      } else if (e.key === 'ArrowDown' && dy === 0) {
            dx = 0;
                dy = grid;
      }
});

function restartGame() {
      snake = [{x: 160, y: 160}];
        dx = grid;
          dy = 0;
            food = randomFood();
              score = 0;
                scoreEl.textContent = score;
                  gameOver = false;
                    requestAnimationFrame(drawGame);
}
</script></body>
</html>
          `}
                  />
                        </div>
                            </div>
);
}export default function SnakeGame() { return ( <div className="flex items-center justify-center min-h-screen bg-black text-white"> <div className="text-center space-y-4"> <h1 className="text-4xl font-bold">AI Snake Game</h1> <p className="text-gray-400">Use Arrow Keys to Play</p> <iframe title="Snake Game" className="w-[420px] h-[520px] rounded-2xl border border-gray-700 bg-gray-900" srcDoc={`

<!DOCTYPE html><html>
<head>
<style>
body {
      margin: 0;
        display: flex;
          justify-content: center;
            align-items: center;
              background: #111;
                color: white;
                  font-family: Arial;
                    flex-direction: column;
}
canvas {
      background: #1e1e1e;
        border: 2px solid #444;
          margin-top: 10px;
}
button {
      margin-top: 10px;
        padding: 10px 20px;
          border: none;
            border-radius: 10px;
              background: limegreen;
                color: black;
                  font-weight: bold;
                    cursor: pointer;
}
</style>
</head>
<body>
<h2>🐍 Snake Game</h2>
<p>Score: <span id="score">0</span></p>
<canvas id="game" width="400" height="400"></canvas>
<button onclick="restartGame()">Restart</button><script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');

const grid = 20;
let snake = [{x: 160, y: 160}];
let dx = grid;
let dy = 0;
let food = randomFood();
let score = 0;
let gameOver = false;

function randomFood() {
      return {
            x: Math.floor(Math.random() * 20) * grid,
                y: Math.floor(Math.random() * 20) * grid
      };
}

function drawGame() {
      if (gameOver) {
            ctx.fillStyle = 'white';
                ctx.font = '30px Arial';
                    ctx.fillText('Game Over', 110, 200);
                        return;
      }

        requestAnimationFrame(drawGame);

          if (++count < 6) return;
            count = 0;

              ctx.clearRect(0, 0, canvas.width, canvas.height);

                const head = {
                        x: snake[0].x + dx,
                            y: snake[0].y + dy
                };

                  if (
                        head.x < 0 ||
                            head.y < 0 ||
                                head.x >= canvas.width ||
                                    head.y >= canvas.height
                  ) {
                        gameOver = true;
                  }

                    for (let cell of snake) {
                            if (head.x === cell.x && head.y === cell.y) {
                                      gameOver = true;
                            }
                    }

                      snake.unshift(head);

                        if (head.x === food.x && head.y === food.y) {
                                score++;
                                    scoreEl.textContent = score;
                                        food = randomFood();
                        } else {
                                snake.pop();
                        }

                          ctx.fillStyle = 'red';
                            ctx.fillRect(food.x, food.y, grid - 1, grid - 1);

                              ctx.fillStyle = 'lime';
                                snake.forEach((cell, index) => {
                                        ctx.fillRect(cell.x, cell.y, grid - 1, grid - 1);
                                });
}

let count = 0;
requestAnimationFrame(drawGame);

window.addEventListener('keydown', e => {
      if (e.key === 'ArrowLeft' && dx === 0) {
            dx = -grid;
                dy = 0;
      } else if (e.key === 'ArrowUp' && dy === 0) {
            dx = 0;
                dy = -grid;
      } else if (e.key === 'ArrowRight' && dx === 0) {
            dx = grid;
                dy = 0;
      } else if (e.key === 'ArrowDown' && dy === 0) {
            dx = 0;
                dy = grid;
      }
});

function restartGame() {
      snake = [{x: 160, y: 160}];
        dx = grid;
          dy = 0;
            food = randomFood();
              score = 0;
                scoreEl.textContent = score;
                  gameOver = false;
                    requestAnimationFrame(drawGame);
}
</script></body>
</html>
          `}
                  />
                        </div>
                            </div>
);
}
}
      }
      }
      }
      }
})
                                })
                        }
                        }
                            }
                    }
                  }
                  )
                }
      }
}
      }
}
}
}
}})}
}
      }
      }
      }
      }
})
                                })
                        }
                        }
                            }
                    }
                  }
                  )
                }
      }
}
      }
}
}
}
}})}
Editor is loading...
Leave a Comment