diff options
| author | jak1 <mike.wollmann@gmail.com> | 2021-07-20 21:44:22 +0200 |
|---|---|---|
| committer | jak1 <mike.wollmann@gmail.com> | 2021-07-20 21:44:22 +0200 |
| commit | 83cf72b77de5c62f7a355766165d68e513eaaf2e (patch) | |
| tree | 46bb1f5471d646ea309be905976043cff0235269 /client/index.html | |
| download | thepixelworld-83cf72b77de5c62f7a355766165d68e513eaaf2e.tar.gz thepixelworld-83cf72b77de5c62f7a355766165d68e513eaaf2e.tar.bz2 thepixelworld-83cf72b77de5c62f7a355766165d68e513eaaf2e.tar.xz thepixelworld-83cf72b77de5c62f7a355766165d68e513eaaf2e.zip | |
init game repo (basic)
Diffstat (limited to 'client/index.html')
| -rw-r--r-- | client/index.html | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..666c078 --- /dev/null +++ b/client/index.html @@ -0,0 +1,134 @@ +<!DOCTYPE html> +<html lang="en_US"> + <meta charset="UTF-8"> + + <!-- Login --> + <div id="signDiv"> + Username: <input id="signDiv-username" type="text"></input><br> + Password: <input id="signDiv-password" type="password"></input><br> + <button id="signDiv-signIn">Sign In</button> + <button id="signDiv-signUp">Sign Up</button> + </div> + + <!-- Game --> + <div id="gameDiv" style="display:none;"> + <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas> + <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"> <!--https://www.sitepoint.com/community/t/auto-scrolling-a-div-with-overflow-scroll-auto/2291--></div> + <form id="chat-form"> + <input id="chat-input" type="text" style="width:500px;"></input> + </form> + </div> + + <!-- loading socket.io library --> + <script src="https://cdn.socket.io/4.1.3/socket.io.js"></script> + + <script> + var socket = io(); + // Login + var signDiv = document.getElementById("signDiv"); + var signDivUsername = document.getElementById("signDiv-username"); + var signDivPassword = document.getElementById("signDiv-password"); + var signDivSignIn = document.getElementById("signDiv-signIn"); + var signDivSignUp = document.getElementById("signDiv-signUp"); + + signDivSignIn.onclick = function(){ + socket.emit('signIn', {username:signDivUsername.value, password:signDivPassword.value}) + } + + signDivSignUp.onclick = function(){ + socket.emit('signUp', {username:signDivUsername.value, password:signDivPassword.value}) + } + socket.on('signInResponse', function(data){ + if(data.success){ + signDiv.style.display = 'none'; + gameDiv.style.display = 'inline-block'; + } + else + alert("Sign in unsuccessful."); + }); + socket.on('signUpResponse', function(data){ + if(data.success){ + alert("Sign up successful."); + } + else + alert("Sign up unsuccessful."); + }); + + // Chat + var chatText = document.getElementById("chat-text"); + var chatInput = document.getElementById("chat-input"); + var chatForm = document.getElementById("chat-form"); + + socket.on('addToChat', function(data){ + chatText.innerHTML += "<div>" + data + "</div>"; + }); + socket.on('evalAnswer', function(data){ + console.log(data); + }); + + // Game + var ctx = document.getElementById("ctx").getContext("2d"); + ctx.font = '30px Arial'; + + socket.on('newPositions', function(data){ + ctx.clearRect(0,0,500,500); + for(var i =0; i < data.player.length; i++){ + ctx.fillStyle="rgba(55,55,55,0.8)"; + ctx.fillText(''+ data.player[i].number,data.player[i].x, data.player[i].y); + } + for(var i =0; i < data.bullet.length; i++){ + ctx.fillStyle="rgba(55,55,55,0.8)"; + ctx.fillRect(data.bullet[i].x-5, data.bullet[i].y-5, 10, 10); + } + }); + + + chatForm.onsubmit = function(e){ + e.preventDefault(); + if (chatInput.value[0] === "/") + socket.emit("evalServer", chatInput.value.slice(1)); + else + socket.emit("sendMsgToServer", chatInput.value); + chatInput.value = ""; + } + + document.onkeydown = function(event){ + //console.log(event.keyCode); + if(event.keyCode === 68 || event.keyCode === 39) // d + socket.emit('keyPress',{inputId: 'right', state: true}); + else if(event.keyCode === 65 || event.keyCode === 37) // a + socket.emit('keyPress',{inputId: 'left', state: true}); + else if(event.keyCode === 83 || event.keyCode === 40) // s + socket.emit('keyPress',{inputId: 'down', state: true}); + else if(event.keyCode === 87 || event.keyCode === 38) // w + socket.emit('keyPress',{inputId: 'up', state: true}); + } + + document.onkeyup = function(event){ + if(event.keyCode === 68 || event.keyCode === 39) // d + socket.emit('keyPress',{inputId: 'right', state: false}); + else if(event.keyCode === 65 || event.keyCode === 37) // a + socket.emit('keyPress',{inputId: 'left', state: false}); + else if(event.keyCode === 83 || event.keyCode === 40) // s + socket.emit('keyPress',{inputId: 'down', state: false}); + else if(event.keyCode === 87 || event.keyCode === 38) // w + socket.emit('keyPress',{inputId: 'up', state: false}); + } + + document.onmousedown = function(event){ + socket.emit('keyPress',{inputId: 'attack', state: true}); + } + + document.onmouseup = function(event){ + socket.emit('keyPress',{inputId: 'attack', state: false}); + } + + document.onmousemove = function(event){ + var x = -250 + event.clientX - 8; + var y = -250 + event.clientY - 8; + var angle = Math.atan2(y, x) / Math.PI * 180; + socket.emit('keyPress',{inputId: 'mouseAngle', state: angle}); + } + + </script> +</html>
\ No newline at end of file |