Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📃: adding a snake game under games section #256

Merged
merged 6 commits into from
Jan 10, 2025
+201 −0
Merged

📃: adding a snake game under games section #256

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9660087
Added Snake Game
ash01825 Jan 9, 2025
16a9722
Merge remote-tracking branch 'origin/main'
ash01825 Jan 9, 2025
be36770
Update snakeGame.py
ash01825 Jan 9, 2025
bd0d45b
Update snakeGame.py
ash01825 Jan 9, 2025
699dde4
Merge branch 'Avdhesh-Varshney:main' into main
ash01825 Jan 9, 2025
5f1ea47
removed instructions to play
ash01825 Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 207 additions & 0 deletions src/apps/pages/programs/Games/snakeGame.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
import streamlit as st
import streamlit.components.v1 as components


def snakeGame():
st.title("Snake Game")

game_html = """
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 30;
const tileCount = canvas.width / gridSize;

let speed = 7;
let score = 0;

let snake = [
{x: 10, y: 10}
];

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

let velocityX = 0;
let velocityY = 0;

document.addEventListener('keydown', changeDirection);

function changeDirection(event) {
const A_KEY = 65;
const D_KEY = 68;
const W_KEY = 87;
const S_KEY = 83;

const keyPressed = event.keyCode;
const goingUp = velocityY === -1;
const goingDown = velocityY === 1;
const goingRight = velocityX === 1;
const goingLeft = velocityX === -1;

if (keyPressed === A_KEY && !goingRight) {
velocityX = -1;
velocityY = 0;
}
if (keyPressed === W_KEY && !goingDown) {
velocityX = 0;
velocityY = -1;
}
if (keyPressed === D_KEY && !goingLeft) {
velocityX = 1;
velocityY = 0;
}
if (keyPressed === S_KEY && !goingUp) {
velocityX = 0;
velocityY = 1;
}
}

function drawGame() {
moveSnake();

let result = isGameOver();
if (result) {
return;
}

clearScreen();
checkFoodCollision();
drawFood();
drawSnake();
drawScore();

setTimeout(drawGame, 1000/speed);
}

function isGameOver() {
let gameOver = false;

if (snake[0].x < 0 || snake[0].x >= tileCount || snake[0].y < 0 || snake[0].y >= tileCount) {
gameOver = true;
}

for (let i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
gameOver = true;
}
}

if (gameOver) {
ctx.fillStyle = "white";
ctx.font = "50px Verdana";
ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2);
ctx.font = "30px Verdana";
ctx.fillText("Press Space to Restart", canvas.width / 4, canvas.height / 1.5);
}

return gameOver;
}

function drawScore() {
ctx.fillStyle = "white";
ctx.font = "30px Verdana";
ctx.fillText("Score: " + score, canvas.width - 150, 40);
}

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

function drawSnake() {
ctx.fillStyle = "lime";
for (let i = 0; i < snake.length; i++) {
ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize - 2, gridSize - 2);
}
}

function moveSnake() {
const head = {
x: snake[0].x + velocityX,
y: snake[0].y + velocityY
};

snake.unshift(head);
if (!eatFood()) {
snake.pop();
}
}

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

function eatFood() {
if (snake[0].x === food.x && snake[0].y === food.y) {
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
score += 10;
return true;
}
return false;
}

function checkFoodCollision() {
if (snake[0].x === food.x && snake[0].y === food.y) {
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
score += 10;
}
}

document.addEventListener('keydown', function(event) {
if (event.keyCode === 32) {
snake = [{x: 10, y: 10}];
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
velocityX = 0;
velocityY = 0;
score = 0;
drawGame();
}
});

drawGame();
</script>
</body>
</html>
"""

st.write("### How to Play:")
st.write("1. Use WASD keys to control the snake:")
st.write("2. Collect red food to grow and increase your score")
st.write("3. Avoid hitting the walls and yourself")
st.write("4. Press Space to restart after game over or increase your speed")

components.html(game_html, height=650)

st.markdown("""
<style>
.stMarkdown {
text-align: center;
}
</style>
""", unsafe_allow_html=True)
Loading