How do I make Phaser apply changes from my game.js file? - javascript

I tried the Phaser Tutorial. I created the index.html plus a js-file called game.js.
The phaser.min.js file was downloaded too.
Everything is in the same folder.
I connected everything properly and the output works very fine but somehow Phaser doesn't recognise changes in my game.js anymore.
This is my current game.js file:
var config = {
type: Phaser.AUTO,
width: 640,
height: 360,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload(){
this.load.image('boo', 'assets/pics/boo.png');
}
function create(){
this.add.image(0, 0, 'boo');
}
function update(){
}
My index.html file looks like this:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UFT-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title> My very 1st game </title>
<script type = "text/javascript" src = "phaser.min.js"></script>
<script type = "text/javascript" src = "game.js"></script>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
</body>
</html>
Including the game.js file works and if I remove it from the head section it doesn't work anymore, as it should be.
If I'm going to change let's say width: 640 to width: 200 for example and I refresh the localhost-page, it doesn't apply the change.
If I inspect the page, the old file with width: 360 is still used, even though it doesn't exist anymore.
It applies changes if I put the code from the game.js file into the body of index.html. It doesn't by including the game.js file.
I use XAMPP including the Apache Webserver.
Any hints what I can try? Anything will be appreciated.

The problem was caching. I refreshed the game with ctrl+F5 and it applied changes.
Adding following code might help too:
<meta http-equiv="Cache-control" content="no-cache">

Related

How do I set the window name/title in ElectronJS?

Silly question, but I've been struggling just trying to change an Electron window's name for a while now, so hopefully someone here can just help me with it.
I'm trying to change it from "Electron" to anything else. I can get every other title/name changed to what I want, but no matter what I seem to try, it always says "Electron"... :(
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <!-- Window name isn't this -->
</head>
<body>
<h1>hi</h1>
</body>
</html>
// main.js
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
title: 'Foo' // Window name isn't this
})
app.setName('Bar') // Window name isn't this
win.setTitle('ReeeeeBar') // Window name isn't this
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
// package.json
{
"name": "foobar-electron-app", // Window name isn't this
"main": "main.js",
"dependencies": {
"electron": "^9.1.2"
}
}
To be very specific, I'm trying to change this:
Actually, you can change that particular name. But it's hacky and has no sense :).
For MacOSX, go to node_modules/electron/dist/Electron.app/Contents/Info.plist and change value for CFBundleName.
For packaged apps electron/builder will look into productName or name field in package.json - no need for hacks.
As it turns out, you can't change that during development.
When you build (with electron-builder) it will change that to whatever the name field is in package.json.

external .js variable coming back undefined?

I am trying to get an external .js variable into my index.html however the variable just comes back undefined. It works if the variable is in the HTML file but not when I call it from an outside .js file it just reads undefined ?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/main.css" />
<title>LoginSystem</title>
<script src="../server.js"></script>
</head>
<body>
<div id="display"></div>
<script>
var t = setInterval(function() {
// you can change `random` to any variable you want to be displayed
document.getElementById("display").innerHTML = random;
}, 500);
</script>
</body>
and the javascript file
var random = Math.random();
any help would be greatly appreciated thank you.
I can't explain why you're getting undefined; however, Since you set random in a variable outside of the scope of the function passed into setInterval, it will always display the same random number. You need to set random inside the function passed to setInterval if you want a new random number to show up.
server.js
function getRandomNumber() {
return Math.random();
}
index.html
var t = setInterval(function() {
document.getElementById("display").innerHTML = getRandomNumber();
}, 500);
Demo
https://repl.it/#AnonymousSB/RemarkableBowedNagware
i think you may be looking in the wrong directory for your server.js see this line:
<script src="../server.js"></script>
Make sure the file path is correct, if your index and server.js are in the same fodler it should be:
<script src="./server.js"></script>
I have tested the same code and it works perfectly for me.
Hope this helps.
Youu external javascript file path isn't correct. Replace ../server.js with /server.js

Mapkit JS can't move map on mobile phone

I'm trying use Mapkit JS for map. The code I have works fine on desktop. However, there is one problem when test it on a mobile phone. It seems that I cannot move the map around using my finger. On the desktop, I can move around the map with my mouse.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
done("API KEY");
},
language: "en"
});
var map = new mapkit.Map('map', {
showsMapTypeControl: false,
showsCompass: mapkit.FeatureVisibility.Hidden
})
var coordinateRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(40.51415196691954, -74.43808765761719),
new mapkit.CoordinateSpan(1.234, 1.23423)
);
map.region = coordinateRegion;
</script>
</body>
</html>
Mapkit JS versions occasionally have trouble recognizing touches from Android phones. You can test this in the Chrome developer panel. The fix is to change the version you are using.
As of the time of this writing, 5.19.x is the latest version that supports Android and 5.20.0 currently does not.

Uncaught TypeError: Cannot read property 'add' of undefined (Phaser)

im sort of new at this website, currently working on this mini RPG phaser game in brackets. Assuming no spelling errors that i can see, every time i go live, i get stuck with this dang error in my main.js, i looked over my main.js and my index.html, cant find the issue, my phaser.js is under js/phaser.js.
var RPG = RPG || {};
var game = new Phaser.Game(640, 480, Phaser.CANVAS);
game.state.add("TitleState", new RPG.TitleState());
game.state.start("TitleState");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>KawaiiRPG</title>
</head>
<style>
body {
padding: 0px;
margin: 0px;
background-color: black;
}
</style>
<body>
<script src="js/phaser.js"></script>
<script src="js/main.js"></script>
</body>
</html>
The main problem here is that, afaik, Phaser 3 (shown in your screenshot's console) has to little documentation right know; most documentation and examples you can find refers to Phaser 2, or early betas of Phaser 3.
I'm new to Phaser (and game development in general) and I'm having problems too reading Phaser 2 examples and figuring out how to make them work in Phaser 3. So here is my try...
What is wrong: in Phaser 3 there are no states but scenes, each of which acts as an world by it self; and they are managed differently to the states in previous versions of Phaser (https://phaser.io/phaser3/contributing/part5).
Solution: Not sure how to dynamically add a scene to a game, but by using a configuration object you can set the initial scene when creating the Game object:
var myRpgTitleScene = {
preload: function(){},
create: function(){},
update: function(){}
}
var config = {
type: Phaser.CANVAS,
width: 640,
height: 480
},
scene: myRpgTitleScene
}
var game = new Phaser.Game(config);

How to automatically refresh external data loaded into Javascript variables in HTML?

I have digital information written as Javascript variables by PHP into a .txt-File. This information gets changed by a user at a different interval.
var ISTUHSXDATE8 = '21.1.2018';
var ISTUHSXTIME8 = '20:11';
var ISTUHSXROT8 = 0;
var ISTUHSXGELB8 = 0;
var ISTUHSXGRUEN8 = 1;
var ISTUHSXAUSLASTUNG8 = '0%';
To show actual information in the HTML body, it´s necessary to make the HTML document load the latest version of .txt from server. [At the moment handmade by push the button and in webprojekt by setInterval() automatically]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv='cache-control' content='no-cache'>
<script type="text/javascript" id="id_of_java_var"></script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var dsts = new Date();
document.getElementById("id_of_java_var").src =
"https://www.juh-technik.de/StreifenstatusEA1.txt?time" + dsts.getTime();
}
</script>
</body>
</html>
With this code I can load latest version from the server for several .gif/.jpg/.html files by pushing the refresh button. The Problem is, this don´t works with .txt-files.
So my question is, how to refresh src of following line without page reload.
<script src="https://www.juh-technik.de/StreifenstatusEA1.txt" type="text/javascript" id="id_of_java_var"></script>
Thanks for your help :-)

Categories