Profil | Mitglieder | Registrieren | Start | Suche


PHP-Support.de » Programmierung » HTML, JavaScript & CSS » Browsergame    » Hallo Gast [Login | Registrieren]

Neues Thema | Antworten   

Autor Beitrag
Wolberg
Mitglied
Gruenling


Dabei seit: 21.01.2018
Herkunft: keine Angabe
Posts: 14
     Browsergame Zitat | Bearbeiten

Guten Tag,
Ich habe angefangen Medieninformatik zu studieren. Wir müssen in einem Fach ein Browsergame in Javascript programmieren und wir wollen ein Spiel erschaffen wo eine Story erklärt wird. Diese Story wird in einzelne Themen aufgeteilt und man soll verschiedene Button haben, womit man die Story selber beeinflussen kann. Zum Beispiel Tag und Nacht oder die Uhrzeit beeinflussen kann.

Soweit so gut nun stehen wir aber vor dem Problem das wir nicht genau wissen wie wir angangen sollen xD

Könntet ihr uns einen Anfang geben? Also wie so etwas aussehen könnte?

Danke schonmal im Voraus


03.01.2020, 15:50 Profil | PM | E-Mail  
Wolberg
Mitglied
Gruenling


Dabei seit: 21.01.2018
Herkunft: keine Angabe
Posts: 14
      Zitat | Bearbeiten

Guten Tag,
hat keine eine Lösung für mich? Mir würde es auch erstmal nur reichen, wenn ich ein paar links zum lesen habe.
Oder habe ich irgendetwas zu kurz beschrieben? So, dass mein Anliegen oder unsere Idee nicht ganz klar raus zu erkennen ist?


06.01.2020, 14:00 Profil | PM | E-Mail  
Htaccess
Mitglied
Sehr guter User


Dabei seit: 22.08.2010
Herkunft: Deutschland
Posts: 716
      Zitat | Bearbeiten

Guten Abend Wolberg,

es erfreut mich zu allererst, dass du angefangen hast Medieninformatik zu studieren, da im Bereich der Informatik ein immer größer werdender Fachkräftemängel besteht.

Zu deinem Problem: Ganz zum Anfang wäre es sinnvoll, sich erstmal eine Story zu überlegen und was das Ziel des Browsergames sein soll, bevor man anfängt blind links darauf los zu programmieren. Ich verstehe durchaus deinen/euren Enthusiasmus. Allerdings wird das ohne Konzept/Idee sehr schwierig.

Des weiteren besteht die Frage, wie sollt ihr in Javascript programmieren? Soll es reines Javascript sein? Darf es mit einem Javascript Framework (Angular, React, VueJS & Co.) umgesetzt werden? Dürft ihr Bibliotheken verwenden wie zum Beispiel jQuery, Hugo etc.? Wie sieht es mit einer Datenbank aus, darf eine verwendet werden? Wenn ja, welche? Das sind alles Fragen die man sich zum Anfang stellen sollte, denn ohne IST-/SOLL-Zustand kann man effektiv wenig machen.

Vielleicht kannst du uns auch hier ein paar Fragen beantworten.


Liebe Grüße
Htaccess


06.01.2020, 23:01 Profil | PM | E-Mail  
Wolberg
Mitglied
Gruenling


Dabei seit: 21.01.2018
Herkunft: keine Angabe
Posts: 14
      Zitat | Bearbeiten

Guten Abend,

vielen Dank das du dich gemeldet hast.

Ja, es gibt bereits eine Story und zwar soll ein Banküberfall (natürlich nicht ernsthaft, sondern mit ein bisschen Spaß geplant und gemacht werden. Das Ziel ist es den Überfall erfolgreich zu absolvieren, damit er zu seiner Mutter reisen kann.
Hierbei soll er in der Planungsphase entscheiden können was mitgenommen werden soll, ob vorder oder hintereingang und ob Tag oder Nacht.

Javascript Frameworks dürfen wir nicht nehmen. Allerdings dürfen wir auf jedenfall jQuery verwenden und Datenbanken wurden nicht angesprochen. Dieses müsste ich abklären, wenn es erfolderlich ist, sowie bei den Frameworks.

Liebe Grüße
Julian


08.01.2020, 18:35 Profil | PM | E-Mail  
Wolberg
Mitglied
Gruenling


Dabei seit: 21.01.2018
Herkunft: keine Angabe
Posts: 14
      Zitat | Bearbeiten

Guten Abend,
ich habe jetzt das so programmiert.

Der JS Teil:
 PHP 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:

let textElement = document.getElementById('text')
let optionButtonsElement = document.getElementById('option-buttons')

function startGame() {
    showTextNode(1)
}

function showTextNode(textNodeIndex) {
  let textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = textNode.text
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild)
  }

  textNode.options.forEach(option => {
    if (showOption(option)) {
      let button = document.createElement('button')
      button.innerText = option.text
      button.classList.add('btn')
      button.addEventListener('click', () => selectOption(option))
      optionButtonsElement.appendChild(button)
    }
  })
}

function showOption(option) {
  return option.requiredState == null
}

function selectOption(option) {
  let nextTextNodeId = option.nextText
  if (nextTextNodeId <= 0) {
    return startGame()
  }
  showTextNode(nextTextNodeId)
}

let textNodes = [
  {
    id: 1,
    text: 'Wollen Sie Wirklich eine Bank ausrauben?',
    options: [
      {
        text: 'Ja',
        nextText: 2
      },
      {
        text: 'Nein',
        nextText: 3
      }
    ]
  },
  {
    id: 2,
    text: 'You venture forth in search of answers to where you are when you come across a merchant.',
    options: [
      {
        text: 'Trade the goo for a sword',
        nextText: 3
      },
      {
        text: 'Trade the goo for a shield',
        nextText: 3
      },
      {
        text: 'Ignore the merchant',
        nextText: 3
      }
    ]
  },
  {
    id: 3,
    text: 'Sie wollen die Bank nicht ausrauben. Bitte starten Sie das Spiel erneut',
    options: [
      {
        text: 'Neustart',
        nextText: -1
      }
    ]
  }
]

startGame()


Der HTML Teil:
 PHP 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="styles.css" rel="stylesheet">
        <script defer src="game.js"></script>
        <title>Bank robbery</title>
    </head>
    <body style="background-image: url('img/background.png');">
        <div class="container">
            <div id="text">Text</div>
            <div id="option-buttons" class="btn-grid">
                <button class="btn">Option 1</button>
                <button class="btn">Option 2</button>
                <button class="btn">Option 3</button>
                <button class="btn">Option 4</button>
            </div>
        </div>
    </body>
</html>



Das Problem was ich jetzt noch habe ist, dass ich nicht genau weis wie ich dort Bilder einbauen kann. Wir haben halt verschiedene Bilder für die Storry, als erleuterung. Die Bilder ändern sich zu jeder id. Ich weis zwar wie ich Bilder in JS einbaue aber leider nicht wie ich sie in die z.B. id: 1 bekomme.

Liebe Grüße
Julian


13.01.2020, 18:24 Profil | PM | E-Mail  
Wolberg
Mitglied
Gruenling


Dabei seit: 21.01.2018
Herkunft: keine Angabe
Posts: 14
      Zitat | Bearbeiten

Guten Abend,

hat keiner eine Lösung? oder habe ich das Problem nicht genau genug erklärt?

Liebe Grüße
Julian


15.01.2020, 16:57 Profil | PM | E-Mail  
Seiten (1):  1 
PHP-Support.de » Programmierung » HTML, JavaScript & CSS » Browsergame   

Neues Thema | Antworten   


Powered by Command Board 1.0 - Beta 2.0 © 2004-08 PHP-Einfach | Impressum | Datenschutz