Billardspiel programmieren mit HTML5, CSS3, PHP und JavaScipt

Enrico Michael · 15. Dezember 2023

Ja, da war ja was, kann ich es direkt hier posten, oder gibt es da ein extra Programm mit dem ich posten muss?

Sempervivum · 15. Dezember 2023

Ja, kannst Du direkt hier posten, am besten mit Codetags: Das Menü rechts von dem kleinen Landschaftssymbol öffnen und dann </>.

Enrico Michael · 15. Dezember 2023

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="queueStyle.css">
  <title>Billard-Queue</title>
</head>
<body>

  <div class="css-oberer-queueteil"></div>

  
</body>
</html>


/* Billardqueue-Stil */


.css-oberer-queueteil {
  width: 2px;
  height: 0px;

  border-top: 150px solid rgb(61, 54, 54); 
  border-right: 1px solid transparent; 
  border-bottom: 10px solid transparent; 
  border-left: 1px solid transparent;  

}

Alles anzeigen

Enrico Michael · 15. Dezember 2023

Und hier sollte jetzt ein Farbverlauf von oben nach unten erfolgen, oben bis mitte farbe 1 und von mitte bis unten farbe 2

Enrico Michael · 15. Dezember 2023

Um es etwas verständlicher zu machen,

ich bin gerade dabei die Billardkugeln nach Farbe und Zahlen zu erstellen, in meinem funktionierenden Programm habe ich nur volle Kugeln verwendet, damit ich überhaupt einmal was testen konnte. Nun soll das ganze auch realistischer werden und ganz ehrlich, ich hätte nicht gedacht dass es dann doch so schwierig werden würde. So habe ich die Kugeln, vielleicht mit zuviel Code in css erstellt, aber das muss ja später alles noch in Canvas und js umgebastelt werden.

und da stoße ich mit den halben Kugeln wieder auf enorme Schwierigkeiten.

Sempervivum · 15. Dezember 2023

Das mit dem Farbverlauf wird hier bei Stackoverflow diskutiert:

How do you apply a gradient from outer to inner, only to borders, in CSS?

Based on the MDN documentation this doesn't seem to be explicitly supported. So I tried it as follows in the linked code pen below. I know the nested…

stackoverflow.com

Kann man so zusammen fassen, dass es keine richtig gute Lösung gibt. Besser mit SVG machen, wie früher empfohlen oder, wie Du selbst schreibst, mit Canvas.

Enrico Michael · 15. Dezember 2023

ok, dann bin ich doch nicht ganz zu blöd:-)

Ja letztendlich muss ich eh alles mit canvas machen wegen js. Da ist Canvas bestimmt die bessere Wahl.

Danke dir für deine Mühe und Hilfe

Billardspiel programmieren mit HTML5, CSS3, PHP und JavaScipt

Jetzt mitmachen!

Teilen

Tags