diff --git a/pacman/index.html b/pacman/index.html
index 0af5729..178f5ba 100644
--- a/pacman/index.html
+++ b/pacman/index.html
@@ -3,36 +3,69 @@
 <style>
 html, body, canvas {
 	height: 100%;
-	width: 100%;
- 	margin: 0;
+	width: auto;
+ 	margin: 0 auto;
  	padding: 0;
 	overflow: hidden;
+	background: black;
 }
 </style>
 <body>
-<canvas width="224px" height='288px' style="">
+<canvas width="224px" height='288px' >
 	Please get a browser with proper HTML5 support
 </canvas>
 </body>
 <script>
-"use strict";
+"use strict"
 const socket = io.connect("http://127.0.0.1:3000")
 const select = selector => document.querySelector(selector)
 const send = msg => socket.emit('ClientMessage', msg)
 
+// Creates a new image object.
+const sheet = new Image()
+
+sheet.src = "sprites.png"
+
+const players = [{
+	role: "pacman",
+	coords: {x: 0, y: 0},
+	direction: 0
+},{
+	role: "blinky",
+	coords: {x: 0, y: 0},
+	direction: 0
+},{
+	role: "pinky",
+	coords: {x: 0, y: 0},
+	direction: 0
+},{
+	role: "ghost",
+	coords: {x: 0, y: 0},
+	direction: 0
+},{
+	role: "ghost",
+	coords: {x: 0, y: 0},
+	direction: 0
+}]
+
+
 // Gets every key the user presses and sends them to the server.
 window.onkeypress = e => send(e.key)
 
-const canvas = select('canvas');
+const canvas = select('canvas')
 const context = canvas.getContext('2d')
 
-let doStuff = context.fillText("wubwubwubwub",20,20)
+let doStuff = context.drawImage(sheet, 0, 0, 224, 248, 0, 24, 224, 248)
 
 
 context.font="20px Roboto"
-socket.on("ServerMessage", data => {
-context.clearRect(0, 0, canvas.width, canvas.height)
-doStuff = context.fillText(data,20,20)
+socket.on("UpdatePlayer", data => {
+context.drawImage(sheet, 0, 0, 224, 248, 0, 24, 224, 248)
+players.forEach(x => x.coords=data)
+doStuff = context.fillText(data, 0, 0)
+
+context.fillText(data, 0, 0)
+
 })
 
 
diff --git a/pacman/server.js b/pacman/server.js
index bf4d2f4..6acb6cf 100644
--- a/pacman/server.js
+++ b/pacman/server.js
@@ -1,34 +1,40 @@
 "use strict";
-const fs = require('fs')
-const http = require('http')
-const readline = require('readline')
-const timer = require('timers')
-
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-})
-
-
-const hostname = '127.0.0.1'
-const port = 3000
-
-// Sets the server and loads the webpage.
-const server = http.createServer((req, res) => {
-  res.statusCode = 200
-  res.end(fs.readFileSync('index.html'))
-})
-
-const io = require('socket.io').listen(server)
-
-// Handles the websocket client connect.
-io.sockets.on("connection", socket => {
-  console.log("User connected: " + socket.id)
-  socket.on("ClientMessage", x => console.log(x))
-})
-
-rl.on('line', input => io.emit('ServerMessage',input))
-
-server.listen(port, hostname, () => {
-  console.log(`Server running at http://${hostname}:${port}/`)
-})
+const fs = require('fs')
+const http = require('http')
+const readline = require('readline')
+const timer = require('timers')
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+})
+
+
+const hostname = '127.0.0.1'
+const port = 3000
+
+// Sets the server and loads the webpage.
+const server = http.createServer((req, res) => {
+  res.statusCode = 201
+  res.end(fs.readFileSync('index.html'))
+})
+
+const io = require('socket.io').listen(server)
+
+// Handles the websocket client connect.
+io.sockets.on("connection", socket => {
+  console.log("User connected: " + socket.id)
+  socket.on("ClientMessage", (key, agent) => handleInput(key, agent))
+})
+
+const handleInput = (key, agent) => {
+  console.log(key)
+  io.emit('UpdatePlayer',{key, agent})
+}
+
+// Sends a message to all clients.
+rl.on('line', input =>io.emit('ServerMessage', input))
+
+server.listen(port, hostname, () => {
+  console.log(`Server running at http://${hostname}:${port}/`)
+})
