How to make a Online Games 🎮
Class - 11 Science
Group Members - Proneet Saibo, Dugendra Singh Kumar and Prantik Roy
Introduction
The classic Rock Paper Scissors game is a staple in many households, schools, and offices, known for its simplicity and fun gameplay. What if you could play the game against your computer, but instead of clicking buttons, you could use hand gestures that the computer detects? With OpenCV (Open Source Computer Vision Library) and Python, we can create a computer vision-based Rock Paper Scissors game that detects hand gestures in real-time and plays against you!I
n this blog post, we’ll walk through how to build a simple Rock Paper Scissors game using computer vision with Python and OpenCV, where the game can recognize your hand gestures (Rock, Paper, or Scissors) and play against you.
Prerequisites
Before we start coding, make sure you have:
Python installed on your system (Version 3.x).
pip install opencv-python
3. Hand Gesture Recognition: To detect Rock, Paper, and Scissors hand gestures, we’ll be using the webcam and analyzing the contours of the hand using OpenCV.
Step1: Set up the Camera
The first step is to access the webcam and display the live feed. This will allow the computer to capture the hand gestures. You can do this by using OpenCV's VideoCapture function, which opens the camera.
import cv2#
Initialize the webcam
cap = cv2.VideoCapture(0)
while True:
# Capture frame-by-frame
ret, frame = cap.read()
# If frame is read correctly, ret will be True
if not ret:
print("Failed to grab frame")
break
# Display the frame
cv2.imshow("Rock Paper Scissors", frame)
# Break the loop if 'q' is pressed
if cv2.waitKey(1) & 0xFF == ord('q'):
break
importRelease the capture and close the window
cap.release()
cv2.destroyAllWindows
Step2 : Hand Detection using Thresholding and Contours
The key part of the game is detecting the user's hand and identifying whether it's making a Rock, Paper, or Scissors gesture. We’ll use hand segmentation techniques like color thresholding to isolate the hand from the background.
Step 2.1: Convert Image to Grayscale – This simplifies the image.
Step 2.2: Apply Gaussian Blur – To reduce noise.
Step 2.3: Thresholding – We’ll create a mask to isolate the hand by using color thresholding.
import cv2
import numpy as np
# Initialize the webcam
cap = cv2.VideoCapture(0)
while True:
# Capture frame-by-frame
ret, frame = cap.read()
Convert the frame to HSV (Hue, Saturation, Value) color space
hsv = cv2.cvtColor(frame, cv2.COLOR_BGR2HSV)
# Define the range of skin color in HSV
lower_skin = np.array([0, 20, 70], dtype=np.uint8)
upper_skin = np.array([20, 255, 255], dtype=np.uint8)
# Create a mask to detect skin color
mask = cv2.inRange(hsv, lower_skin, upper_skin)
# Apply the mask to the original frame
result = cv2.bitwise_and(frame, frame, mask=mask)
# Display the result
cv2.imshow("Hand Detection", result)
if cv2.waitKey(1) & 0xFF == ord('q'):
break
# Release the capture and close the window
cap.release()
cv2.destroyAllWindows()
This code applies a skin color mask to the frame to highlight the hand. In this case, we use a simple range for the skin color in the HSV color space. You may need to adjust the lower_skin and upper_skin values to suit the lighting conditions and skin tones.
Step 3: Detecting Hadnd Contours
Now that we have isolated the hand, we need to detect the contours of the hand to recognize the gesture. Contours are essentially the boundaries of the hand shape that we can use to classify the gesture.
We'll use cv2.findContours to extract the contours
# Find contours
contours, _ = cv2.findContours(mask, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE)
# Find the largest contour (most likely the hand)
if len(contours) > 0:
largest_contour = max(contours, key=cv2.contourArea)
# Draw the contour on the original frame
cv2.drawContours(frame, [largest_contour], -1, (0, 255, 0), 3)
# Get the convex hull of the hand to detect the number of fingers
hull = cv2.convexHull(largest_contour)
# Draw the convex hull
cv2.drawContours(frame, [hull], -1, (0, 0, 255), 3)
# Display the processed frame
cv2.imshow("Hand Contours", frame)
This code finds the largest contour, which we assume to be the hand, and draws it on the screen. We also draw the convex hull of the contour, which will help in recognizing the number of fingers (important for the gestures).
Step 4: Classifying the Gesture (Rock,Paper,Scissors)
Now that we can detect the hand contours, we need to classify the hand gesture. A simple way to classify gestures is to count the number of fingers extended.
To count the fingers, we can use the convex hull and convexity defects, which allow us to detect the indentation between the fingers.p
def count_fingers(hull, contours):
# Calculate the convexity defects
defects = cv2.convexityDefects(contours, hull)
finger_count = 0
if defects is not None:
for i in range(defects.shape[0]):
# Get the start, end, and farthest point of the defect
start, end, farthest = defects[i][0]
start_point = tuple(contours[0][start][0])
end_point = tuple(contours[0][end][0])
farthest_point = tuple(contours[0][farthest][0])
# Calculate the distance between points to determine if it's a real indentation
if cv2.pointPolygonTest(hull, farthest_point, True) < 0:
finger_count += 1
return finger_count
Based on the number of fingers, we can decide whether the hand gesture is:
Rock (No fingers or a closed fist)
Paper (All fingers extended)
Scissors (Two fingers extended)
Step 5: Implementing the game logic
We now need to compare the user’s gesture with a randomly chosen gesture from the computer. Here’s the basic flow:
1.Detect the user’s gesture.
2.Have the computer randomly choose a gesture.
3.Compare the user’s and computer’s gestures to determine the winner.
import random
gestures = ["Rock", "Paper", "Scissors"]
def get_computer_choice():
return random.choice(gestures)
def determine_winner(user_choice, computer_choice):
if user_choice == computer_choice:
return "It's a tie!"
elif (user_choice == "Rock" and computer_choice == "Scissors") or \
(user_choice == "Scissors" and computer_choice == "Paper") or \
(user_choice == "Paper" and computer_choice == "Rock"):
return "You win!"
else:
return "Computer wins!"
# Example
user_choice = "Rock" # Replace with your hand detection result
computer_choice = get_computer_choice()
print(f"User's choice: {user_choice}")
print(f"Computer's choice: {computer_choice}")
print(determine_winner(user_choice, computer_choice))
This block of code lets the computer randomly pick a gesture and then compares it with the user’s gesture to declare a winner
Conclusion
In this blog post, we learned how to build a simple Rock Paper Scissors game using OpenCV and Python. We used computer vision to detect hand gestures in real-time, classify them as Rock, Paper, or Scissors, and then compare the user’s input to the computer’s choice to determine the winner.T
his project is a great starting point for anyone looking to get into computer vision and gesture recognition. You can expand this by adding more complex gestures, improving the accuracy of the hand detection, or adding a GUI for a more polished user experience.
Happy coding, and may the best hand win!

Comments
Post a Comment