Punktezählen von Brett- oder Kartenspiel mit jQuery und HTML

Es ist Sonntagnachmittag, die Familie kommt zusammen und das gemeinsame Kartenspiel beginnt. Die erste Frage lautet dabei immer, wer schreibt die Punkte auf? Wie immer gibt es keine Freiwilligen und am Ende muss der Onkel wieder mit Stift und Papier ausgerüstet die Zahlen jonglieren. Einen Laptop mit Excel will auch Keiner beim gemeinsamen Spielen am Tisch haben und mit dem Smartphone macht das Tabellenprogramm auch keinen Spaß. Somit bleibt Stift und Papier und vielleicht noch der Taschenrechner, aber muss das so sein? Alles wird digitaler, warum sollte man sich nicht auch beim Kartenspielen ein wenig Luxus gönnen? Heute wollen wir allen geplagten Punkte-Zusammenzählern etwas Gutes tun und an dem Projekt „SCORECOUNT“ arbeiten.

Neben dem Projekt gibt es eine Premiere auf dem ArtsBlog. Das ganze Unterfangen soll ein Community-Projekt werden. Hier seid ihr gefragt, mit euren Ideen, Vorschlägen, Erweiterungen und Lösungen. Schreibt mir via Mail (info@theartsblog.de) oder nutzt die Kommentarfunktion. Beiträge in der Kategorie „Community“ sind freigeschaltet für Kommentare. Die Kommentarfunktion bleibt in den anderen Beiträgen weiter deaktiviert, aufgrund des Moderations-Aufwand.

Eure Arbeit soll gesehen werden! Vorschläge & Lösungen werden übernommen und in Beiträgen zum Thema vorgestellt. Dabei werdet ihr natürlich erwähnt, sofern ihr das wollt. Alles kann, Nichts muss. Community-Projekte sollen Spaß machen und euer Können unter Beweis stellen! Community-Projekte sind Open Source und werden niemals auf dem ArtsBlog zu Geld gemacht!

Kommentare, die Andere diskriminieren, Werbung oder Spam enthalten werden gelöscht! Der ArtsBlog setzt hierfür moderne Tools ein, aber eine hundertprozentige Lösung gibt es nicht. Sollte dir etwas auffallen, melde dich bitte via Mail (info@theartsblog.de). Alle Informationen zum Thema Datenschutz findest du in der Datenschutzerklärung.

SCORECOUNT

01. Die Anforderungen

Ein Projekt beginnt immer mit einem Problem, das es zu lösen gilt. Unser Problem ist es, dass sich Spieler von Gemeinschaftsspielen weniger um Bürokratie kümmern sollen und das nervige Zusammenzählen von Punkten mit Stift und Papier entfallen soll.

Dafür ist es nötig, Spieler anlegen zu können und für jede Spielrunde Punkte eintragen zu können. Außerdem sollte der Name des jeweiligen Spielers eingetragen werden können, um einfach zuordnen zu können, wer die Punkte bekommt. Des Weiteren wollen wir die Runden des Spiels nicht limitiert und eine dynamische Rundenzahl ermöglichen. Datenschutz wird auf dem ArtsBlog großgeschrieben, daher wollen wir keine Daten speichern.

Damit kein Laptop am Tisch stehen muss, soll das Projekt für die Nutzung auf Smartphones oder Tablets ausgelegt sein. Als CSS Framework benutzen wir Bootstrap 5.2 und für die Funktion jQuery 3.6. Wir arbeiten mit Zahlen, damit kann man viel machen, wir wollen den Durchschnitt an Punkten errechnen, den jeder Spieler pro Runde erreicht.

Zusammengefasst:

  • Mehrere Spieler
  • Spielernamen
  • Punkte eintragen je Runde
  • Punkte zusammenzählen je Spieler
  • Punkte durchschnitt errechnen
  • Dynamische Rundenzahl
  • Nutzung auf Smartphone oder Tablet
  • Bootstrap 5.2 & jQuery 3.6
  • Datenschutzfreundlich

02. Basis-Skript

All die vorher genannten Anforderungen erfüllt das Basis-Skript schon. Mit diesem wollen wir arbeiten und im nächsten Abschnitt möchte ich euch noch ein paar Ideen auf dem Weg geben, wie das Projekt erweitert werden könnte. Ich möchte auf die Funktionsweise des Skripts hier gar nicht groß eingehen, schaut euch den Code an und probiert aus, wie das Projekt arbeitet. Das Basis-Skript ist nicht perfekt und bietet noch viel Raum für Verbesserungen. Am Ende des Beitrags könnt ihr alle Daten herunterladen und euch selbst daran probieren.



	
    
    
    SCORECOUNT
	
    
		
	
			
	


	 
		

Über

Keine Lust mehr auf Stift & Papier? Lass dir die Punkte deines Spiels einfach für jeden Spieler zusammenzählen. Die Spielernamen können geändert werden.

SCORECOUNT

Keine Lust mehr auf Stift & Papier? Lass dir die Punkte deines Spiels einfach für jeden Spieler zusammenzählen. Trage die Anzahl der Spieler ein und lege los!

ArtsBlog

SCORECOUNT v 0.1.3

$(document).ready(function(){
	
	$(".album").hide();

	$('#go').on('click', function () {
		var players_sum = $("#players").val();
		
		if (players_sum > 12){
			var players_sum = 12;
		}

		for (i = 0; i < players_sum; i++) {

			var player_num = i + 1;
			$('#player-cards').append('
# Punkte
1
2
3
') } $(".intro").hide(); $(".album").show(); $('.card').on('input', function () { // Counter var scorecount = 0; $('input', this).each(function () { var get_input_value = $(this).val(); if ($.isNumeric(get_input_value)) { scorecount += parseFloat(get_input_value); } }); var input_filled = $('table :input', this).filter((i, el) => el.value.trim() !== '').filter((i, el) => el.value.trim() !== '-').length; var score_average = scorecount / input_filled; var score_average = Math.round(score_average); $('#total', this).html(' ' + scorecount); $('#average', this).html(' ' + score_average); // New round if( $('table tr:last input' ,this).val().length !== 0 ) { var nextround = parseFloat($('table tr:last td.rounds' ,this).text()) + 1; $('table tr:last' ,this).after('' + nextround + ''); var rowpos = $('table tr:last' ,this).position(); $('.card-body' ,this).scrollTop(rowpos.top); } }); }); }); // Notification Modal $(function () { var modal_template_01 = '
'; var modal_template_02 = 'Titel'; var modal_template_03 = '

'; var modal_template_04 = 'Text'; var modal_template_05 = '

'; // Clean input $("#restart").on('click', function() { var modal_template_02 = 'Achtung!'; var modal_template_04 = 'Möchten Sie die Eingaben wirklich Löschen?'; var modal_template_07 = 'clean-form'; $('#notify').html(modal_template_01 + modal_template_02 + modal_template_03 + modal_template_04 + modal_template_05 + modal_template_06 + modal_template_07 + modal_template_08 + modal_template_09 + modal_template_10 + modal_template_11 + modal_template_12); $("#modal").modal("show"); $("#clean-form").on('click', function() { location.reload(true); }); }); });

03. So könnte es weiter gehen

Community-Projekte leben von der Community, daher kann hier noch viel passieren und an Dinge gedacht werden, die am Anfang gar nicht auf der Agenda standen. Fühlt euch frei und schreibt mir eure Ideen oder vielleicht sogar schon fertige Lösungen. Ich möchte euch hier auch keine Vorgaben machen, sondern nur Gedanken liefern, was möglich wäre. Ich freue mich sehr, mit euch das Projekt zu gestalten und endlich mehr mit der Community in Kontakt treten zu können. Grüße euer Andreas

Mögliche Funktionen:

  • Reihenfolge der Spieler je nach Punktestand
  • Spieler markieren, der gerade am Gewinnen ist
  • Export der Spielergebnisse oder Screenshot
  • Spieler „Card“ mit unterschiedlichen Farben
  • Animationen
  • freundlicheres Design

04. Download

Ich habe hier nochmal alle Files zusammengestellt, damit das Einrichten nochmal etwas schneller von der Hand geht. Ich hoffe, ihr habt genauso viel Spaß mit dem Projekt wie ich und jetzt wünsche ich euch gutes Gelingen.

zip-file-icon

artsblog-projekt-scorecount-master

Filesize: 1,7 mb
Related Posts