i am trying to load assets on javascript using phaser3 engine but on chrome consol it says 'failed to load image' here is my HTML & Javascript code look where i made mistake:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PhaserGame</title>
<script = "text/javascript" src = "phaser.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: {y: 500},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('sky','assets/sky.png');
}
function create() {
this.add.image(400, 300, 'sky');
}
function update() {
}
I think there is some problem with your image location
the same code worked for me, with only changing the image URL
https://codepen.io/devsumanmdn/pen/zaeZwJ?editors=0010
create folder "public" in project and put images here
Related
I wanna make a motion graph by using gsap in vue3. I met a question. here is an example below. object-type variable like tl return by data() is transform to Proxy by default. And it dose not work when I config it later. So I try to define a variable in setup() without using reactive(). And it works when I config it later.
Run this example, I find some differences exists between tl1(define in setup without reactive()) and tl2.target(define in data()). You can run it on CodePen.
Could someone tell me the reason why it dosen't work when it becomes proxy object?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" style="width: 5rem;height: 5rem;">
<button #click="moveOrigin">actionOrigin</button>
<button #click="moveProxy">actionProxy</button>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script>
const app = {
setup() {
const tl1 = gsap.timeline({ paused: true });
const flag = true;
return { tl1,flag };
},
data(){
const tl2 = gsap.timeline({ paused: true });
return {tl2};
},
methods: {
moveOrigin() {
console.log("tl1 Origin");
console.log(this.tl1);
if (this.flag) {
this.tl1.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl1.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl1.play();
},
moveProxy() {
console.log("tl2 Proxy");
console.log(this.tl2);
if (this.flag) {
this.tl2.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl2.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl2.play();
},
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
Im new in this electron space, and have a problem. i didn´t manage to get my custom buttons to work. This drives me crazy. Anyone an idea what i´m doing wrong? the Buttons do simply nothing when i click. My code is an example from an older youtube Tutorial, and i think things have changed since then.
Here is my code:
menuHandler.js
const $ = require('jquery');
const { remote } = require('electron');
var win = remote.getCurrentWindow();
$('#minimize').click(function () {
win.minimize();
});
$('#close').click(function () {
win.close();
});
$('#maximize').click(function () {
if (win.isMaximized()) {
win.unmaximize();
} else {
win.maximize();
}
console.log(win.isMaximized());
});
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/reset.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
</head>
<body>
<div id="container">
<nav>
<div id="buttons">
<div id="minimize">
<span id="minimize-font">—</span>
</div>
<div id="maximize">
<span id="size-font">◻</span>
</div>
<div id="close">
<span id="close-font" >✕</span>
</div>
</div>
</nav>
</div>
</html>
</body>
</html>
and my app.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let win;
var IMG_DIR = '/img/';
var APP_DIR = '/src/';
function createWindow() {
win = new BrowserWindow({
width: 1100,
height: 750,
minWidth: 930,
minHeight: 650,
frame: false,
/*title: "Nader | Initio",
resizable: true, */
backgroundColor: '#1A373E',
icon: path.join(__dirname, IMG_DIR, 'icon.png'),
webPreferences: {
nodeIntegration: true
}
});
win.openDevTools()
win.loadURL(url.format({
pathname: path.join(__dirname, APP_DIR, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit();
}
});
thank you for your help!
Several small things are needed to make your code work:
<script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
needs to be
<script type="text/javascript" src="/src/js/menuHandler.js"></script>
Since Electron 10, released in August 2020, you need to set enableRemoteModule: true in the webPreferences if you want to use remote in the renderer process.
Lastly, you should register the button click event handlers after the page is loaded. Otherwise, chances are the elements don't exist yet.
$(window).on("load", function() {
console.log("loaded");
$("#minimize").click(function () {
console.log("minimize");
win.minimize();
});
// etc.
});
As a general tip I'd advise to make use of the DevTools, which you already activate in your code. There, in the Console tab, you can see JavaScript errors happening in the renderer process.
Hi community I would like to solve a problem, I am currently using plyr.io as a player, the detail is that when you want to watch a video on a cell phone in full screen, the player is maximized in portrait mode, there will be some way that by automatically maximizing it is in landscape mode only on the mobile, even when minimize return to portrait, even if the cell phone is in portrait mode.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plyr</title>
<!-- Plyr style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.css" />
</head>
<body>
<!-- Plyr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.min.js"></script>
<video id="player" poster="https://i.imgur.com/YC9U2uc.jpg" controls crossorigin>
</video>
</body>
<script type="text/javascript">
const player = new Plyr('#player');
player.source = {
type: 'video',
title: 'Sintel',
sources: [{
src: '//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm',
type: 'video/mp4',
}
],
tracks: [{
kind: 'captions',
label: 'English',
srclang: 'en',
src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt',
default: false,
},
{
kind: 'captions',
label: 'German',
srclang: 'de',
src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-de.vtt',
},
],
};
</script>
</html>
I have tried with CSS code, but it is not very good, because it only rotates the video, it does not rotate the controls or the poster, which when applied to maximize it applies:
transform: rotate(90deg) scale(1.75);
I think the best would be with JavaScript,Thank you in advance.
Source: https://plyr.io/
You can try with this:
screen.orientation.lock('landscape');
as described here:
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
plyr.io specific, use enterfullscreen and exitfullscreen events along with screen orientation:
player.on('enterfullscreen', event => {
screen.orientation.lock('landscape');
});
player.on('exitfullscreen', event => {
screen.orientation.lock('portrait');
});
var winwidth=$(window).width();
var winheight=$(window).height();
const player = Plyr.setup('#player');
player.forEach (item => {
item.on('enterfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(90deg)", "height": winwidth, "width": winheight, "margin-left": "0px", "margin-right": "0px"});
})
item.on('exitfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(0deg)", "height": "100%", "width": "100%", "margin-left": "auto", "margin-right": "auto"});
})
});
I have one website link which currently is working when clicking the link a window pop-up, but I want the onclick to happen automatically without clicking. The onclick should work like onload.
I tried a lot of Google and StackOverflow searches.. but I couldn't find the exact solution to my problem.
Here's my code below:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
document.getElementById('robrowser').addEventListener("click", function(){
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}, false );
}
window.addEventListener("load", initialize, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
You can simulate a buttonclick like this:
$("#robrowser").click();
In this case you want to run the method when a page is loaded.
You can just remove the entire onclick listener and call the function initialize() directly:
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
initialize();
The following changes have been made:
button on click event listener moved into the window load function
The source code from the button click event moved into initialize()
button on click event to target the function initialize
window load function calls/executes initialize()
Source code:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
window.addEventListener("load", function(){
document.getElementById('robrowser').addEventListener("click", initialize, false );
initialize();
}, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
</html>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps, happy coding!
jwplayer("myElement_0").onPlay(function(){ pausePlayers(1); alert('0 has started'); });
jwplayer("myElement_1").onPlay(function(){ pausePlayers(2); alert('1 has started'); });
jwplayer("myElement_2").onPlay(function(){ pausePlayers(3); alert('2 has started'); });
jwplayer("myElement_3").onPlay(function(){ pausePlayers(4); alert('3 has started'); });
function pausePlayers(playing) {
for (var i=0; i<4; i++) {
if(i != playing) { jwplayer("myElement_"+i).pause(true); }
}
};
I have this script to pause other players if one is running. but it doesn't work. In my console, I see:
Uncaught TypeError: Object #<Object> has no method 'onPlay'
(anonymous function)
alhouthgh I'm pretty sure the jwplayer script is being loaded, no issues there.
Here is some quick and dirty sample code for something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.longtailvideo.com/jwplayer/jwplayer.js"></script>
<title>Multiple Mutually Exclusive JW6 Players Which Stop at End</title>
</head>
<body bgcolor="#EEE">
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mp4",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container2"></div>
<script type="text/javascript">
jwplayer("container2").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.flv",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container3"></div>
<script type="text/javascript">
jwplayer("container3").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mov",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
primary: "flash",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container2').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>