Code Monkey home page Code Monkey logo

game-off-2017's Introduction

KickPunch

๐ŸŽฎ game-off-2017 challenge entry. Play on itch.io | Play on Newgrounds | Watch Video

KickPunch is an old school Beat-'em-up game. Get your fighting skills tested by defeating all enemies in this three level action game.

It's a beautiful Sunday afternoon. Brian and Gloria Freezby are back in their home town for the weekend and are taking a stroll on Shaker St. together with their dog Dido. Suddenly, they are approached by a group of hooligans. One of them, visibly bigger than the others, steps out of the group. It's Brianโ€™s old rival - Arkian Joel. Arkian does some smack talk and orders a bunch of his thugs to grab Gloria and Dido. He then leaves his gang to take care of the Brian problem.

Brian faces the bad guys in fight and after defeating them continues down on Shaker St. determined to find Arkian and save his wife and dog.

KickPunch

Supported Browsers

  • Google Chrome - 62+ (:star: highly recommended)
  • Firefox - 57+
  • Safari - 11.0.2
  • Opera - 49.0
  • Microsoft Edge 41.16299.15.0 (anti-aliasing is forced by the browser)

Controls

It's time to kick ass and chew bubble gum. โœŠ

Ok, ok. There's no bubble gum in this game, ...yet! ๐Ÿ˜ˆ

  • ๐ŸŽฎ Use the Gamepad Luke! No seriously, the game can be played with a gamepad (xinput), so go ahead and try it.
  • ๐Ÿƒ D-Pad, Left Stick, Arrow Keys or WASD keys to move.
  • ๐Ÿ‘Š Press X (xbox), H, O or Enter to punch.
  • :rage3: Press A (xbox), J, P or Backspace to kick.

Here are some hints.

  • Move, move, move. Don't let the enemies surround you. Try to stack them together and then hit them.
  • Kicks knock enemies back farther than punches, but they do less damage.
  • Get food to heal yourself. The bigger the dish, the more hitpoints you'll get restored. Also, make sure you look behind the objects in each level.

Development

Requirements

Installation

npm i

Running a dev server

npm start

or

npm run dash

(you'll need extra RAM)

Default address is http://0.0.0.0:3000

Get a production build

npm run build

Open Source Tools

Notable tools used to create this game.

  • Phaser - A fun, free and fast 2D game framework for making HTML5 games.
  • Tiled - Your free, easy to use and flexible tile map editor.
  • TexturePacker - Be smart - Let TexturePacker collect the sprites.
  • GIMP - The Free & Open Source Image Editor.
  • Visual Studio Code - Free & Open Source code editor.

Licensing

License: MIT License: CC BY 4.0

Source code is under MIT license, see LICENSE.

Third party code dependencies are under their respective licenses, see ./node_modules/%dependency-name%/LICENSE after their installation.

Assets are under CC BY 4.0 license, if no respective LICENSE file is present in ./src/assets subdirectories.


KickPunch is a GitHub Game Off 2017 entry.

GitHub Game Off 2017 Game Jam

game-off-2017's People

Contributors

afonsocarlos avatar charliiee avatar n3tn0de avatar petarov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

game-off-2017's Issues

Kicks are too slow

ะšicks are too slow, so people do not seem to use them. :(

There seem to be 2 general issues here:

  • Kicks are too slow and the player often gets punched before the animation completes.
  • Punch is stronger than kicks and kicks, so people generally use punches even though kicks push enemies farther back.

You can't hit when invincible

From itch.io - The fact that you can't hit when invincible is a bit weird :o

Fair comment. Temporary invincibility was originally added to counter the weak AI that would engage the player as soon as they revive after being hit. Perhaps we need another solution here.

HUD: Show enemy hit points

Display the enemy being hit's HP in HUD. Problem here is that our resolution is a bit limited. We might not be able to display all enemy HP statuses at the same time.

Breakable objects

We got people expecting to break the trash cans, etc. and find something below, like food for instance. The game does not support breakable objects at this point.

Desktop version

Add a desktop version, maybe using ElectronJS as wrapper. We can then distribute the game as downloadable and also add it to several Linux distros as a package.

Add player lives

The current HUD feature only a health bar. We should add an amount of lives as well.

Additionally, the player may gain more lives by hitting certain high scores. #13

Add shadows

  • Add (dynamic?) shadows to player & npcs.
  • Maybe also add shadows (either dynamic or static) to food and collectables in general.

Music & Sfx controls

  • Add an option to toggle music and sounds on/off in the menu options.
  • There should be some keyboard shortcuts for that as well.

The Punch Script

Last edit: 10-Nov-2017 23:30 UTC+0
Last edited by: @petarov

The Kickpunch Script

(Warning! Cheezy content detected. ๐Ÿง€ )

Characters

Name Role
Brian Freezby ๐Ÿƒ Main protagnoist
Gloria Freezby ๐Ÿ‘ง Brianโ€™s wife
Dido ๐Ÿ• Brian and Gloriaโ€™s dog
Arkian Joel Brianโ€™s arch enemy (Game boss)
Bo A mid-level boss

Foes

Name Image Description
P1 story_foe_1 Level 1 NPC minion. Fists attack.
P2 (Big Joe) story_foe_bigjoe Level 2 NPC minion. Has more health, does more damage.
K1 story_foe_2 Level 1 NPC minion. Kicks attack.
K2 (Mino) story_foe_bigjoe Level 2 NPC minion. Has more health, does more damage.
Bo story_foe_bo Boss Level. Fists attack.
Arkian Joel n/a Boss level. TODO

Setting

Brian and Gloria are back in their home town for the weekend and are taking a stroll on Shaker St. Suddenly, they are approached by a group of hooligans who block their way forwards. One of them, visibly bigger than the others, steps out of the group. It is Brianโ€™s old school rival - Arkian Joel. Arkian does some smack talk and orders a bunch of hooligans to grab Gloria and Dido. He then orders Bo, a gang member, to take care of the "Brian problem" and the group leaves.

Bo leaves few thugs to finish Brian off. Brian faces the bad guys in fight and after defeating them continues down on Shaker St. determined to find Arkian and save his wife and dog.

Chapters

Opening Scene (Intro)

Gloria, Brian and Dido are positioned on the left side of the screen. A short dialog follows between Gloria and Brian.

Suddenly Arkian, Bo and a few thugs appear walking towards Brian's from the right side of the screen. The music changes and dialogs are exchanged.

The thugs (or Bo and some P1) pick up Gloria and Dido (their sprites hovering above the thugs' sprites) and move away from Brian (they move to the right pass the screen edge). Dialogs are exchanged between Brian and Arkian and the scene ends.

Dialog

TODO

Act 1 - Defeating Bo's Thugs

Brian needs to defeat Bo's thugs and continue his search on Shaker St. The act finishes with Brian defeating the thugs.

This act also serves as a tutorial. The player will be shown the controls to play with, the moves and so on.

Attack Waves

  • Wave 1 - 2x P1 foes.
  • Wave 2 - 3x P1 foes.

Act 2 - Local Drunks

While walking ahead, a door on the street opens. Brian faces a group of drunks from the local bar. He needs to defeat them before continuing to the next act.
The group consists of 3 waves.

Attack Waves

  • Wave 1 - 3x P1 foes.
  • Wave 2 - 5x P1 foes.
  • Wave 3 - 3x P1 foes + 1x P2 foe.

Act 3 - Fighting Bo's Gang

Bo, a member of Arkianโ€™s gang is left to deal with Brian. Brian needs to defat Bo and continue his search down on Shaker St. The act finishes with Brian defeating the boss level - Bo.

Attack Waves

  • Wave 1 - 3x K1 foes.
  • Wave 2 - 2x K1 + 3x P1 foes.
  • Wave 3 - 3x K1 foes + 1x Bo.
    • Every time Bo's health diminishes by 25% we will spawn 1x P1 and 1x K1 foes.

Act 4 - Arkian's Gang. An Elevator Action.

Brian needs to get to the very top of a city building in order to locate Arkian Joel. He hopes to also find there Gloria and Dido. While taking the elevator he is suddenly attacked by Arkian's gang.

Note. In this level, because the elevator will be moving up, enemies will have to drop from above or something. We can't have them simply walking in from the left or right edge of the screen. Also, we could include the ability to throw enemies off the elevator. This has to be addressed in the game mechanics!

Attack Waves

TODO

Act 5 - The Roof Fight

Brian is on the top of a city building (on the roof). He has to combat a bunch of enemies before facing Arkian. The final fight is between Arkian and him, as well as some level 1 foes.

Dialog

TODO

Defeating Arkian ends the game and Brian wins.

Attack Waves

  • Wave 1 - 2x P1 + 2x K1 foes.
  • Wave 2 - 1x P2 + 1x K2 foes.
  • Wave 3 - 1x Arkian + 2x K1 foes + 2x P1 foes.
    • Every time Arkian's health diminishes by 25% we will spawn 1x P2 / K2 foe.

Finale

Brian, Gloria and Dido are reunited and continue their weekend walk on Shaker St.

Dialog

TODO

Roll credits.

The Punch Plan

This is our task list. The list will evolve, hopefully by clearing the checkboxes below.

Let's go! ๐Ÿ‘Š

Orga (@petarov)

  • Create a GitHub repo
  • Create an issue with all TODOs (this issue ๐Ÿบ )
  • Acquire game assets
  • Add a proper README file
  • Find testers
  • Upload game to Itch.io, add info
  • Update GitHub README (Add screenshots)

Design (@petarov)

  • Write a story
  • Describe characters
  • Write dialogs
  • Describe levels / acts (what happens in each chapter - attack waves; etc.)
  • Prep a list of required sound effects & music scores (see Assets below)

Development

  • Repository structure pipeline
  • Test Prototype

Levels implementation

Where and when to spawn enemy waves. We will use Tiled for that.

  • Implement loading of levels. @petarov
  • Collectables (only food for now) @petarov
  • NPCs spawn mechanism and Hotpoints impl.
  • Act 1 impl. @petarov
  • Act 2 impl. @petarov
  • Act 5 (Roof) impl. @petarov
  • Act 3 impl.
  • Act 4 (Elevator) impl.
  • Breakable obstacles (e.g., break obstacle to spawn food)

Fight mechanics

  • Player mechanics (controls, pick up food, actions - punch, combo, jump, airkick, death) @n3tn0de @petarov
  • NPC mechanics (action animations - stand, attack, movement, death) @petarov
  • Fight mechanics (collisions with enemies, impl. player hit combos) @petarov
  • Enemy AI: Lower level enemies (when to attack, i.e., range, how to attack) @petarov
  • Boss AI: (2 mostly common types - Bo & Arkian's) @petarov

Artefacts

  • Add pixelated text font @Charliiee
  • Center game screen (css anyone?) @n3tn0de
  • HUD: Health bars for the player and NPCs being attacked @Charliiee
  • HUD: Add dialogs tool (Something like pop up RPG dialogs where we can put texts) @Charliiee
  • Menu: Add game loading screen (progress to show while loading assets) @Charliiee
  • Menu: Main menu (Options: Play, Controls, Credits) @Charliiee
  • Menu: Game over screen (If health goes to 0) @petarov
  • Integrate sound effects & music @Charliiee & @petarov
  • Wrap game screen in a Game boy frame (Example at OGA) @n3tn0de
  • Screen shake effect (Phaser example) @Charliiee
  • Shadows of player & NPCs
  • Add in-game dialogs
  • Add in-game tutorial

Misc

  • Add controller support (at least x-input)
  • Controls screen (keyboard, x-input)
  • Support mobile devices (touch controls, etc)
  • Simple particle effects (e.g., when the player breaks stuff on screen, breakable objects).
  • Progress saving (localStorage api)
  • Desktop version (nw.js, Electron)

Assets

Sound effects (@lampeight)

  • Punch/Kick
  • Jump / Dash
  • Item pickup
  • Death / Gameover
  • Level / Stage Clear
  • "This way ๐Ÿ‘‰"
  • Despawn (when beaten enemy blinks before disappearing)
  • Props damage (trash cans, cars, street lights, etc., optional)
  • UI / menu beeps and blips (optional)
  • MUSIC: In-game music
  • MUSIC: Menu music (optional)
  • MUSIC: Intro (story dialogs) music (optional)

Graphics

Font issues

Current font looks bad at low resolutions. This prevents us from enhancing the HUD and dialog displays.

Confusion at the end of Act 2

When all enemies on Act 2 are removed and the player's at the end of the map, the pointer signal is not being shown.

This needs a fix, such that the player.sprite.x coordinate is taken into account.

Additionally, the game level may add some graphics elements that suggest going farther right is not possible.

Improve enemies AI

Right now that always choose the shortest path possible. They need to be smarter than that and not stack together that much/often.

Player moves too slow or seems like moving too slow

This was already mentioned in Itch.io and I got people I know that played the game, telling me the same.

Current hero.js defined speed is 40.

const HeroConsts = {
  SPEED: 40,

If we increase that, we must check how that stacks against the enemies. One idea I have atm is to use a global speed value for the player (maybe in Globals.js) and have all other enemy speeds vary depending on that value.

Additionally, we may add sprinting animations.

Make it rain

A special fx feature that adds rain to the level. Makes thing more dramatic.

Questions about License

This is not a feature-request or bug but an honest question!

Are you allowed to use proprietary assets in your game and then bundle it as open-source?

Doesn't that fall under "redistributing the assets" in some sense?

Various public-domain assets make an exception stating that that doesn't include "bundling the assets as part of the game or open-source project" but I'm not sure if proprietary assets are licensed like that. For instance envato doesn't even allow HTML5 templates to be used as wordpress themes (both free and commercial)

Please reflect your thoughts on this!!

Game Score & Hall of Fame

There are no scores when punching / kicking enemies. Adding high scores requires enhancements in the HUD and also a Hall Of Fame menu option where, let's say, the Top 10 are displayed.

Additionally, we can have the High Scores stored remotely somewhere. And make them shared for any players that play the game.

Scores also allow us to add gameplay goodies like lives and such. E.g, 10K points give +1 life.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.