Game Of Life im Browser

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Game Of Life im Browser

    UPDATE: Split von diesem Thema: Spiel des Lebens (Game of Life)

    Hallo liebes Foum,

    als erstes muss ich mal kurz sagen, dass ich absoluter Anfänger in Sachen Java bin.
    Ich interessiere mich sehr für das "Game of Life" von John Conway.
    Habe auch sehr viel darüber schon gelesen und nun möchte ich mal mich ein bischen daran versuchen und durch ein praktisches Beispiel üben.
    Ich erstelle ja jetzt meine (im Beispiel) -> "gal.js" und dann erstelle ich eine html mit dem Namen "index.html" und dort füge ich ich <head></head> Bereich folgendes Script ein:
    <script src="gol.js" type="text/javascript"></script>
    (damit das script gelesen wird)

    Aber wie lese ich die Funktion nun in der html aus?
    (bitte nicht lachen....)

    mfg
    tuning-in

  • Moin,

    wahrscheinlich ein bischen....aber wenn das Thread unpassend ist, dann bitte verschieben!
    Also habe ich jetzt aus den unterschiedlichen Scripten ein ".java" Datei erstellt.
    Wie kann ich mir jetzt diese Datei im Web angucken?
    (Die Fragen sind mir schon fast ein bischen Peinlich.....aber bei Google find ich auch nix gescheites, weil ich garnicht weiß, nach was ich suchen soll!)

    mfg
    tuning-in

  • Da bin ich auch schon wieder mit Fragen:
    Kann mir irgendjemand man dieses script ein bischen genau erklären, denn es ist schwer sowas zu verstehen, wenn man sich noch nie wirklich damit beschäftigt hat....!?

    Quellcode

    1. var auto = false;
    2. var showing_rules = false;
    3. var width = 50;
    4. var height = 50;
    5. var lifecycle = 1;
    6. var gen;
    7. var city;
    8. var newcity;
    9. var changed;
    11. function window_onload()
    12. {
    13. document.getElementById("textfield_width").value = width;
    14. document.getElementById("textfield_height").value = height;
    15. resetGame();
    16. }
    17. function resetGame()
    18. {
    19. auto = false;
    20. gen = 0;
    21. createModel();
    22. createBoard();
    23. nameStartStopButton();
    24. printStatus();
    25. }
    26. function nameStartStopButton()
    27. {
    28. var btn = document.getElementById("button_auto");
    29. if (auto) {
    30. btn.innerHTML = "Stop";
    31. btn.title = "Stop the automatic generation movement";
    32. } else {
    33. btn.innerHTML = "Start";
    34. btn.title = "Start automatic generation movement";
    35. }
    36. }
    37. function printStatus()
    38. {
    39. var generation = document.getElementById("generation");
    40. generation.innerHTML = gen;
    41. }
    42. function toggleGameState()
    43. {
    44. auto = !(auto);
    45. nameStartStopButton();
    46. document.getElementById("button_dim").disabled = auto;
    47. document.getElementById("textfield_width").disabled = auto;
    48. document.getElementById("textfield_height").disabled = auto;
    49. document.getElementById("button_clear").disabled = auto;
    50. document.getElementById("button_step").disabled = auto;
    51. if (auto) {
    52. step();
    53. }
    54. }
    55. function setDimension()
    56. {
    57. width = document.getElementById("textfield_width").value;
    58. height = document.getElementById("textfield_height").value;
    59. resetGame();
    60. }
    61. function oneStep()
    62. {
    63. auto = false;
    64. step();
    65. }
    66. function toggleCell(e)
    67. {
    68. var cell;
    69. try {
    70. cell = e.target; //getting the event source in Mozilla Firefox
    71. } catch (e) {
    72. cell = window.event.srcElement; //getting the event source in MSIE
    73. }
    74. if (cell.alive == "false") {
    75. cell.alive = "true";
    76. cell.style.backgroundColor = "steelblue";
    77. city[cell.x][cell.y] = true;
    78. } else {
    79. cell.alive = "false";
    80. cell.style.backgroundColor = "lightsteelblue";
    81. city[cell.x][cell.y] = false;
    82. }
    83. }
    84. function showRules()
    85. {
    86. var rules = document.getElementById("container_rules");
    87. if (showing_rules) {
    88. rules.style.display = "none";
    89. showing_rules = false;
    90. } else {
    91. rules.style.display = "block";
    92. showing_rules = true;
    93. }
    94. }
    95. function createModel()
    96. {
    97. city = new Array(width);
    98. newcity = new Array(width);
    99. changed = new Array(width);
    100. for (var x = 0; x 3))
    101. {
    102. alive_then = false;
    103. }
    104. else if ((!alive_now) && (number_neighbors == 3))
    105. {
    106. alive_then = true;
    107. }
    108. else if ((alive_now) && ((number_neighbors == 2) || (number_neighbors == 3)))
    109. {
    110. alive_then = true;
    111. }
    112. newcity[x][y] = alive_then;
    113. changed[x][y] = (alive_now != alive_then);
    114. }
    115. }
    116. updateCity();
    117. }
    118. function updateCity()
    119. {
    120. for (var x = 0; x = 0) && (x = 0) && (y
    Alles anzeigen


    nur ein kleines bischen!?

    mfg
    tuning-in

  • Also wie das Spiel funktioniert und welche Regeln es hat, dass hab ich mir schon durchgelesen.
    Ich wollte nun mal mein eigenes "game of life" erstellen und da ich nicht wirklich viel Ahnung von Javascript habe, wird das wahrscheinlich ein Problem...
    Ich hab die Datei mal im Anhang gepackt (als .txt weil man .html dateien nicht hochladen kann...)!
    1) Als erstes möchte ich, dass man nicht einstellen kann wieviele Felder man sehen möchte, sondern das eine Fläche von 50x50 Felder vorgegeben wird.
    2) als nächstes möchte ich alle unnötigen Funktionen wie zum Beispiel -> "STEP" und "RULES" raushaben und die auch im Code, damit der Code abgespeckter wird!

    Danke schon im voraus!
    mfg
    tuning-in
    Dateien

    • index.txt

      (7,86 kB, 621 mal heruntergeladen, zuletzt: )

  • ich verstehe deine Motivation für dieses Projekt noch nicht. Willst du an dem Beispiel JavaScript lernen? Bzw. was erwartest du von uns? Sollen wir dir an dem Beispiel JavaScript erklären?

    Für 1 musst du ja nichtmal JavaScript können, sondern nur den entsprechenden HTML Code löschen.
    Bei 2 verstehe ich nicht wie Game of Life ohne Regeln funktionieren soll.

  • jo, ich will an diesem Beispiel Javascript lernen.

    zu 1) ich habe das Script gelöscht, aber auf einmal war alles weg!
    -> Es sieht so aus, als wären die miteinander verkuppelt...
    zu 2) Mein "Game of Life" soll nur folgende Funktionen enthalten:
    - Start
    - Stop
    - Reset

    Mehr brauch man nicht um eine "Game of Life" zu erstellen!

  • Hab mich jetzt mal wieder ausgiebig damit beschäftigt und hab endlich mal einen Erfolg zu verbuchen.
    Hab schon bischen das Script kürzen können.
    Die ganze Einstellgrößen und sowas konnte ich jetzt schon rausnehmen.
    Das Script liegt als .txt Format im Anhang.
    Kann mir mal jetzt noch jemand sagen, welche Funktionen unnütz sind in der Datei?

    mfg
    tuning-in
    Dateien

    • gol.txt

      (5,68 kB, 725 mal heruntergeladen, zuletzt: )

  • Bevor du dich zu Tode fragst arbeite doch mal diese Beiden Tutorials/Workshops von W3Schools durch. Sie sind einfach zu verstehen bringen einem aber vieles bei. Quiz ist auch dabei.
    Das war positiv gemeint, nicht falschverstehen ;)
    w3schools.com/js/default.asp
    HTML und CSS kannst du schon, oder? Wenn nicht, sind diese Workshops da gelich mitverlinkt. Außerdem würde ich pers. jQuery benutzen. Ist eine Library (Framework etc.) die einem JS deutlich einfacher macht. Aber um jQuery zu können lern erstmal den Workshop
    zu JS,
    Flacx

    P.S: Der jQuery Workshop: w3schools.com/jquery/default.asp
    Debuggers don't remove bugs, they only show them in slow-motion