Multiplayer Java Script game
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

97 lines
2.3 KiB

<html>
<head>
<title>Block Battle Beta</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
canvas{
border: 1px solid black;
}
.row {
margin: 0; padding: 0;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
<canvas width="700" height="700" ID="mycanvas" tabindex="0" >Canvas tag not supported</canvas>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
$(document).ready(function()
{
var socket = io('http://localhost:3000');
io.connect();
var canvas = document.getElementById("mycanvas");
canvas.addEventListener('keydown', doKeyDown, true);
canvas.addEventListener('keyup', doKeyUp, true);
var context = canvas.getContext("2d");
var width = 700;
var height = 700;
var players = {};
var bullets = {};
socket.on("connected", function(data)
{
players = data.player;
bullets = data.bullet;
});
socket.on("update",function(data)
{
});
function doKeyUp(e)
{
socket.emit("keyDown",{"direction":e.keyCode});
}
function doKeyDown(e)
{
socket.emit("keyUp",{"direction":e.keyCode});
}
function draw()
{
context.fillStyle = "#000000";
context.fillRect(0, 0, width, height);
for(var i = 0; i< bullets.length; i++)
{
if(bullets[i] != -1)
{
context.fillStyle = "rgba(255, 0, 199, 1)"; //pink
context.fillRect(bullets[i].x, bullets[i].y, 10,10);
}
}
for(var i = 0; i< players.length; i++)
{
if(players[i] != -1)
{
context.fillStyle = "rgba(0, 45, 160, 1)"; //blue
context.fillRect(players[i].x, players[i].y, 25,25);
}
}
}
setInterval(function ()
{
draw();
}, 1000/60);
});
</script>
</body>
</html>