initial static assets
This commit is contained in:
parent
3f71a9c845
commit
3c0128b9b9
28
static/css/style.css
Normal file
28
static/css/style.css
Normal file
@ -0,0 +1,28 @@
|
||||
body {
|
||||
background-color: #333;
|
||||
color: #52bdce;
|
||||
margin:50px 0px; padding:0px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.short {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.console {
|
||||
color: #ff6;
|
||||
background-color: #222;
|
||||
border: 1px solid #52bdce;
|
||||
font-family: Courier;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #ff6;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 400px;
|
||||
margin:0px auto;
|
||||
text-align:left;
|
||||
}
|
20
static/html/index.html
Normal file
20
static/html/index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>game</title>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
|
||||
<script type="text/JavaScript" src="/static/js/jquery.js"></script>
|
||||
<script type="text/JavaScript" src="/static/js/common.js"></script>
|
||||
<script type="text/JavaScript" src="/static/js/keyboard.js"></script>
|
||||
<script type="text/JavaScript" src="/static/js/game.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="login">
|
||||
<span class="title">username: </span>
|
||||
<input class="console" type="text" value="" name ="input" id="login-input" autofocus />
|
||||
</div>
|
||||
<div id="game">
|
||||
<div id="myname"></div>
|
||||
<div class="console" id="console"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
5
static/js/common.js
Normal file
5
static/js/common.js
Normal file
@ -0,0 +1,5 @@
|
||||
function wsuri(path) {
|
||||
var loc = window.location;
|
||||
new_uri = "ws://" + loc.host + "/ws" + path;
|
||||
return new_uri;
|
||||
}
|
39
static/js/game.js
Normal file
39
static/js/game.js
Normal file
@ -0,0 +1,39 @@
|
||||
var conn;
|
||||
var me = {
|
||||
"position": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
}
|
||||
};
|
||||
|
||||
$(function() {
|
||||
$("#game").hide();
|
||||
$("#login-input").keypress(function (event) {
|
||||
if (event.which == 13) {
|
||||
me.name = $("#login-input").val();
|
||||
$("#myname").text(me.name);
|
||||
$("#game").toggle();
|
||||
$("#login").toggle();
|
||||
connect();
|
||||
document.onkeydown = handleKeys;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function connect() {
|
||||
console.log("connecting");
|
||||
conn = new WebSocket(wsuri("/game/"));
|
||||
conn.onclose = function(event) {
|
||||
console.log("closed");
|
||||
$("#console").text("connection lost");
|
||||
}
|
||||
conn.onmessage = function(event) {
|
||||
var obj = JSON.parse(event.data);
|
||||
$("#console").text(JSON.stringify(obj));
|
||||
console.log(JSON.stringify(obj));
|
||||
}
|
||||
conn.onopen = function(event) {
|
||||
console.log("got open event");
|
||||
conn.send(me.name);
|
||||
}
|
||||
};
|
38
static/js/keyboard.js
Normal file
38
static/js/keyboard.js
Normal file
@ -0,0 +1,38 @@
|
||||
function handleKeys(event) {
|
||||
var keyCode;
|
||||
if(event == null){
|
||||
keyCode = window.event.keyCode;
|
||||
}
|
||||
else{
|
||||
keyCode = event.keyCode;
|
||||
}
|
||||
|
||||
// up
|
||||
if (keyCode == 38 || keyCode == 87 || keyCode == 75) {
|
||||
console.log("up");
|
||||
me.position.y += 1;
|
||||
conn.send(JSON.stringify(me.position));
|
||||
}
|
||||
// down
|
||||
else if(keyCode == 40 || keyCode == 83 || keyCode == 74) {
|
||||
console.log("down");
|
||||
me.position.y -= 1;
|
||||
conn.send(JSON.stringify(me.position));
|
||||
}
|
||||
// right
|
||||
else if(keyCode == 39 || keyCode == 68 || keyCode == 76) {
|
||||
console.log("right");
|
||||
me.position.x += 1;
|
||||
conn.send(JSON.stringify(me.position));
|
||||
}
|
||||
// left
|
||||
else if(keyCode == 37 || keyCode == 65 || keyCode == 72) {
|
||||
console.log("left");
|
||||
me.position.x -= 1;
|
||||
conn.send(JSON.stringify(me.position));
|
||||
}
|
||||
|
||||
else if( keyCode == 27) {
|
||||
console.log("escape");
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user