A simple browser-based snake game.

Introduction to the Snake Browser Game Template

This template provides a simple browser-based Snake game built using Flask for the backend and JavaScript for the frontend. The game includes features such as starting, pausing, and restarting the game, as well as tracking the score and high score.

Getting Started

To get started with this template, click Start with this Template.

Test

After starting with the template, press the Test button. This will deploy the app and launch the Lazy CLI. The CLI will guide you through any required user input.

Using the App

Once the app is deployed, you can interact with the Snake game through the web interface. Here are the steps to use the app:

1. Start the Game: Click the Start button to begin the game.
2. Control the Snake: Use the arrow keys on your keyboard to control the direction of the snake.
3. Pause the Game: Click the Pause button to pause the game. Click it again to resume.
4. Restart the Game: Click the Restart button to restart the game from the beginning.
5. Game Over: If the snake collides with the wall or itself, the game will end, and a "Game Over" message will be displayed. Click the Restart button to play again.

Code Overview

template.html

This file contains the HTML structure of the game, including the canvas for the game, buttons for controlling the game, and elements for displaying the score and high score.

```html

Snake Game

Start Pause Restart

```

main.py

This file sets up the Flask application and serves the HTML template.

```python import logging from flask import Flask, render_template from gunicorn.app.base import BaseApplication

logging.basicConfig(level=logging.INFO) logger = logging.getLogger(name)

app = Flask(name)

@app.route("/") def root_route(): return render_template("template.html")

class StandaloneApplication(BaseApplication): def init(self, app, options=None): self.application = app self.options = options or {} super().init()

def load_config(self):
    config = {
        key: value
        for key, value in self.options.items()
        if key in self.cfg.settings and value is not None
    }
    for key, value in config.items():
        self.cfg.set(key.lower(), value)

def load(self):
    return self.application

if name == "main": options = {"bind": "%s:%s" % ("0.0.0.0", "8080"), "workers": 4, "loglevel": "info"} StandaloneApplication(app, options).run() ```

snake.js

This file contains the JavaScript code for the Snake game, including the game logic, controls, and rendering.

```javascript const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d');

let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}, {x: 120, y: 150}, {x: 110, y: 150}]; let dx = 10; let dy = 0; let foodX; let foodY; let score = 0; let changingDirection = false; let gameSpeed = 100; let highScore = localStorage.getItem('highScore') || 0; let gameRunning = false;

function clearCanvas() { ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); }

function drawSnakePart(snakePart) { ctx.fillStyle = 'lightgreen'; ctx.strokeStyle = 'darkgreen'; ctx.fillRect(snakePart.x, snakePart.y, 10, 10); ctx.strokeRect(snakePart.x, snakePart.y, 10, 10); }

function drawSnake() { snake.forEach(drawSnakePart); }

function advanceSnake() { const head = {x: snake[0].x + dx, y: snake[0].y + dy}; snake.unshift(head); const didEatFood = snake[0].x === foodX && snake[0].y === foodY; if (didEatFood) { score += 10; document.getElementById('score').innerHTML = 'Score: ' + score; if (score > highScore) { highScore = score; localStorage.setItem('highScore', highScore); document.getElementById('highScore').innerHTML = 'High Score: ' + highScore; } createFood(); } else { snake.pop(); } }

function changeDirection(event) { const LEFT_KEY = 37; const RIGHT_KEY = 39; const UP_KEY = 38; const DOWN_KEY = 40;

if (changingDirection) return; changingDirection = true;

const keyPressed = event.keyCode; const goingUp = dy === -10; const goingDown = dy === 10; const goingRight = dx === 10; const goingLeft = dx === -10;

if (keyPressed === LEFT_KEY && !goingRight) { dx = -10; dy = 0; } if (keyPressed === UP_KEY && !goingDown) { dx = 0; dy = -10; } if (keyPressed === RIGHT_KEY && !goingLeft) { dx = 10; dy = 0; } if (keyPressed === DOWN_KEY && !goingUp) { dx = 0; dy = 10; } }

function randomTen(min, max) { return Math.round((Math.random() * (max-min) + min) / 10) * 10; }

function createFood() { foodX = randomTen(0, canvas.width - 10); foodY = randomTen(0, canvas.height - 10); snake.forEach(function isFoodOnSnake(part) { const foodIsOnSnake = part.x == foodX && part.y == foodY; if (foodIsOnSnake) createFood(); }); }

function drawFood() { ctx.fillStyle = 'red'; ctx.fillRect(foodX, foodY, 10, 10); }

let timeout; // Define timeout variable globally function main() { if (didGameEnd()) { showGameOver(); return; }

changingDirection = false; timeout = setTimeout(function onTick() { // Assign the timeout to the global variable clearCanvas(); drawFood(); advanceSnake(); drawSnake(); main(); }, gameSpeed); }

function showGameOver() { gameRunning = false; document.getElementById('gameOver').style.display = 'block'; }

function didGameEnd() { for (let i = 4; i < snake.length; i++) { const didCollide = snake[i].x === snake[0].x && snake[i].y === snake[0].y if (didCollide) return true } const hitLeftWall = snake[0].x < 0; const hitRightWall = snake[0].x > canvas.width - 10; const hitToTopWall = snake[0].y < 0; const hitToBottomWall = snake[0].y > canvas.height - 10; return hitLeftWall || hitRightWall || hitToTopWall || hitToBottomWall }

document.addEventListener("keydown", changeDirection); document.getElementById('startButton').addEventListener('click', function() { if (!gameRunning) { gameRunning = true; document.getElementById('gameOver').style.display = 'none'; snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}, {x: 120, y: 150}, {x: 110, y: 150}]; dx = 10; dy = 0; score = 0; document.getElementById('score').innerHTML = 'Score: ' + score; createFood(); main(); } }); document.getElementById('pauseButton').addEventListener('click', function() { if (gameRunning) { clearTimeout(timeout); gameRunning = false; } else { gameRunning = true; main(); } }); document.getElementById('restartButton').addEventListener('click', function() { location.reload(); });

createFood(); ```

requirements.txt

This file lists the dependencies required for the Flask application.

Flask gunicorn werkzeug

Conclusion

This template provides a fully functional Snake game that you can deploy and play in your browser. Follow the steps above to start, pause, and restart the game, and enjoy playing!

Here are 5 key business benefits for this Snake Game template:

Template Benefits

1. Employee Engagement Tool: Companies can use this game as a fun break activity for employees, promoting stress relief and improving workplace morale.

2. Brand Awareness: Businesses can customize the game with their branding and use it as an interactive element on their website to increase visitor engagement and time spent on site.

3. Lead Generation: By adding a simple form before or after gameplay, companies can collect user information for marketing purposes.

4. Training and Skill Development: The game can be adapted to teach concepts like strategic thinking, quick decision-making, and hand-eye coordination, making it useful for certain job training scenarios.

5. Marketing Campaign Element: Businesses can incorporate the game into marketing campaigns, offering prizes or discounts based on high scores, thus driving customer interaction and loyalty.