hakatashi/robot.html

## robot.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Robot Fight</title>
		<script src="/socket.io/socket.io.js"></script>
		<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
		<style>
			.field {
				width: 500px;
				height: 500px;
				margin: 50px auto;
				background: #ddd;
				position: relative;
			}

			.robot {
				position: absolute;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
				border-bottom: 40px solid red;
			}

			.robot.self {
				border-bottom-color: blue;
			}
		</style>
		<script>
			$(() => {
				const socket = io();

				const width = 500;
				const height = 500;
				const speed = 5;

				const moves = {
					37: {x: -1, y: 0},
					38: {x: 0, y: -1},
					39: {x: 1, y: 0},
					40: {x: 0, y: 1},
				};

				const pressedKeys = new Map();

				const createRobot = (id, x, y, direction) => {
					$('.field').append($('<div/>', {
						'class': 'robot',
						attr: {
							'data-id': id,
						},
					}));
					moveTo(id, x, y, direction);
				};

				const destroyRobot = (id) => {
					$(`.robot[data-id="${id}"]`).remove();
				};

				let x = Math.random() * width;
				let y = Math.random() * height;
				let direction = Math.floor(Math.random() * 4);
				const selfID = Math.floor(Math.random() * 1000000);

				const moveTo = (id, x, y, direction) => {
					const rotation = (direction - 1) * 90;
					$(`.robot[data-id="${id}"]`).css({
						transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%)) rotate(${rotation }deg)`,
					});
				};

				$('.robot.self').attr('data-id', selfID);
				moveTo(selfID, x, y, direction);

				// キー情報の記録
				$(window).keydown((event) => {
					pressedKeys.set(event.which, true);
				});
				$(window).keyup((event) => {
					pressedKeys.set(event.which, false);
				});

				// 移動する
				setInterval(() => {
					[37, 38, 39, 40].forEach((keycode) => {
						if (pressedKeys.get(keycode)) {
							const move = moves[keycode];
							x += move.x * speed;
							y += move.y * speed;
							x = Math.max(0, Math.min(x, width));
							y = Math.max(0, Math.min(y, height));
							direction = keycode - 37;
							moveTo(selfID, x, y, direction);
						}
					});
				}, 20);

				// 位置データを送信する
				setInterval(() => {
					// 何か書く
				}, 100);

				// 位置情報を受け取って更新する
				socket.on('何か書く', (data) => {
					// 何か書く
				});

				// ロボットが増えたら何かする
				socket.on('何か書く', (data) => {
					// 何か書く
				});
			});
		</script>
	</head>
	<body>
		<div class="field">
			<div class="robot self" direction="1"></div>
		</div>
	</body>
</html>

## robot.js
const fs = require('fs');
const http = require('http');
const socketIO = require('socket.io');

const app = http.createServer((req, res) => {
	const stat = fs.statSync('robot.html');
	res.writeHead(200, {
        'Content-Type': 'text/html',
        'Content-Length': stat.size,
    });
	fs.createReadStream('robot.html').pipe(res);
});

const currentRobotIDs = [];

const io = socketIO(app);

io.on('connection', (socket) => {
	// 何か書く

	// 現在の位置が更新されたら
	socket.on('何か書く', (data) => {
		// io.emit('何か書く', 何か書く);
	});
});

app.listen(8080, () => {
	console.log('Listening localhost:8080...');
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Robot Fight</title>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<style>
	.field {
	width: 500px;
	height: 500px;
	margin: 50px auto;
	background: #ddd;
	position: relative;
	}

	.robot {
	position: absolute;
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	border-bottom: 40px solid red;
	}

	.robot.self {
	border-bottom-color: blue;
	}
	</style>
	<script>
	$(() => {
	const socket = io();

	const width = 500;
	const height = 500;
	const speed = 5;

	const moves = {
	37: {x: -1, y: 0},
	38: {x: 0, y: -1},
	39: {x: 1, y: 0},
	40: {x: 0, y: 1},
	};

	const pressedKeys = new Map();

	const createRobot = (id, x, y, direction) => {
	$('.field').append($('<div/>', {
	'class': 'robot',
	attr: {
	'data-id': id,
	},
	}));
	moveTo(id, x, y, direction);
	};

	const destroyRobot = (id) => {
	$(`.robot[data-id="${id}"]`).remove();
	};

	let x = Math.random() * width;
	let y = Math.random() * height;
	let direction = Math.floor(Math.random() * 4);
	const selfID = Math.floor(Math.random() * 1000000);

	const moveTo = (id, x, y, direction) => {
	const rotation = (direction - 1) * 90;
	$(`.robot[data-id="${id}"]`).css({
	transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%)) rotate(${rotation }deg)`,
	});
	};

	$('.robot.self').attr('data-id', selfID);
	moveTo(selfID, x, y, direction);

	// キー情報の記録
	$(window).keydown((event) => {
	pressedKeys.set(event.which, true);
	});
	$(window).keyup((event) => {
	pressedKeys.set(event.which, false);
	});

	// 移動する
	setInterval(() => {
	[37, 38, 39, 40].forEach((keycode) => {
	if (pressedKeys.get(keycode)) {
	const move = moves[keycode];
	x += move.x * speed;
	y += move.y * speed;
	x = Math.max(0, Math.min(x, width));
	y = Math.max(0, Math.min(y, height));
	direction = keycode - 37;
	moveTo(selfID, x, y, direction);
	}
	});
	}, 20);

	// 位置データを送信する
	setInterval(() => {
	// 何か書く
	}, 100);

	// 位置情報を受け取って更新する
	socket.on('何か書く', (data) => {
	// 何か書く
	});

	// ロボットが増えたら何かする
	socket.on('何か書く', (data) => {
	// 何か書く
	});
	});
	</script>
	</head>
	<body>
	<div class="field">
	<div class="robot self" direction="1"></div>
	</div>
	</body>
	</html>
	const fs = require('fs');
	const http = require('http');
	const socketIO = require('socket.io');

	const app = http.createServer((req, res) => {
	const stat = fs.statSync('robot.html');
	res.writeHead(200, {
	'Content-Type': 'text/html',
	'Content-Length': stat.size,
	});
	fs.createReadStream('robot.html').pipe(res);
	});

	const currentRobotIDs = [];

	const io = socketIO(app);

	io.on('connection', (socket) => {
	// 何か書く

	// 現在の位置が更新されたら
	socket.on('何か書く', (data) => {
	// io.emit('何か書く', 何か書く);
	});
	});

	app.listen(8080, () => {
	console.log('Listening localhost:8080...');
	});