"Electron Snake Challenge"

A simple snake game for the Electron app.

Introduction to the Template

This template provides a simple Snake game built with Electron. The game allows users to control a snake to eat food, grow, and avoid collisions. The game is packaged as an Electron app, making it easy to run on various platforms.

Clicking Start with this Template

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

Test

Press the Test button to begin the deployment of the app. The Lazy CLI will handle the deployment process.

Using the App

Once the app is deployed, it will launch the Electron Snake game. Here’s how to use the interface:

1. Game Controls:
2. Use the arrow keys to control the snake's direction.

3. Press the space bar to pause or resume the game.

4. Game Interface:

5. The game interface includes a canvas where the snake and food are displayed.
6. The current score and high score are shown below the canvas.

7. A "Start" button is available to begin or restart the game.

8. Gameplay:

9. The snake moves in the direction of the arrow keys pressed.
10. The objective is to eat the red food to grow and increase your score.
11. Avoid hitting the walls or the snake's own body to prevent the game from ending.

Code Overview

main.py

This script handles the setup and running of the Electron app. It ensures that npm is installed and runs the necessary commands to start the app.

```python import subprocess import sys import shutil import os

def run_electron_app(): try: npm_path = shutil.which("npm") if npm_path is None: print("Error: npm is not installed or not in the system PATH.") print("Please install Node.js and npm from https://nodejs.org/") sys.exit(1)

    # Run npm install first
    subprocess.run([npm_path, "install"], check=True)

    # Then run npm start
    subprocess.run([npm_path, "start"], check=True)
except subprocess.CalledProcessError as e:
    print(f"Error running Electron app: {e}")
    sys.exit(1)
except FileNotFoundError as e:
    print(f"Error: {e}")
    print("Please make sure npm is installed and in your system PATH.")
    sys.exit(1)

if name == "main": # Change to the directory containing package.json os.chdir(os.path.dirname(os.path.abspath(file))) run_electron_app() ```

package.json

This file defines the Electron app's metadata and dependencies. It specifies the main entry point (main.js) and includes a start script to launch the app.

json { "name": "snake-game", "version": "1.0.0", "description": "Snake Game built with Electron", "main": "main.js", "scripts": { "start": "electron ." }, "dependencies": { "electron": "^13.0.0" } }

main.js

This script creates the Electron window and loads the index.html file, which contains the game interface.

```javascript const { app, BrowserWindow } = require('electron') const path = require('path')

function createWindow () { const win = new BrowserWindow({ width: 450, height: 550, webPreferences: { nodeIntegration: true, contextIsolation: false } })

win.loadFile('index.html') win.webContents.openDevTools() }

app.whenReady().then(() => { createWindow()

app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) })

app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ```

index.html

This file contains the HTML structure and styling for the game interface.

```html

Start

```

game.js

This file contains the game logic, including the snake's movement, collision detection, and score updates.

```javascript const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreElement = document.getElementById('score'); const startButton = document.getElementById('startButton'); const highScoreElement = document.getElementById('highScore');

const gridSize = 20; const tileCount = canvas.width / gridSize;

let snake = [ { x: 10, y: 10 }, ]; let food = { x: 15, y: 15 }; let dx = 0; let dy = 0; let score = 0; let highScore = localStorage.getItem('highScore') || 0; let gameLoop; let isPaused = false;

function drawGame() { if (isPaused) return; clearCanvas(); moveSnake(); drawSnake(); drawFood(); checkCollision(); updateScore(); }

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

function moveSnake() { const head = { x: snake[0].x + dx, y: snake[0].y + dy }; snake.unshift(head); if (head.x === food.x && head.y === food.y) { score++; generateFood(); } else { snake.pop(); } }

function drawSnake() { ctx.fillStyle = 'lime'; snake.forEach(segment => { ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2); }); }

function drawFood() { ctx.fillStyle = 'red'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2); }

function generateFood() { food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; }

function checkCollision() { const head = snake[0]; if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) { gameOver(); } for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { gameOver(); } } }

function gameOver() { clearInterval(gameLoop); if (score > highScore) { highScore = score; localStorage.setItem('highScore', highScore); updateHighScore(); } alert(Game Over! Your score: ${score}); startButton.textContent = 'Restart'; startButton.disabled = false; }

function updateScore() { scoreElement.textContent = Score: ${score}; }

function updateHighScore() { highScoreElement.textContent = High Score: ${highScore}; }

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

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

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

}

function togglePause() { isPaused = !isPaused; if (isPaused) { clearInterval(gameLoop); } else { gameLoop = setInterval(drawGame, 100); } }

function startGame() { snake = [{ x: 10, y: 10 }]; food = { x: 15, y: 15 }; dx = 0; dy = 0; score = 0; isPaused = false; clearInterval(gameLoop); gameLoop = setInterval(drawGame, 100); startButton.textContent = 'Restart'; startButton.disabled = false; }

document.addEventListener('keydown', changeDirection); startButton.addEventListener('click', startGame); updateHighScore(); ```

Conclusion

This template provides a fully functional Snake game built with Electron. By following the steps outlined above, you can easily deploy and run the game. Enjoy playing and customizing your Snake game!

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

Template Benefits

1. Cross-platform Development: This template demonstrates how to create a desktop application using Electron, which allows developers to build cross-platform apps using web technologies. This can significantly reduce development time and costs for businesses targeting multiple operating systems.

2. Employee Training and Onboarding: The simple snake game can be customized and used as part of employee training programs or onboarding processes. It can help new hires familiarize themselves with company-specific concepts or procedures in an engaging, gamified manner.

3. Stress Relief and Productivity Booster: Offering a quick, fun game like this within a company's internal tools can provide employees with short breaks, potentially improving overall productivity and job satisfaction.

4. Demonstration of Technical Skills: For software development companies or freelancers, this template serves as a portfolio piece demonstrating proficiency in Electron, JavaScript, and basic game development concepts.

5. Marketing and Brand Awareness: Businesses can customize the game with their branding and distribute it as a promotional tool, increasing brand visibility and creating a memorable interaction with potential customers.