Ein Projekt das es ermöglicht Beerpong über das Internet von zwei unabhängigen positionen aus zu spielen. Entstehung im Rahmen einer Praktikumsaufgabe im Fach Interaktion.
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.

app.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. var socket = new WebSocket('ws://localhost:2667');
  2. var events = {
  3. outgoing: {
  4. JOIN_GAME: 'csJoinGame',
  5. MARK: 'csMark',
  6. QUIT: 'csQuit'
  7. },
  8. incoming: {
  9. JOIN_GAME: 'scJoinGame',
  10. MARK: 'scMark',
  11. SET_TURN: 'scSetTurn',
  12. OPPONENT_READY: 'scOpponentReady',
  13. GAME_OVER: 'scGameOver',
  14. ERROR: 'scError',
  15. QUIT: 'scQuit'
  16. }
  17. };
  18. // container creates the startBtn
  19. var container = document.querySelector('#gameBoard');
  20. var startBtn = document.querySelector('#startBtn');
  21. var nameInput = document.querySelector('#nickname');
  22. var scoreBoard = [
  23. document.querySelector('#p1Score'),
  24. document.querySelector('#p2Score')
  25. ];
  26. var hero = {};
  27. var board = new Board(scoreBoard);
  28. // disable startBtn and nameInput before website finished loading
  29. startBtn.setAttribute('disabled', true);
  30. nameInput.setAttribute('disabled', true);
  31. nameInput.setAttribute('placeholder', 'Loading...');
  32. /**
  33. *
  34. * @param action
  35. * @param data
  36. * @returns {*}
  37. */
  38. function makeMessage(action, data){
  39. var resp = {
  40. action: action,
  41. data: data
  42. };
  43. return JSON.stringify(resp);
  44. }
  45. /**
  46. *
  47. * @param cupId
  48. */
  49. board.onMark = function(cupId){
  50. socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cupId: cupId}));
  51. };
  52. /**
  53. *
  54. */
  55. function start() {
  56. while (container.lastChild) {
  57. container.removeChild(container.lastChild);
  58. }
  59. if (board.players.length === 1) {
  60. scoreBoard[1].textContent = 'waiting...';
  61. }
  62. }
  63. // if startBtn is pressed
  64. startBtn.addEventListener('click', function(event) {
  65. var name = nameInput.value.trim();
  66. if (name.length > 0) {
  67. hero.name = name;
  68. socket.send(makeMessage(events.outgoing.JOIN_GAME, name));
  69. }
  70. });
  71. socket.onmessage = function(event){
  72. var msg = JSON.parse(event.data);
  73. switch (msg.action) {
  74. case events.incoming.ERROR:
  75. alert('Errorrr: ' + msg.data);
  76. break;
  77. case events.incoming.JOIN_GAME:
  78. board.addPlayer(msg.data);
  79. if (msg.data.name === hero.name) {
  80. hero = msg.data;
  81. start();
  82. }
  83. break;
  84. case events.incoming.SET_TURN:
  85. // change Scoreboard
  86. board.highlightScoreboard(msg.data.id);
  87. board.ready = true;
  88. if (msg.data.id === hero.id) {
  89. // remove opponent cups
  90. board.enableTurn();
  91. }
  92. break;
  93. case events.incoming.MARK:
  94. board.doMark(msg.data.cupId, msg.data.player.label);
  95. break;
  96. case events.incoming.GAME_OVER:
  97. if (msg.data.player) {
  98. board.doWinner(msg.data.pos);
  99. } else {
  100. board.doDraw();
  101. }
  102. socket.send(makeMessage(events.outgoing.QUIT, hero.id));
  103. break;
  104. case events.incoming.QUIT:
  105. // close
  106. socket.close();
  107. break;
  108. }
  109. };
  110. // if socket is open, show startBtn and nameInput
  111. socket.onopen = function(event) {
  112. startBtn.removeAttribute('disabled');
  113. nameInput.removeAttribute('disabled');
  114. nameInput.removeAttribute('placeholder');
  115. nameInput.focus();
  116. };