Permalink
Browse files

Add: Kill count

  • Loading branch information...
1 parent 266bdfe commit c9dad2f32cac546182caac84eaa4348b5ac3fbc7 @javierbyte committed Jul 30, 2015
View
@@ -1,6 +1,6 @@
# ClashJS
-![](spec_assets/screenshot.png)
+![](spec_assets/screenshot.jpg)
This is an experiment. The idea is to create a battle game, where the participants code their AI, and then we make them fight!
View
Binary file not shown.
View
@@ -1,120 +1,7 @@
<html>
<head>
- <title>Sample App</title>
-
- <style>
- * {
- position: relative;
- margin: 0;
- padding: 0;
- }
-
- body {
- background: url('/static/bg.jpg') no-repeat center #2C3E50;
- background-size: cover;
- color: #fff;
- font: 1em/1.618 Graphik;
- font-weight: 200;
- width: 100vw;
- height: 100vh;
- overflow: hidden;
- }
-
- b {
- font-weight: 500;
- }
-
- .clash {
- width: 100vmin;
- height: 100vmin;
- margin: 0 auto;
- background: rgba(255, 255, 255, .03);
- }
-
- .clash-tile {
- display: inline-block;
- }
- .clash-tile:nth-child(odd) {
- background: rgba(255, 255, 255, .03);
- }
-
- .clash-ammo {
- position: absolute;
- background: url('/static/star.png') no-repeat center / 90%;
- }
- .clash-ammo:hover {
- transform: rotate(360deg);
- }
-
- .clash-player {
- position: absolute;
- top: 0;
- left: 0;
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- transition: transform .3s;
- }
- .clash-player-container {
- position: absolute;
- top: 0;
- left: 0;
- transition: transform .4s;
- }
- .clash-player-name {
- top: -2em;
- text-align: center;
- }
-
- .clash-shoot {
- position: absolute;
- width: 100em;
- transform-origin: center left;
- }
-
- .clash-layer {
- position: absolute;
- top: 0;
- left: 0;
- width: 100vmin;
- height: 100vmin;
- }
-
- .stats {
- position: fixed;
- top: 0;
- right: 0;
- padding: 1em;
- }
-
- .animation-shot {
- animation: shotKeyFrame .3s;
- }
- @keyframes shotKeyFrame {
- 0% {
- background: #f00;
- margin-top: -.05em;
- height: .1em;
- }
- 100% {
- background: #ff0;
- height: .7em;
- margin-top: -.35em;
- }
- }
-
- .animation-glow {
- animation: glowKeyFrame 1s infinite alternate;
- }
- @keyframes glowKeyFrame {
- 0% {
- -webkit-filter: saturate(0);
- }
- 100% {
- -webkit-filter: saturate(1);
- }
- }
- </style>
+ <title>ClashJS | AI Javascript Battle Game</title>
+ <link rel='stylesheet' href='styles.css'>
</head>
<body>
<div id='root'>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -6,7 +6,7 @@ var DIRECTIONS = ['north', 'east', 'south', 'west'];
class ClashJS {
constructor(playerDefinitionArray, evtCallback) {
this._gameEnvironment = {
- gridSize: 13,
+ gridSize: 11,
ammoPosition: []
};
@@ -14,8 +14,6 @@ var ClashJS = require('../clashjs/ClashCore.js');
var playerObjects = require('../Players.js');
var playerArray = _.shuffle(_.map(playerObjects, el => el));
-const shootLifeSpan = 10 * 1000;
-
var Clash = React.createClass({
mixins: [
deepSetState
@@ -26,19 +24,51 @@ var Clash = React.createClass({
return {
clashjs: this.ClashJS.getState(),
shoots: [],
- speed: 200
+ speed: 150,
+ winners: playerArray.map(() => 0)
};
},
componentDidMount() {
this.nextTurn();
},
+ newGame() {
+ this.ClashJS.getState().playerStates.forEach((player, index) => {
+ if (player.isAlive) {
+ let newWinners = this.state.winners;
+ newWinners[index]++;
+
+ this.setState({
+ winners: newWinners
+ });
+ }
+ });
+
+ window.setTimeout(() => {
+ this.ClashJS = new ClashJS(playerArray, this.handleEvent);
+ this.setState({
+ clashjs: this.ClashJS.getState(),
+ shoots: [],
+ speed: 150
+ }, this.nextTurn);
+ }, 1000);
+ },
+
nextTurn() {
+ var alivePlayerCount = this.ClashJS.getState().playerStates.reduce((result, el) => {
+ return el.isAlive ? (result + 1) : result;
+ }, 0);
+
+ if (alivePlayerCount < 2) {
+ this.newGame();
+ return;
+ }
+
window.setTimeout(() => {
this.setState({
clashjs: this.ClashJS.nextPly(),
- speed: this.state.speed > 50 ? this.state.speed - 1 : 50
+ speed: this.state.speed > 15 ? parseInt(this.state.speed * 0.98, 10) : 15
}, this.nextTurn);
}, this.state.speed);
},
@@ -47,8 +77,7 @@ var Clash = React.createClass({
console.warn(evt, data, this.state.shoots);
if (evt === 'SHOOT') {
- let currentTime = new Date().getTime();
- let newShoots = this.state.shoots.slice();
+ let newShoots = this.state.shoots;
newShoots.push({
direction: data.direction,
@@ -57,9 +86,7 @@ var Clash = React.createClass({
});
this.setState({
- shoots: newShoots.filter((el) => {
- return el.time + shootLifeSpan > currentTime;
- })
+ shoots: newShoots
});
}
},
@@ -72,7 +99,7 @@ var Clash = React.createClass({
},
render() {
- var {clashjs, shoots} = this.state;
+ var {clashjs, shoots, winners} = this.state;
var {gameEnvironment, playerStates, playerInstances} = clashjs;
return (
@@ -92,7 +119,8 @@ var Clash = React.createClass({
<Stats
playerInstances={playerInstances}
- playerStates={playerStates} />
+ playerStates={playerStates}
+ winners={winners} />
</div>
);
@@ -5,11 +5,12 @@ var Stats = React.createClass({
propTypes: {
playerInstances: React.PropTypes.array.isRequired,
- playerStates: React.PropTypes.array.isRequired
+ playerStates: React.PropTypes.array.isRequired,
+ winners: React.PropTypes.array.isRequired
},
render() {
- var {playerInstances, playerStates} = this.props;
+ var {playerInstances, playerStates, winners} = this.props;
return (
<div className='stats'>
@@ -24,7 +25,7 @@ var Stats = React.createClass({
}}>
{playerInfo.name}
{' '}
- <b>{playerState.ammo}</b>
+ <b>{winners[index]}</b>
</div>
);
})}
View
@@ -9,6 +9,10 @@ var safeRandomMove = () => {
return Math.random() > 0.33 ? 'move' : DIRECTIONS[Math.floor(Math.random() * DIRECTIONS.length)];
};
+var turn = (currentPosition, howMuchTurn) => {
+ var currentPositionIndex = DIRECTIONS.indexOf(currentPosition);
+ return DIRECTIONS[(currentPositionIndex + howMuchTurn) % 4];
+};
var getDirection = (start, end) => {
var diffVertical = Math.abs(start[0] - end[0]);
@@ -57,5 +61,6 @@ module.exports = {
isVisible,
canKill,
safeRandomMove,
- fastGetDirection
+ fastGetDirection,
+ turn
};
@@ -11,6 +11,7 @@ var HITLER = {
if (utils.canKill(playerState, enemiesStates) && playerState.ammo) {
return 'shoot';
}
+
if (gameEnvironment.ammoPosition.length) {
directionToAmmo = utils.getDirection(playerState.position, gameEnvironment.ammoPosition[0]);
@@ -8,6 +8,8 @@ var javierbyte = {
ai: (playerState, enemiesState, gameEnvironment) => {
var directionToAmmo;
+ if (Math.random() > 0.9) return 'shoot';
+
if (gameEnvironment.ammoPosition.length) {
directionToAmmo = utils.getDirection(
playerState.position,
Oops, something went wrong.

0 comments on commit c9dad2f

Please sign in to comment.