├── images
    ├── player.png
    ├── player
    │   ├── black.png
    │   ├── blue.png
    │   ├── green.png
    │   ├── pink.png
    │   ├── red.png
    │   ├── white.png
    │   ├── orange.png
    │   └── yellow.png
    └── player-2015-02-26.zip
├── README.md
├── package.json
├── style
    └── jogo.css
├── main.js
├── js
    ├── jogo.js
    └── player.js
└── index.html


/images/player.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # hue_game
2 | A Simple capture the flag style game using crafty and socket.io
3 | 


--------------------------------------------------------------------------------
/images/player/black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/black.png


--------------------------------------------------------------------------------
/images/player/blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/blue.png


--------------------------------------------------------------------------------
/images/player/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/green.png


--------------------------------------------------------------------------------
/images/player/pink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/pink.png


--------------------------------------------------------------------------------
/images/player/red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/red.png


--------------------------------------------------------------------------------
/images/player/white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/white.png


--------------------------------------------------------------------------------
/images/player/orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/orange.png


--------------------------------------------------------------------------------
/images/player/yellow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player/yellow.png


--------------------------------------------------------------------------------
/images/player-2015-02-26.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pt-br/hue_game/master/images/player-2015-02-26.zip


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hue-game",
 3 |   "version": "0.0.1",
 4 |   "description": "my first socket.io game",
 5 |   "dependencies": {
 6 |     "express": "^4.10.2",
 7 |     "socket.io": "^1.3.4"
 8 |   },
 9 |   "scripts": {
10 |     "start": "node main.js"
11 |   }
12 | }


--------------------------------------------------------------------------------
/style/jogo.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body, html {
 3 | 	overflow: hidden;
 4 | }
 5 | 
 6 | form#login {
 7 | 	position: fixed;
 8 | 	background-color: white;
 9 | 	z-index: 2;
10 | 	width: 100%;
11 | 	height: 100%;
12 | }
13 | 
14 | div#field {
15 | position: relative;
16 | background-color: brown;
17 | height: 1920px;
18 | width: 1080px;
19 | }
20 | 
21 | div.player {
22 | 	position: absolute;
23 | }


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app = express();
 3 | var http = require('http').Server(app);
 4 | var io = require('socket.io')(http);
 5 | 
 6 | app.use("/style", express.static(__dirname + '/style'));
 7 | app.use("/js", express.static(__dirname + '/js'));
 8 | app.use("/images", express.static(__dirname + '/images'));
 9 | 
10 | app.get('/', function(req, res){
11 |   res.sendFile(__dirname + '/index.html');
12 | });
13 | 
14 | var players = {};
15 | 
16 | io.on('connection', function(socket){
17 |   players[socket.id] = {};
18 | 
19 |   socket.on('add player', function(player) {
20 |     io.to(socket.id).emit("populate", players);
21 |   	players[socket.id] = player;
22 |     console.log(JSON.stringify(players));
23 |     io.emit('new player', player);
24 |   	console.log(player.name+" joined the room");
25 |   })
26 | 
27 |   socket.on('disconnect', function(){
28 |     console.log(players[socket.id].name+" left the room");
29 |     io.emmit("remove user", socket.id);
30 |     delete players[socket.id]
31 |   });
32 | 
33 |   socket.on("move", function(user) {
34 |     players[user.id].position = user.position;
35 |     io.emit("move", user);
36 |   })
37 | });
38 | 
39 | var port = process.env.PORT || 3000
40 | 
41 | http.listen(port, function(){
42 |   console.log('listening on *:'+port);
43 | });


--------------------------------------------------------------------------------
/js/jogo.js:
--------------------------------------------------------------------------------
 1 | Crafty.init(1920,1080, document.getElementById("field"));
 2 | 
 3 | Crafty.sprite(64, "images/player.png", {
 4 | 	player_black: [0,0],
 5 | 	player_blue: [0,1],
 6 | 	player_green: [0,2],
 7 | 	player_orange: [0,3],
 8 | 	player_pink: [0,4],
 9 | 	player_yellow: [0,5],
10 | 	player_red: [0,6],
11 | 	player_white: [0,7]
12 | });
13 | 
14 | var players = [];
15 | var me, socket, name, color;
16 | 
17 | socket = io();
18 | 
19 | $("#start").click(function (e) {
20 | 	e.preventDefault();
21 | 	name = $("#nickname").val();
22 | 	color = $('input[name=color]:checked', '#login').val();
23 | 	if(nickname != "" && color != null && socket.connected) {
24 | 		connect();
25 | 		$("#login").remove();
26 | 	}
27 | });
28 | 
29 | function connect() {
30 | 	me = {"id": socket.id, "name": name, "color": color};
31 | 	addPlayer(me);
32 | 	socket.emit("add player", me);
33 | 	players[me.id].crafty.fourway(4)
34 | 	players[me.id].crafty.bind("Move", function(pos) {
35 | 		me.position = {x: pos._x, y: pos._y, h: pos._h, w: pos._w};
36 | 		socket.emit("move", {"id": me.id, "position": me.position});
37 |   });
38 | }
39 | 
40 | function addPlayer(player) {
41 | 	players[player.id] = new Player(player);
42 | 	players[player.id].draw();
43 | }
44 | 
45 | socket.on("new player", function(user) {
46 | 	if(user.id !== me.id)
47 | 		addPlayer(user);
48 | });
49 | 
50 | socket.on("populate", function (users) {
51 | 	for(var id in users) {
52 | 		addPlayer(users[id]);
53 | 	}
54 | })
55 | 
56 | socket.on("move", function (user) {
57 | 	if(user.id !== me.id) {
58 | 		players[user.id].crafty.attr(user.position);
59 | 	}
60 | })


--------------------------------------------------------------------------------
/js/player.js:
--------------------------------------------------------------------------------
 1 | window.Player = function(playerObject) {
 2 | 
 3 | 	this.config = playerObject;
 4 | 
 5 | 	this.draw = function() {
 6 | 		var field = $("#field")
 7 | 		// field.append("<canvas id='"+player.id+"' class='player' height='64' width='64'></canvas>");
 8 | 
 9 | 	 //  var canvas = document.getElementById(player.id);
10 | 	 //  var context = canvas.getContext('2d');
11 | 	 //  var centerX = canvas.width / 2;
12 | 	 //  var centerY = canvas.height / 2;
13 | 	 //  var radius = 30;
14 | 	 //  var eyeRadius = 5;
15 | 	 //  var eyeXOffset = 12;
16 | 	 //  var eyeYOffset = 25;
17 | 	  
18 | 	 //  // draw the yellow circle
19 | 	 //  context.beginPath();
20 | 	 //  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
21 | 	 //  context.fillStyle = player.color;
22 | 	 //  context.fill();
23 | 	 //  context.lineWidth = 2;
24 | 	 //  context.strokeStyle = 'black';
25 | 	 //  if(player.color == "#000") {
26 | 	 //  	context.strokeStyle = 'white';
27 | 	 //  }
28 | 	 //  context.stroke();
29 | 	    
30 | 	 //  // draw the eyes
31 | 	 //  context.beginPath();
32 | 	 //  var eyeX = centerX - eyeXOffset;
33 | 	 //  var eyeY = centerY - eyeXOffset;
34 | 	 //  context.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
35 | 	 //  var eyeX = centerX + eyeXOffset;
36 | 	 //  context.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
37 | 	 //  context.fillStyle = 'black';
38 | 	 //  context.fill();
39 | 	  
40 | 	 //  // draw the mouth
41 | 	 //  context.beginPath();
42 | 	 //  context.arc(centerX, centerY, 20, 0, Math.PI, false);
43 | 	 //  context.stroke();
44 | 
45 | 	 if(typeof(this.config.position) === "undefined") {
46 | 	 	this.config['position'] = {x: 0, y: 0, w: 100, h: 100};
47 | 	 }
48 | 
49 |     this["crafty"] = Crafty.e('2D, Canvas, player_'+this.config.color+', Fourway')
50 | 	  .attr(this.config.position);
51 | 
52 | 	  //this.config["position"] = this.crafty.attr();
53 | 	}
54 | 
55 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 6 |     <head>
 7 |         <meta charset="utf-8">
 8 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 |         <title>Joguinho HUE</title>
10 |         <meta name="description" content="">
11 |         <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
14 |         <link rel="stylesheet" type="text/css" href="style/jogo.css">
15 |     </head>
16 |     <body>
17 |         <form id="login">
18 |             <label for="nickname">Please enter your nickname</label>
19 |             <input type="text" name="nickname" id="nickname" />
20 |             <br/>
21 |             <label> Please pick a color </label>
22 |             <ul>
23 |                 <li>
24 |                     <input type="radio" name="color" value="yellow" />
25 |                     <img src="images/player/yellow.png">
26 |                 </li>
27 |                 <li>
28 |                     <input type="radio" name="color" value="blue" />
29 |                     <img src="images/player/blue.png">
30 |                 </li>
31 |                 <li>
32 |                     <input type="radio" name="color" value="green" />
33 |                     <img src="images/player/green.png">
34 |                 </li>
35 |                 <li>
36 |                     <input type="radio" name="color" value="red" />
37 |                     <img src="images/player/red.png">
38 |                 </li>
39 | 
40 |                 <li>
41 |                     <input type="radio" name="color" value="orange" />
42 |                     <img src="images/player/orange.png">
43 |                 </li>
44 |                 <li>
45 |                     <input type="radio" name="color" value="pink" />
46 |                     <img src="images/player/pink.png">
47 |                 </li>
48 |                 <li>
49 |                     <input type="radio" name="color" value="white" />
50 |                     <img src="images/player/white.png">
51 |                 </li>
52 |                 <li>
53 |                     <input type="radio" name="color" value="black" />
54 |                     <img src="images/player/black.png">
55 |                 </li>
56 |             </ul>
57 |             <button id="start">Start</button>
58 |         </form>
59 |         <div id="field"></div>
60 | 
61 |         <script src="/socket.io/socket.io.js"></script>
62 | 
63 |         <script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
64 |         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
65 |         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
66 | 
67 |         <script type="text/javascript" src="js/player.js"></script>
68 |         <script type="text/javascript" src="js/jogo.js"></script>
69 |     </body>
70 | </html>


--------------------------------------------------------------------------------