Project - Rock, Scissor, Paper Game like a pirate

ONLY PLAYABLE IN 1920x1080px, actually ;-)

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

My challenge was to code the game rock-scissor-paper game

• only using javascript, html and css
• free design

Personal challenge was to make a chibi game with real game sprites and cool pirate character sprites

Screenshot

Links

• Solution URL: [https://alpayc.github.io/Project_Rock_Paper_Scissors/]
• Game Character Sprites [https://craftpix.net/freebies/free-2d-pirate-character-sprites/]
• GUI assets [https://craftpix.net/freebies/free-jungle-cartoon-2d-game-ui/]
• Cartoon Backgrounds [https://craftpix.net/freebies/free-cartoon-forest-game-backgrounds/]
• Icon assets [https://www.flaticon.com/free-icons/stop]
• Icon assets [https://www.flaticon.com/free-icons/scissors]
• Icon assets [https://www.flaticon.com/free-icons/fist]
• Sprite Sheet Generator [https://codeshack.io/images-sprite-sheet-generator/]
• Sprite to Gif Generator [https://onlinegiftools.com/convert-sprite-sheet-to-gif]

My process

Built with

• Semantic HTML5 markup
• CSS
• Grid
• Flexbox
• ALL Animations with CSS-only and Keyframes in combination with add/remove classlist
• Gamelogic build with JS of course
• Free Game Assets and images

What I learned

How to build a game with serial and parallel animations. SVGs don't work properly for games, because of the workload of assets. Furthermore, i learned to pause functions with timeouts to time the complete animation. I also learned a lot of the eventListener function of JS.

Continued development

• Want to add splashscreen
• Want to add audio for attack, idle, win and lose animation
• Responsive Design
• Local Storage for Scoreboard
• Pause Menu
• Keybinds