Skip to content

Instantly share code, notes, and snippets.

@hakatashi hakatashi/robot.html
Created Nov 16, 2016

Embed
What would you like to do?
TSG 第12回Web分科会 演習
<!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...');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.