"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 using arrow keys, eat food to grow, and avoid collisions with walls or the snake's own body. The game also includes a pause/resume feature and keeps track of the high score.

Getting Started

To get started with this 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 application. Here’s how to use the interface:

1. Game Interface:

   • The game interface consists of a canvas where the snake moves, a score display, a high score display, and a start/restart button.
   • The game starts with a snake of length 1 and a piece of food placed randomly on the canvas.

2. Controls:

   • Use the arrow keys to control the direction of the snake:
     • Left Arrow: Move left
     • Right Arrow: Move right
     • Up Arrow: Move up
     • Down Arrow: Move down
   • Press the Space Bar to pause or resume the game.

3. Gameplay:

   • The objective is to eat the red food to grow the snake and increase your score.
   • Avoid hitting the walls or the snake's own body to prevent the game from ending.
   • The game will display an alert with your score when it ends, and you can restart the game by clicking the start/restart button.

Code Overview

The template includes the following files:

• main.py: A Python script to run the Electron app.
• package.json: Configuration file for the Electron app, including dependencies and scripts.
• main.js: Main JavaScript file to create the Electron window and load the HTML file.
• index.html: HTML file containing the game interface.
• game.js: JavaScript file containing the game logic.

main.py

```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

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

```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

```html

Start

```

game.js

```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 the game to your liking!

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.