HP-4-Fun :: HP Tutorial Box: ET-Chat: Würfelspiel

HP Points

Pos.	Name	Punkte
	Harlekin	20043
	Tommy	5050
	Partybremen	4230
4.	Parzival	4039
5.	Fizzy Lemon	2394

Zeige mehr

V-Shop

Artikel kaufen

Version Info

Aud dieser Seite läuft:
HP-4-Fun 2.0
und der
ET-Chat-v3.0.7-r3-PHP-8-b
auf
PHP 8.4.12

Du hast in deinem Browser kein Javascript aktiviert.
Um diese Seite korrekt anzuzeigen ist Javascript jedoch zwingend nötig.
Bitte aktiviere Javascript in den Einstellungen deines Browser beziehungsweise besorge dir einen Browser, der diesen unterstützt.
Mozilla Firefox | Safari | Opera | Google Chrome | Internet Explorer höher Version 6

Tutorial: Würfelspiel

Tutorial Übersicht >>

ET-Chat

Würfelspiel
Von: Fizzy Lemon am: 27.12.2021 - 10:25	3483 x gelesen
Werbung: Ein einfaches Würfelspiel: In der chat.tpl.html einen Button hinzufügen: <div id="form_right"> <img id="link_sagen" class="img_button" src="img/Checked.png" width="32" height="32" border="0" alt="<?php echo $this->lang->sagen[0]->tagData; ?>" title="<?php echo $this->lang->sagen[0]->tagData; ?>" /> <img id="link_smileys" class="img_button" src="img/Smiley_Cool.png" width="32" height="32" border="0" alt="<?php echo $this->lang->smileys[0]->tagData; ?>" title="<?php echo $this->lang->smileys[0]->tagData; ?>" /> <img id="link_color" class="img_button" src="img/Colors.png" width="32" height="32" border="0" alt="<?php echo $this->lang->color[0]->tagData; ?>" title="<?php echo $this->lang->color[0]->tagData; ?>" /> Code `<img id="wuerfel" class="img_button" src="img/cube.png" width="32" height="32" border="0" alt="Würfel" title="Würfel" />` <img id="link_prop" class="img_button" src="img/Display.png" width="32" height="32" border="0" alt="<?php echo $this->lang->prop[0]->tagData; ?>" title="<?php echo $this->lang->prop[0]->tagData; ?>" /> <img id="link_logout" class="img_button" src="img/Delete_big.png" width="32" height="32" border="0" alt="<?php echo $this->lang->logout[0]->tagData; ?>" title="<?php echo $this->lang->logout[0]->tagData; ?>" /> </div> --- Dann die wuerfel.class.php im class-Verzeichnis komplett neu erstellen. Code hier: Code <?php class wuerfel extends DbConectionMaker { public function __construct (){ parent::__construct(); session_start(); header('Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0'); header('content-type: application/json; charset=utf-8'); $Wuerfelauge=rand(1,6); $this->dbObj->sqlSet("INSERT INTO {$this->_prefix}etchat_messages ( etchat_user_fid , etchat_text, etchat_text_css, etchat_timestamp, etchat_fid_room, etchat_privat) VALUES ( 1, '".$_POST['username']." würfelt eine ".$Wuerfelauge."', 'color:#".$_SESSION['etchat_'.$this->_prefix.'syscolor'].";font-weight:normal;font-style:normal;', ".date('U').", ".(int)$_POST['room'].", 0)", false); } } --- Anschließend in der chat.js am besten nach der Farbauswahl den Buttonaufruf ablegen: (...) // ueberwachung des Klicks auf die Farbentabelle Event.observe('farben_tab', 'click', function(event){ if(Event.element(event).id!=""){ // Farbe Hex in Dec umwandeln var rd = hex2dec(Event.element(event).id.slice(0, 2)); var gd = hex2dec(Event.element(event).id.slice(2, 4)); var bd = hex2dec(Event.element(event).id.slice(4, 6)); // Slider entsprechend der Auswahl verschieben slider_red.setValue(rd/255); slider_green.setValue(gd/255); slider_blue.setValue(bd/255); } } ); } // Ist dass Fenster bereits sichtbar? if($(self.win_color.getId()).style.display=='none'){ self.win_color.show(); self.win_color.toFront(); } else self.win_color.close(); } Code `//Würfel $("wuerfel").onclick = function(){ new Ajax.Request("./?wuerfel", { onSuccess: function(){},postBody: "username="+self.username}); } };` Jeweils das hervorgehobene beachten. Wen es stört, dass der Buttondruck nicht sofort eine Reaktion auslöst, kann auch zu diesem Kniff greifen: Man spielt mit dem Buttondruck eine MP3 ab, die ein Würfelgeräusch abspielt. Dazu muss man folgendermaßen vorgehen: In der chat.js erweitert man den Soundbuffer: // Init Sound -------- try{ window.AudioContext = window.AudioContext \|\| window.webkitAudioContext; this.soundManager=new AudioContext(); //creating a new request var a_request1 = new XMLHttpRequest(); a_request1.open("GET",'./sound/sound_privat.mp3',true); a_request1.responseType= 'arraybuffer'; a_request1.onload = function(){ //take the audio from http request and decode it in an audio buffer self.soundManager.decodeAudioData(a_request1.response, function(buffer){ self.audioBuffer.push(buffer); }); }; a_request1.send(); var a_request2 = new XMLHttpRequest(); a_request2.open("GET",'./sound/sound_all.mp3',true); a_request2.responseType= 'arraybuffer'; a_request2.onload = function(){ //take the audio from http a_request2 and decode it in an audio buffer self.soundManager.decodeAudioData(a_request2.response, function(buffer){ self.audioBuffer.push(buffer); }); }; a_request2.send(); Code `var a_request3 = new XMLHttpRequest(); a_request3.open("GET",'./sound/rolling_dice.mp3',true); a_request3.responseType= 'arraybuffer'; a_request3.onload = function(){ self.soundManager.decodeAudioData(a_request3.response, function(buffer){ self.audioBuffer.push(buffer); }); }; a_request3.send();` } catch(e){ console.log("No audio-support from browser!"); } und fügt den Würfelbutton nach danach ein: Code `//Würfel $("wuerfel").onclick = function(){ if(self.sound_status=="all"){ var audio_source = self.soundManager.createBufferSource(); audio_source.buffer = self.audioBuffer[2]; audio_source.connect(self.soundManager.destination); audio_source.start(0); } new Ajax.Request("./?wuerfel", { onSuccess: function(){},postBody: "username="+self.username}); }` Dann sollte bei Buttondruck ein Würfelgeräusch zu hören sein, vorausgesetzt, man hat die Sounds auf ALLE. Wer nur privat oder gar keine Soundausgaben möchte, hört das auch nicht. Dadurch hat der Nutzer eine direkte Reaktion und wundert sich nicht darüber, dass das Würfelergebnis erst auftaucht, wenn der Chatinhalt aktualisiert wird. Die MP3 müsst ihr euch besorgen oder selber machen.