Traceball

2D Game with squares running from squares and avoiding some...squares. Yey, run square run!

The game plot is to survive as much as you can, runnig from the chaser. Also there are some other features such patrols and traps which will increase the difficulty. User is able to choose his and enemies color as he likes.

Installation

 It runs in your browser

About the enemies

• Chaser will follow it's target until he catches it.
• Patrol will move to random points on the map, if the player enters in his proximity range he will start chase the player until he will exit out of the range.
• Trap/Obstacle are steady objects meant to harden the player's survival. Traps are randomly placed on the map.

Coordinate System

Shows your position on the map UI Code

position(vector) {
    return this.text('position', "X: " + vector.x + " Y: " + vector.y);
}

Creating a rectangular shape on a specified position.

/**
 *
 * @param {Vector} position
 * @param {Vector} size
 * @param {string} color
 */
function rect(position, size, color) {
    context.beginPath();
    context.fillStyle = color;
    context.rect(position.x, position.y, size.x, size.y);
    context.fill();
}

Release History

Version 1.2

* Improved animations. Enemies are now moving smoothly.
* Player now is placed safer on the map.
* Better feedback when game finishes.

Version 1.1

* Patrols are now chasing the player when gets in their range.
* Added score.
* Added difficulty increase over time.

Version 1.0

* Enemy now chase the player.
* Added Traps/Obstacles.
* Added Patrols.
* When player gets hit lives decreases.
* User is able to start/stop the game.
* User can choose a color for his player and the enemy.
* Added a nice looking background.
* Improved the design.

Meta

Codrin Axinte – @LinkedIn – [email protected] – [email protected]

Distributed under the MIT license. See LICENSE for more information.

https://github.com/codrin-axinte

Some references I've used

• http://blog.sklambert.com/html5-canvas-game-2d-collision-detection/
• https://stackoverflow.com/questions/19337180/movement-multiple-objects-in-canvas-to-x-y-coordinate
• https://www.w3schools.com/graphics/game_intro.asp
• https://jsfiddle.net/sans_amour/eqc176y2/2/

Contributing

1. Fork it (https://github.com/codrin-axinte/Traceball/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request