Hilft mir jemand bei der Fehlersuche in 'Snake'?

Ich habe jetzt einmal wieder ein Snake-Spiel angefangen zu programmieren. Diesmal soll es Snake-Online für mehrere Spieler werden, was der Grund dafür ist, dass ich meine alte Version noch einmal uberarbeiten musste, dass man leichter mehrere Schlangen erstellen kann und auch das ganze Spiel besser gemanagt wird.

In den Source Code könnt ihr euch auf http://christian-plugge.de/Snake-Prototyp reinlesen. Um Die Vorschau zu sehen einfach noch -Vorschau an die URL anhängen, also http://christian-plugge.de/Snake-Prototyp-Vorschau.

Das Problem ist in Zeile 98 bzw. 413 - 417:

console.log(this.game.getPixelRGBA(nextX, this.lastPos.y));

Definition:

// get pixel data of x/y
game.prototype.getPixelRGBA = function(x, y) {
	x = x || 0;
	y = y || 0;
	return this.ctx.getImageData(x, y, 1, 1).data;
};

Das soll die RGBA (Red/Green/Blue/Alpha)-Farbe von einem Pixel im Canvas auslesen. An der Stelle im Code testweise nur wenn die Schlange nach links läuft. Wenn man aber den Log in der Konsole anguckt und über eine andere Schlange läuft, wird als Farbe immer noch nur

Uint8ClampedArray(4) [0, 0, 0, 0]

also keine Farbe ausgegeben. Eine neue Schlange kann man mit der Klasse snake erstellen:

new snake({
	game: g,
	name: 'test',
	control: {
		up: 'w',
		left: 'a',
		down: 's',
		right: 'd'
	}
});

Ich vermute, dass die Farbe ausgelesen wird, bevor das Spielfeld (die Spieler) überhaupt gezeichnet wurden. Irgendwelche Vorschläge??

Gezeichnet wird das Feld übrigens mit der Funktion in Zeile 394 - 400:

// print next frame
game.prototype.nextFrame = function() {
	this.clear();
	this.player.forEach(
		snake => snake.paint(),
		snake => snake.move()
	);
};

Danke für jede Hilfe

Liebe Grüße

Win7User

Computer, JavaScript, JS, Spieleprogrammierung, JavaScript-Code, Spiele und Gaming
2 Antworten
Wie kann ich mehrere Promises mit einer Funktion 'thennen'?

Die wichtigsten Proxy-Seiten für SOCKS4 und SOCKS5 Proxies haben umgestellt und lassen die Proxies jetzt nicht mehr einfach direkt auslesen. Man muss auf einen Doenload-Link klicken, der über eine Google Drive Weiterleitung erst eine Zip-Datei herunterlädt, in der u.a. eine Textdatei mit den Proxies ist. Das hat dazu geführt, dass alle möglichen Proxy-Scraper nutzlos geworden sind, weil keiner damit umgehen kann.

Ich schreibe gerade einen neuen und habe dabei ein Problem.

Ich habe die Haupt-Seiten in ein Array gespeichert, über dass ich mit einer Funktion Iiteriere (downloadSite), die immer ein Promise zurückgibt, wenn der Download abgeschlossen ist. Dieses Promise wird (für die 'root seiten') mit der Funktion _1 für jede Seite einmal 'gethent'

const http = require('http');
const https = require('https');
const unzip = require('unzip');
const fs = require('fs');
const os = require('os');
const proxySites = [ 'link1', 'link2', 'link3', 'link4' ];


function downloadSite(SITES, i=0) {


// Promise zurückgeben
return new Promise(function(resolve, reject){

    // erste Seite herunterladen
    http.get(SITES[i], res => {

        // Zwischenspeicher für den Quellcode
        var body = '';

        // Quellcode zwischenspeichern
        res.on('data', chunk => body += chunk)

        // Ende des Quellcodes erreicht
        .on('end', () => {

            // Promise 'fullfillen' mit der URL, dem Quellcode und der nächsten Promise
            resolve({
                url: SITES[i],
                body: body,
                next: ++i < SITES.length ? downloadSite(i, SITES) : null
            })
        });
    });
})

}


// Auf den Quellcode jeder 'root-Seite' ausfühen


function _1(data) {

// links speichern
var u = [];

// RegExp um Pfad der Links zu erkennen
if(data.body) data.body.replace(/\/\d{4}\/\d{2}\/\d{2}-\d{2}-\d{2}-.+_\d{1,3}\.html/g, function(path) {

    // Link zusammensetzen und zur liste hinzufügen
    u.push(data.url.split('/search')[0] + path);
});

// doppelte Einträge löschen
u = u.filter((item, pos) => u.indexOf(item) === pos);

// [hier werden bis zu 50 Unterseiten heruntergeladen]

// nächste Promise weitergeben
return data.next;

}


// Download starten


downloadSite(proxySites)


// erste Seite analysieren

.then(_1)


// zweite Seite analysieren

.then(_1)


// dritte Seite analysieren

.then(_1)

// vierte Seite analysieren

.then(_1)

Kennt hier jemand eine Möglichkeit, die ganzen .then(_1).then(_1).then(_1)... mit einer Anweisung aufzurufen (es sind bis zu 50)?

Würde mir echt weiterhelfen.

Liebe Grüße

Win7User

Computer, Download, Technik, Mode, JavaScript, JS, Technologie, then, promise, Quellcode, promises, node.js, Spiele und Gaming
2 Antworten
Wieos öffnet sich das nicht (HTML)?

Hey,

habe ein Dropdown menü fürs Handy gemacht, aber bei mir öffnet sich das irgendwie nicht. Bin dabei einem Video gefolgt. Liegt es vlt. daran das ich unten das "Nav" ausgeblendet habe aber da auch "li und ul" drin war und ich es unten wieder brauche? Wenn ja, wie kann ich es ändern das es da bleibt aber unten wie ausgeblendet ist?

https://www.youtube.com/watch?v=FqbOu5ZRFag

HTML


<div class="site-nav">
<ul>
<li><a href="index.html"><i class="fa fa-home site-nav--icon"></i>Home</a></li>
<li><a href="Neumöbellogistik.html"><i class="fa fa-info site-nav--icon"></i>Neumöbellogistik</a></li>
<li><a href="LageruLogistik.html"><i class="fa fa-pencil site-nav--icon"></i>Lager & Logistik</a></li>
<li><a href="Werkstatt.html"><i class="fa fa-usd site-nav--icon"></i>Werkstatt</a></li>
<li><a href="Kontakte.html"><i class="fa fa-envelope site-nav--icon"></i>Kontakte</a></li>
</ul>
</div>

<div class="menu-toggle"> <div class="hamburger"></div> </div>

CSS

@media (max-width: 768px) {

nav {

display: none; width: 50px; }

}

.site-nav { position: absolute; top: 100%; right: 0%; background: black; clip-path: circle(0px at top right); overflow: hidden; transition: clip-path ease-in-out 700ms; }

.site-nav--open { clip-path: circle(250% at top right); }

.site-nav ul { margin: 0; padding: 0; list-style: none; }

.site-nav li { border-bottom: 1px solid #575766; }

.site-nav li:last-child { border-bottom: none; }

.site-nav a { color: #EBEBD3; display: block; padding: 2em 4em 2em 1.5em; text-transform: uppercase; text-decoration: none; }

.site-nav a:hover, .site-nav a:focus { background: #E4B363; color: #464655; }

.site-nav--icon { display: inline-block; font-size: 1.5em; margin-right: 1em; width: 1.1em; text-align: right; color: rgba(255,255,255,.4); }

.menu-toggle { padding: 1em; position: absolute; top: .5em; right: .5em; cursor: pointer; }

.hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; background: #484848; height: 3px; width: 1.55em; border-radius: 20px; transition: all ease-in-out 500ms; }

.hamburger::before { transform: translateY(-6px); }

.hamburger::after { transform: translateY(3px); }

.open .hamburger { transform: rotate(45deg); }

.open .hamburger::before { opacity: 0; }

.open .hamburger::after { transform: translateY(-3px) rotate(-90deg); }

@media (min-width: 768px) {

.menu-toggle { display: none; }

.site-nav { height: auto; position: relative; background: transparent; float: right; clip-path: initial; }

.site-nav li { display: inline-block; border: none; }

.site-nav a { padding: 0; margin-left: 3em; }

.site-nav a:hover, .site-nav a:focus { background: transparent; }

.site-nav--icon { display: none; }

}

JS

$('.menu-toggle').click(function() {

$('.site-nav').toggleClass('site-nav--open', 500); $(this).toggleClass('open');

})

Bitte um hilfe!

HTML, CSS, JavaScript, JS
3 Antworten
Wieso kann ich das nicht verschieben (HTML)?

Hey,

ich habe eine Frage, ich bin einem Tutorial gefolgt zum Thema Slideshow. Nun möchte ich es aber verschieben aber ich weiß nicht wie. Der Container dahinter verschiebt sich aber nicht das Bild selber, das geht nicht weg mit allem was ich versuche. Hier der Code: HTML

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="bilder/1.png" width="100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="bilder/2.png" width="100%">
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="bilder/3.png" width="100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

CSS:

* {box-sizing:border-box}
.slideshow-container {   max-width: 100%;   position: relative;   margin: auto; }


.mySlides {     display: none; }


.prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: white;   font-weight: bold;   font-size: 18px;   transition: 0.6s ease;   border-radius: 0 3px 3px 0; }


.next {   right: 0;   border-radius: 3px 0 0 3px; }


.prev:hover, .next:hover {   background-color: rgba(0,0,0,0.8); }


.numbertext {   color: #f2f2f2;   font-size: 12px;   padding: 8px 12px;   position: absolute;   top: 0; }


.dot {   cursor: pointer;   height: 15px;   width: 15px;   margin: 0 2px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;   transition: background-color 0.6s ease; }


.active, .dot:hover {   background-color: #717171; }


.fade {   -webkit-animation-name: fade;   -webkit-animation-duration: 1.5s;   animation-name: fade;   animation-duration: 1.5s; }


@-webkit-keyframes fade {   from {opacity: .4}   to {opacity: 1} }

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

JS:

	var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls function plusSlides(n) {   showSlides(slideIndex += n); }


// Thumbnail image controls function currentSlide(n) {   showSlides(slideIndex = n); }

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

Hoffe ihr findet euch da zurecht und könnt mir weiterhelfen!

Website, HTML, IT, Webseite, CSS, JavaScript, JS, html5, web-development
2 Antworten
Cookie wird nicht gelöscht?

Hallo Leute mal wieder eine Frage zum Programmieren...

Also vorweg ein paar infos:

Wenn die Seite geladen wird wird automatisch eine ID per JS der Seite zugeteilt. Diese ID wird dan unter dem ".rel" Bereich eines DIV-Elements gespeichert. Über die Funktion "pageid()"; wird diese ID abgerufen.

Da meine Seite mit Cookies Arbeitet die Bestimmen welche Seite geladen wird, wird an jedes bestimmende Cookie diese Pageid rangehängt. Somit wird das Cookie

"page" zum Cookie "page_adffei344334kd";

wenn dann eine zweite geöffnet wird heist es nicht wieder

"page" sondern dieses mal z.B. "page_eudjfiej3243";

So jetzt mein Problem ich hätte mir das So gedacht:

User öffnet Seite,

Cookies werden gesetzt,

Nutzung der Seite,

Nutzer verlässt seite,

Cookies werden zuvor gelöscht

So alle punkte bis auf das Cookies löschen habe ich hin bekommen.

Jetzt folgendes Problem wenn ich z.B.

window.onbeforeunload = function(){...}

oder window.beforeunload = function(){...}

oder $(window).on("beforeunload",function(){...}); (Jquery)

oder $(window).bind("beforeunload",function(){...}); (Jquery)

nutze wird bei den ersten zwei Versionen gar nichts gemacht (Laut google ist das ein Bug der zurzeit in Firefox vorhanden ist).

Wenn ich die 4. Nutze passiert ebenfalls nichts (bzw. es werden nur Befehle wie console.log ausgeführt aber keine document.cookie = ... befehle);

Bei Version 3 habe ich jetzt mehrere Möglichkeiten genutzt:

document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

(wobei experies einmal 0 und einmal -1 war und cvalue immer leer)

oder:

$.removeCookie(cname); //Jquery-Cookie https://plugins.jquery.com/cookie/

oder auch

document. cookie = .... + "Expires=Thu, 01 Jan 1970 00:00:01 GMT;";

oder auch

document.cookie = ...+ "Max-Age = alter";

(wobei alter von Expires=Thu, 01 Jan 1970 00:00:01 GMT; bis alter = -99999 alle werte hatte)

Bei der Version $.removeCookie(cname) wird immer true oder false zurückgegeben aber als ich if($.removeCookie(cname)){ console.log("gelöscht") }else{ console.log($.removeCookie(cname));}

kam immer "gelöscht" zurück obwohl der Cookie noch da war

Jetzt meine Frage wie kann ich den Cookie dann löschen wenn ich schon alles Probiert habe?

Danke für eure hilfe schonmal hoffe ihr wisst es den ich bin am Verzweifeln

Systeminfo:

Firefox Version 60.0

Windows 10 (neuste Version)

PC, Computer, Windows, Browser, Technik, Programm, HTML, Firefox, programmieren, JavaScript, JS, Cookies, setzen, html5, Dokumente, JQuery, PHP, Technologie
2 Antworten
Js - asynchrone Funktion Promise wird immer zurückgeben?

Hallo und zwar habe ich gerade folgendes Problem, ich habe folgenden Code unterhalb, wo ich versuche vom Ordner boilerplates alle Unterordner auszulesen und davon anschließend wieder die Sub-Dateien zu bekommen. Funktioniert auch so wie gewünscht, aber wenn ich am Ende die Datei die Funktion getTemplates() aufrufe, wird mir immer ein Promise zurückgeliefert, da die Funktion ja asynchron ist, wie bekomme ich von dieser Funktion aber nun den richtigen Wert?

Normalerweise sollte ja beim returnen des Promises nur mehr der Wert zurückgegeben werden?

//Define templates folder
const srcPath = './boilerplates/';
async function readFiles(file) { return new Promise((resolve, reject) => { let fileInfos = fs.readdir(path.join(srcPath, file), (err, files) => { let htmlFile = 'nothing found'; //Check if html file exist files.forEach(file => { if (files[0].includes('.html')) { htmlFile = file; } }); resolve(htmlFile); }); }); }


export const getTemplates = async () => { let boilerplates = []; await new Promise((resolve) => {


fs.readdirSync(srcPath).filter(async (file) =&gt; {
  let pathToIndex = await readFiles(file);
  boilerplates.push({
    directoryName: file,
    storage: {
      index: pathToIndex
    }
  });      
  resolve(boilerplates);
});

 }); return boilerplates; };


console.log(getTemplates());
// Habe es auch schon wie unten probiert, kann mir aber auch nicht vorstellen dass dies die richtige Lösung ist, um eine Route(Express) an Hand eines Promises zu machen
getTemplates().then(boilerplates => {
  routes.get('/list', (req, res) => {
    res.render('list', {
      title: 'HTML-Signatures-Boilerplates',
      boilerplateList: boilerplates
    });
  });
});

HTML, JavaScript, JS, node.js, Es6
2 Antworten
p5 js in html einbinden funktioniert nicht. Wie geht das richtig?

Ich will in mein html-dokument p5 mit dem Editor Atom einbinden, doch wenn ich dann eine p5-funktion aufrufe, kommt die fehler meldung is undefined. Hier der code der index seite:

<html>
<head>
 <meta charset="UTF-8">
 <script language="javascript" type="text/javascript" src="p5.js"></script>
 <!--<script language="javascript" type="text/javascript" src="matter.js"></script>-->
 <script language="javascript" src="p5.dom.js"></script>
 <script language="javascript" src="p5.sound.js"></script>
 <script language="javascript" type="text/javascript" src="engine.js"></script>
 <script language="javascript" type="text/javascript" src="figur.js"></script>
 <!--<script language="javascript" type="text/javascript" src="plinko.js"></script>
 <script language="javascript" type="text/javascript" src="boundary.js"></script>
-->
 <style></style>
</head>
<body>
</body>
</html>

Hier kommt noch keine Fehlermeldung, doch wenn ich in der eingebundenen engine-js-datei eine funktion namens rect() aufrufe,welche es in p5 gibt, kommt die fehlermeldung "rect is undefined". Hier der Aufbau der engine-datei:

var grid = [];
var CanvasWidth = 600;
var CanvasHeigth = 600;
var spalten = CanvasWidth/60
var zeilen = CanvasHeigth/60

function setup() {  createCanvas(CanvasWidth, CanvasHeigth); }

function draw() {  background(0) }

rect(300, 300, 20, 20)
//    x   y  width heigth

Alle datein, also index, engine, figur, p5.js, p5.dom.js und p5.sound.js sind in einem Ordner. Ich weis nicht woran das problem liegt.

Website, Webseite, programmieren, JavaScript, JS, Programmierung, html5, Webentwicklung, p5.js
1 Antwort

Meistgelesene Fragen zum Thema JS

Wie kann man überprüfen, ob Google Analytics verwendet wird?

3 Antworten

Node Fehler: Der Befehl "node" ist entweder falsch geschrieben oder konnte nicht gefunden werden?

1 Antwort

JavaScript doppelte Werte in einem Array?

5 Antworten

Vor- und Nachteile von Javascript?

5 Antworten

Nach Update auf Kaspersky Internet Security 2016 wird ein .js Script in allen besuchten Webseiten injeziert? http://ff.kis.scr.kaspersky-labs.com/ Was ist das ?

2 Antworten

CSS: Bereiche der Website wie bei LightBox verdunkeln, wenn CSS-PopUp offen

3 Antworten

API Fernsehprogramm?

2 Antworten

JavaScript code verstecken/unleserlich machen?

4 Antworten

Wie entferne ich Instagram Kontakte im Telefonbuch?

3 Antworten

JS - Neue und gute Antworten