Skip to content

A sleek, responsive BlackJack game built with pure HTML, CSS and JavaScript featuring interactive chip betting, animated card dealing, and touch-optimized controls for all devices. ♠️♥️♣️♦️

License

Notifications You must be signed in to change notification settings

Saganaki22/Blackjack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

BlackJack ♠️♥️♣️♦️

A modern, interactive BlackJack game with a sleek casino-inspired interface. Play the classic card game against the dealer with realistic animations and intuitive touch controls.

image

Features

  • 🎮 Classic BlackJack gameplay against the dealer
  • 💰 Interactive chip betting system with drag-and-drop functionality
  • 💳 Customizable bet amounts with various chip denominations
  • 🃏 Animated card dealing and gameplay
  • 📱 Fully responsive design for all devices
  • 🌈 Stunning neon/casino-inspired visuals
  • 📊 Game history tracking to review your wins and losses
  • 👆 Optimized for touch interactions on mobile devices
  • 🔄 Automatic deck shuffling when needed

Architecture

This BlackJack game is built with a clean, modern web architecture:

  • Frontend: Pure HTML5, CSS3, and Vanilla JavaScript
  • UI Framework: Custom-built responsive layout with flexbox
  • Animation System: CSS keyframe animations and JavaScript transitions
  • Game Logic: Object-oriented JavaScript with state management
  • Rendering: DOM-based card and chip rendering
  • Input Handling:
    • Mouse events for desktop
    • Touch events for mobile devices
    • Drag and drop API for betting chips
  • Responsive Design: Media queries for different screen sizes
  • Storage: In-memory game state management

The entire application is contained in a single HTML file, making it extremely portable and easy to deploy.

Device Compatibility

BlackJack is thoroughly tested and optimized for:

  • Desktop: Supports all modern browsers (Chrome, Firefox, Safari, Edge)
  • Tablets: Optimized layout for iPad and Android tablets
  • Mobile Phones: Responsive design with touch-optimized controls
    • Custom touch handling for chip placement
    • Collapsible information panel for more screen space
    • Appropriately sized buttons for touch input
    • Optimized display for all screen sizes including small devices

How to Play

  1. Drag chips from the chip tray to the betting area to place your bet
  2. Click the "Deal Cards" button to start the game
  3. Choose your action: Hit, Stand, Double Down
  4. Try to beat the dealer by getting closer to 21 without going over
  5. Win to collect your bet, or lose and try again!

Development

To run the game locally:

  1. Clone this repository
  2. Open index.html in your web browser
  3. No build process or dependencies required!

og-image

License

Copyright 2023 BlackJack

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software


![og-image](https://github.com/user-attachments/assets/e3b6e206-9cfc-4bf4-aca0-b8c9be38b59b)
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

A sleek, responsive BlackJack game built with pure HTML, CSS and JavaScript featuring interactive chip betting, animated card dealing, and touch-optimized controls for all devices. ♠️♥️♣️♦️

Topics

Resources

License

Stars

Watchers

Forks

Languages