https://github.com/binghuan/canitbend
This is a web app to let you simulate bending your phone.
https://github.com/binghuan/canitbend
javascript webapp
Last synced: about 1 month ago
JSON representation
This is a web app to let you simulate bending your phone.
- Host: GitHub
- URL: https://github.com/binghuan/canitbend
- Owner: binghuan
- Created: 2014-09-25T17:49:04.000Z (over 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2016-03-30T07:56:12.000Z (about 10 years ago)
- Last Synced: 2025-06-02T22:02:49.235Z (about 1 year ago)
- Topics: javascript, webapp
- Language: CSS
- Homepage: http://studiobinghuan.blogspot.tw/2014/09/can-it-bend.html?view=flipcard
- Size: 2.14 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Can It Bend? 📱💥
**Live Demo:** [http://binghuan.github.io/canitbend/](http://binghuan.github.io/canitbend/)
A fun interactive web application that simulates bending a smartphone! Test your phone's durability with this entertaining touch-based game.
## 🎮 How to Play
1. **Touch and Hold**: Place one finger on the top area and another on the bottom area of the phone
2. **Apply Pressure**: Keep both fingers pressed simultaneously
3. **Wait for the Bend**: Hold for about 2.5 seconds to see the phone bend
4. **Recover**: Use the "Recover" button to restore the phone to its original state
## ✨ Features
- **Touch-based Interaction**: Realistic two-finger bending simulation
- **Sound Effects**: Audio feedback for bending and breaking sounds
- **Visual Animation**: Smooth transition from normal phone to bent phone
- **Mobile Optimized**: Designed specifically for mobile devices and touch screens
- **Offline Support**: Uses Application Cache for offline functionality
- **Social Sharing**: Built-in Facebook, Google+, and Line sharing buttons
## 🛠 Technology Stack
- **HTML5**: Modern web structure with mobile-first design
- **jQuery Mobile 1.4.4**: Mobile-optimized UI framework
- **JavaScript**: Interactive touch event handling
- **CSS3**: Responsive design and animations
- **Web Audio API**: Sound effects and audio feedback
- **Application Cache**: Offline web app capabilities
## 📱 Mobile Features
- Apple Web App capable (can be added to home screen)
- Custom app icons for various device sizes (16px to 1024px)
- Responsive design that adapts to different screen sizes
- Touch event optimization for mobile devices
- Fixed header and footer for better mobile UX
## 🎵 Audio Assets
- `sound1.wav`: Bending sound effect
- `wrong.wav`: Breaking/failure sound effect
- Supports both WAV and OGG formats for browser compatibility
## 🖼 Visual Assets
- **Phone Images**:
- `smartphone.png`: Normal phone appearance
- `smartphonebended.png`: Bent phone appearance
- **Finger Icons**: Visual guides showing where to touch
- **App Icons**: Complete icon set for various devices and sizes
## 🚀 Installation & Usage
### For Development:
```bash
# Clone the repository
git clone https://github.com/binghuan/canitbend.git
# Navigate to project directory
cd canitbend
# Serve the files (using any local server)
# For example, using Python:
python -m http.server 8000
# Or using Node.js serve:
npx serve .
# Open browser and navigate to:
# http://localhost:8000
```
### For Deployment:
Simply upload all files to any web server. The app is designed to work as a static website.
## 📊 Analytics
The app includes Google Analytics tracking to monitor usage and user interactions.
## 🌐 Browser Compatibility
- Modern mobile browsers (iOS Safari, Chrome Mobile, etc.)
- Desktop browsers with touch simulation
- Offline functionality through Application Cache
## 👨💻 Author
**BH_Lin (Bing-Huan)**
- **Blog**: [Studio Bing Huan](http://studiobinghuan.blogspot.tw/?view=flipcard)
- **GitHub**: [binghuan](https://github.com/binghuan)
*"Can it bend? Find out with this fun interactive simulator!"* 🎯