Window.open() Width + Height Resize Doesn't Work - google-chrome-extension

I am working on a google extension that opens four random pop-ups every hour (and opens different pop-ups during the day and night).
The pop-up sizes vary so I set each size of the pop-up url but it does not seem to work as seen in the picture. Does anyone have any ideas why it is not working?
Thank you so much :')
enter image description here
function showPopup() {
let date = new Date();
let h = date.getHours();
if(h > 5 && h < 20)
{
var Popups = [
{
url: 'https://looking4love.glitch.me/', // Day time -- Gorse
width: 400,
height: 530,
},
{
url: 'https://meetme2day.glitch.me/', //Canada goose
width: 400,
height: 530,
},
{
url: 'https://chat2me.glitch.me/', // Cow Parsley
width: 400,
height: 530,
},
{
url: 'https://meet-me-2nite.glitch.me/', //Eurasian Coot
width: 530,
height: 400,
},
{
url: 'https://meetmenow.glitch.me/', // Hawthorn
width: 400,
height: 530,
},
{
url: 'https://looking4relatioship.glitch.me/', // Bluebell
width: 400,
height: 530,
},
{
url: 'https://availablenow.glitch.me/', //Moss
width: 400,
height: 530,
},
{
url: 'https://cute-single-needs-lov.glitch.me/', // Poppies
width: 530,
height: 400,
},
];
var a = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var b = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var c = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var d = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
console.log(a,b,c,d);
// daytime
window.open(a.url, 'Go Outside!', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=20,left=20,width=${a.width},height=${a.height}`);
setTimeout(() => {
window.open(b.url, 'Go Outside! 02', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=200,left=200,width=${b.width},height=${b.height}`);
}, 1000);
setTimeout(() => {
window.open(c.url, 'Go Outside! 03', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=50,left=620,width=${c.width},height=${c.height}`);
}, 2000);
setTimeout(() => {
window.open(d.url, 'Go Outside! 04', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=100,left=820,width=${d.width},height=${d.height}`);
}, 3000);
}
else
{
var Popups = [
{
url: 'https://feeling-lonely.glitch.me/', // Night time -- Robin
width: 400,
height: 529,
},
{
url: 'https://talk-2-me.glitch.me/', // Mallard
width: 400,
height: 529,
},
{
url: 'https://looking4relatioship.glitch.me', // Blue bell
width: 400,
height: 529,
},
{
url: 'https://chat2metonite.glitch.me/', //Fuchisas
width: 400,
height: 529,
},
{
url: 'https://freetonight.glitch.me/', //Viviparous
width: 400,
height: 529,
},
{
url: 'https://chat-tonight.glitch.me/', //Teasel
width: 400,
height: 529,
},
{
url: 'https://free-tonight.glitch.me/', //Six-spot
width: 529,
height: 400,
},
];
var a = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var b = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var c = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
var d = Popups.splice(Math.floor(Math.random() * Popups.length - 1), 1)[0];
// nighttime
window.open(a.url + "?test=abc", 'Go Outside!', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=20,left=20,width=${a.width},height=${a.height}`);
setTimeout(() => {
window.open(b.url + "?test=abc", 'Go Outside! 02', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=200,left=200,width=${b.width},height=${b.height}`);
}, 1000);
setTimeout(() => {
window.open(c.url + "?test=abc", 'Go Outside! 03', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=50,left=620,width=${c.width},height=${c.height}`);
}, 2000);
setTimeout(() => {
window.open(d.url + "?test=abc", 'Go Outside! 04', `directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,top=100,left=820,width=${d.width},height=${d.height}`);
}, 3000);
}
let paragraphs = document.getElementsByTagName('body');
for (elt of paragraphs) {
elt.style['background-color']= '#000000';
elt.style['color']= '#000000';
// elt.style['filter'] = 'blur(50px)';
// elt.innerText = "";
}
}
setInterval(() => {
let d = new Date();
let m = d.getMinutes();
let s = d.getSeconds();
if(s % 20 == 0) // this for testing
// if(m == 21 && s == 0) // this for once an hour
{
// it is zero minutes and zero seconds...
showPopup();
}
}, 500);

Related

how to set character frame of spritesheet in phaser js?

how to set frame of character?
here is my code
this.load.spritesheet(`dude-1`, `../src/assets/Character/ch-1.png`, {
frameWidth: 72,
frameHeight: 92,
});
main logic code is here
this.player = this.physics.add.sprite(100, -500, this.charSelect).setOrigin(1, 1);
this.player.body.setGravityY(1700);
this.player.setBounce(0.1);
this.physics.add.existing(this.player).body.setSize(15, 90, ).setOffset(20, 0)
this.anims.create({
key: "left",
frames: this.anims.generateFrameNumbers(this.charSelect, { start: 6, end: 10 }),
frameRate: 10,
repeat: -1,
});
this.anims.create({
key: "turn",
frames: [{ key: this.charSelect, frame: 5 }],
frameRate: 10,
});
this.anims.create({
key: "right",
frames: this.anims.generateFrameNumbers(this.charSelect, { start: 0, end: 4 }),
frameRate: 10,
repeat: -1,
});
cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(this.player, this.platformGroup);
this.player.body.setCollideWorldBounds(true);
this.physics.world.setBounds(0, 0, (config.width) - 10, config.height, true, true, false, true);
here is output and issue. how to set the frame of character?
The problem is, that the phaser-image / frame size is too big (or the actual image is to small). Check the frame size (frameWidth and frameHeight) and the actual image size, that could solve your problem.
Here a short demo:
It loads the same spritesheet, once with the correct frameWidth / frameHeight size and once with a too big size.
document.body.style = `padding:0;margin:0;`;
class Example extends Phaser.Scene {
constructor() {
super();
}
preload() {
this.load.spritesheet('mummyCorrectSize', 'https://labs.phaser.io/assets/animations/mummy37x45.png', { frameWidth: 37, frameHeight: 45 });
this.load.spritesheet('mummyWrongSize', 'https://labs.phaser.io/assets/animations/mummy37x45.png', { frameWidth: 50, frameHeight: 50 });
}
create(){
// the "const" variables show the the wrong and right sprite creation
const wrongSizeSprite= this.add.sprite(50, 40, 'mummyCorrectSize').setOrigin(0);
const rightSizeSprite = this.add.sprite(50, 120, 'mummyWrongSize').setOrigin(0);
this.add.text(50, 10, 'Right size: single sprite/frame shown');
this.add.text(50, 100, 'Wrong size: the whole image is shown');
}
}
const config = {
type: Phaser.AUTO,
width: 500,
height: 180,
scene: [ Example ]
};
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

Using Datalabels and ChartJS with Chartjs-node-canvas

I use NodeJS with ChartJS to render graph directly to a file and it works fine.
I do it by ChartjsNodeCanvas npm module installed.
In order to display labels on the graph I use official ChartJS plugin ChartJS-plugin-datalabels
But it seems like Canvas module has a different scheme of activating ChartJS plugins and most probably I activate datalabels plugin incorrectly. So I can’t get the labels displayed on the graph.
const Chart = require('chart.js');
const datalabels = require('chartjs-plugin-datalabels')
const { CanvasRenderService } = require('chartjs-node-canvas');
const width = 600;
const height = 400;
const chartCallback = (ChartJS) => {
ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
ChartJS.plugins.register({
datalabels
});
};
const canvasRenderService = new CanvasRenderService(width, height, chartCallback);
(async () => {
const configuration = {
type: 'bar',
data: {
datasets: [
{
type:"bar",
barThickness: 24,
label: 'My dataset',
data: ydata['data'],
backgroundColor: 'rgba(75,192, 192, 0.2)',
borderColor: 'rgba(54, 162, 135, 0.2)',
borderWidth: 1,
datalabels: {
align: 'start',
anchor: 'start'
}
},
labels: xdata,
}
options: {
scales: {
yAxes: [
{
id: 'left-y-axis',
position: 'left',
stacked: false,
ticks: {
beginAtZero: true,
callback: (value) => value + "R"
},
},
{
id: 'right-y-axis',
position: 'right'
}
],
xAxes: [{
stacked: true,
}]
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'red',
font: {
weight: 'bold'
},
formatter: Math.round
}
}
}
};
const image = await canvasRenderService.renderToBuffer(configuration);
fs.writeFileSync(tgMsgPath+"test.png", image)
})();
The chart is shown but no labels on the graph.
This is how to activate plugins with ChartJs-niode-canvas:
const chartJsFactory = () => {
const Chart = require('chart.js');
require('chartjs-plugin-datalabels');
delete require.cache[require.resolve('chart.js')];
delete require.cache[require.resolve('chartjs-plugin-datalabels')];
return Chart;
}
// ...
const canvasRenderService = new CanvasRenderService(
chartWidth,
chartHeight,
chartCallback,
undefined,
chartJsFactory
);

Determine The Area Of A Point based on Background Color in Chart JS

As shown in the pictures below, I have a chart created with 'Chart JS'. This chart contains linear lines with various curves. I painted the areas between these lines with 'background color' in various colors.
My question is, when I create a random point on this chart, I just want to create an if statement based on colors.
For example,
There is the point called A and the variable called B.
If A point is in the yellow area, then B is 1.
If A point is in the light gray area, then B is 2.
Something like this.
Here is Picture:
Here is sample code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script type="text/javascript">
var x_A = new Array(2, 2, 2.5, 2.5, 2);
var y_A = new Array(2.5 , 3 , 3.5, 2.5 , 2.5);
var c_A = [];
for (var i = 0; i < x_A.length; i++) {
var obj = { x: x_A[i], y: y_A[i] };
c_A.push(obj);
}
var x_B = new Array(0, 1.5, 1.5, 0);
var y_B = new Array(0, 2, 0.5, 0);
var c_B = [];
for (var i = 0; i < x_B.length; i++) {
var obj = { x: x_B[i], y: y_B[i] };
c_B.push(obj);
}
var x_C = new Array(1.5, 1.5, 2, 2, 1.5);
var y_C = new Array(0.5, 2, 3, 2.5, 0.5);
var c_C = [];
for (var i = 0; i < x_C.length; i++) {
var obj = { x: x_C[i], y: y_C[i] };
c_C.push(obj);
}
var r_A = 'rgba(220, 20, 60,1)';
var r_B = 'rgba(255, 255, 56,1)';
var r_C = 'rgba(34, 139, 34,1)';
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'X',
showLine: true,
fill: true,
pointRadius: 7,
data: [{
x: 1,
y: 0.9
}],
borderWidth: 1,
pointBackgroundColor: "#000000",
lineTension: 0,
},
{
label:'Zone A',
showLine: true,
fill: true,
backgroundColor: r_A,
pointRadius: 0,
data: c_A,
borderWidth: 1,
borderColor: "#000000",
lineTension: 0,
},
{
label: 'Zone B',
showLine: true,
fill: true,
backgroundColor: r_B,
pointRadius: 0,
data: c_B,
borderWidth: 1,
borderColor: "#000000",
lineTension: 0,
},
{
label: 'Zone C',
showLine: true,
fill: true,
backgroundColor: r_C,
pointRadius: 0,
data: c_C,
borderWidth: 1,
borderColor: "#000000",
lineTension: 0,
},
]
},
options: {
title: {
display: false,
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
gridLines:
{
display: false
},
scaleLabel: {
display: true
}
}],
yAxes: [{
gridLines:
{
display: false
},
scaleLabel: {
display: true,
}
}]
}
}
});
</script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<html>
<body>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myChart" height="220"></canvas></div>
</div>
<div class="w3-row" align="center"><h2>Color Zone where the point X is located: </h2></div>
</body>
</html>
Here is CodePen:
My Sample Example: CodePen

var collider= this.physics.add.overlap(player, pipe, perder, false, this);

Im making this game and I got some problems with an overlap function.
So, the main problem is, when the player touch 2 pipes at same time, the player loses 2 lives instead of 1. This occurs because player touches 2 pixels at same time, 1 from one pipe and 1 from another. So I create this collider flag "collider" to just call one time the function "perder" and not 2 like previously.
...
addOnePipe: function(x, y) {
pipe = this.physics.add.image(x, y, 'br').setScale(1.1);
pipe.setVelocityX(-150);
this.pipes.addMultiple(pipe);
pipe.checkWorldBounds = true;
pipe.outOfBoundsKill = true;
***var collider = this.physics.add.overlap(player, pipe, perder, false, this);***
},
addRowOfPipes: function() {
var hole = Phaser.Math.Between(1, 6);
//var hole=6;
enter code here
for (var i = 0; i < 8; i++)
if (i != hole && i != hole + 1){
this.addOnePipe(760, i *54 + 40);
}
},
});
***function perder (player,pipe) {
vida--;
if (vida==0){
this.scene.start('gameover');
}
else(this.scene.start('game2'));
collider.active = false;
}***
The full game is here:
var Preloader = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function Preloader ()
{
Phaser.Scene.call(this, { key: 'preloader' });
},
preload: function ()
{
this.load.image('imgfinal', 'https://cdn.shopify.com/s/files/1/0769/4313/products/GAMEOVER_copy_1024x1024.jpg?v=1508717540');
this.load.image('br', 'assets/sprites/crate32.png');
this.load.image('ground2', 'http://images6.fanpop.com/image/photos/40700000/Backround-geometry-dash-40776456-250-250.jpg');
this.load.image('sky', 'https://st2.depositphotos.com/7267546/10689/v/950/depositphotos_106891270-stock-illustration-cartoon-nature-landscape-for-game.jpg');
this.load.image('final2', 'http://3.bp.blogspot.com/--aDP7X-70Yo/T0epwcsA0EI/AAAAAAAAAjU/D6b1H0gs8_4/s1600/fixe+5+estrelas.jpg');
this.load.image('final', 'https://images-na.ssl-images-amazon.com/images/I/81MPs6C9M8L._SY355_.png');
this.load.image('ground', 'https://lh3.googleusercontent.com/-8_3XLw9ontM/VsmYVcGUStI/AAAAAAAAAgE/ZGFffMQDNFw/w318-h318-n-rw/bg_03.png');
this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
this.load.image('sky2', 'https://st2.depositphotos.com/5479200/11693/v/950/depositphotos_116931742-stock-illustration-game-background-2d-application-vector.jpg');
this.load.image('triangle', 'assets/sprites/triangle.png');
this.load.image('branco', 'https://madeirasgasometro.vteximg.com.br/arquivos/ids/170727-490-490/pp40-branco-neve-square.jpg?v=636801256712100000');
this.load.image('back','https://http2.mlstatic.com/piso-de-granito-verde-ubatuba-D_NQ_NP_798225-MLB25401365082_022017-F.jpg');
this.load.image('play', 'https://http2.mlstatic.com/revestimento-adesivo-decofix-marmore-cinza-2-metros-D_NQ_NP_421311-MLB20503488532_112015-F.jpg');
this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
this.load.image('tubo', 'assets/sprites/block.png');
this.load.audio('drums', ['assets/audio/tech/drums.ogg', 'assets/audio/tech/drums.mp3']);
this.load.audio('synth2', ['assets/audio/tech/synth2.ogg', 'assets/audio/tech/synth2.mp3']);
this.load.audio('boden', ['assets/audio/bodenstaendig_2000_in_rock_4bit.mp3', 'assets/audio/bodenstaendig_2000_in_rock_4bit.ogg']);
this.load.image('reverse','http://www.euvosescrevi.com.br/wp-content/uploads/2016/04/earth.jpg');
this.load.image('star', 'src/games/firstgame/assets/star.png');
this.load.setPath('assets/audio/kyobi/');
this.load.audioSprite('kyobi', 'kyobi.json');
},
create: function ()
{
this.scene.start('mainmenu');
}
});
var MainMenu = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function MainMenu ()
{
Phaser.Scene.call(this, { key: 'mainmenu' });
window.MENU = this;
},
create: function ()
{
vida=3;
var back= this.add.image(400,300,'back');
var play= this.add.image(400,250,'play').setScale(0.2);
var play1;
play1= this.add.image(400,400,'play').setScale(0.2);
this.add.text(240, 70, '"The Runner" ', { font: '50px Arial', fill: '#ffffff' });
this.add.text(337.5, 230, 'PLAY', { font: '50px Courier', fill: '#00000' });
this.add.text(335, 360, 'HOW', { font: '50px Courier', fill: '#00000' });
this.add.text(400, 400, 'TO', { font: '50px Courier', fill: '#00000' });
play1.setInteractive();
play1.once('pointerup', function () {
this.scene.start('rules');
}, this);
play.setInteractive();
play.once('pointerup', function () {
this.scene.start('game2');
}, this);
}
});
var Rules = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function Rules ()
{
Phaser.Scene.call(this, { key: 'rules' });
window.MENU = this;
},
create: function ()
{
var back= this.add.image(400,300,'back');
var play3= this.add.image(650,500,'play').setScale(0.2);
this.add.text(590, 480, 'BACK', { font: '50px Courier', fill: '#000000' });
this.add.text(20, 40, 'Welcome to "The Runner" ', { font: '50px Times', fill: '#ffffff' });
this.add.text(60, 115, 'Rules: ', { font: '40px Times', fill: '#ffffff' });
this.add.text(65, 180, 'The aren´t any rules for this game. Just give your best to', { font: '30px Times', fill: '#ffffff' });
this.add.text(65, 220, 'complete the maps and DONT USE CHEATS!! ', { font: '30px Times', fill: '#ffffff' });
this.add.text(70, 300, 'Controls: Up Arrow ', { font: '30px Times', fill: '#ffffff' });
this.add.text(190, 350, 'Left Arrow ', { font: '30px Times', fill: '#ffffff' });
this.add.text(190, 400, 'Right Arrow ', { font: '30px Times', fill: '#ffffff' });
this.add.text(328, 304.5, '|', { font: '20px Times', fill: '#ffffff' });
this.add.text(320, 290, '^', { font: '40px Times', fill: '#ffffff' });
this.add.text(332, 353, '<', { font: '30px Times', fill: '#ffffff' });
this.add.text(346, 327, '_', { font: '40px Times', fill: '#ffffff' });
this.add.text(370, 401, '>', { font: '30px Times', fill: '#ffffff' });
this.add.text(350, 375, '_', { font: '40px Times', fill: '#ffffff' });
play3.setInteractive();
play3.once('pointerup', function () {
this.scene.start('mainmenu');
}, this);
}
});
var Game = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function Game ()
{
Phaser.Scene.call(this, { key: 'game' });
window.GAME = this;
var player;
var platforms;
var cursors;
var tubos;
var timer;
var star;
},
create: function ()
{
drums = this.sound.add('drums');
synth2 = this.sound.add('synth2');
boden = this.sound.add('boden');
var loopMarker = {
name: 'loop',
start: 0,
duration: 7.68,
config: {
loop: true
}
}
drums.addMarker(loopMarker);
drums.play('loop', {
delay: 0
});
synth2.addMarker(loopMarker);
synth2.play('loop', {
delay: 0
});
this.cameras.main.setBounds(0, 0, 5500, 600);
this.physics.world.setBounds(0, 0, 5500, 600);
this.add.image(0, 0, 'sky').setOrigin(0).setScrollFactor(1);
this.add.image(1000, 0, 'sky').setOrigin(0).setScrollFactor(1);
this.add.image(3899.5, 0, 'sky').setOrigin(0).setScrollFactor(1);
this.add.image(2000, 0, 'reverse').setOrigin(0).setScrollFactor(1);
cursors = this.input.keyboard.createCursorKeys();
player = this.physics.add.sprite(100, 300, 'dude').setGravity(0, 300);
this.cameras.main.startFollow(player, true, 0.08, 0.08);
this.cameras.main.setZoom(1);
tubos= this.physics.add.staticGroup();
tubos.create(300, 20, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 62, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 177, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 219, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 261, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 303, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 345, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 387, 'tubo').setScale(0.45).refreshBody();
tubos.create(300, 429, 'tubo').setScale(0.45).refreshBody();
//------------------------------------------------------------
tubos.create(500, 20, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 62, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 104, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 146, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 188, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 230, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 345, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 387, 'tubo').setScale(0.45).refreshBody();
tubos.create(500, 429, 'tubo').setScale(0.45).refreshBody();
//------------------------------------------------------------
tubos.create(700, 70, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 110, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 150, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 190, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 230, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 270, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 310, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 350, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 390, 'tubo').setScale(0.44).refreshBody();
tubos.create(700, 430, 'tubo').setScale(0.44).refreshBody();
//------------------------------------------------------------
tubos.create(900, 20, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 60, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 150, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 190, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 230, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 270, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 310, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 350, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 390, 'tubo').setScale(0.44).refreshBody();
tubos.create(900, 430, 'tubo').setScale(0.44).refreshBody();
//------------------------------------------------------------
tubos.create(1100, 0, 'tubo').setScale(0.44).refreshBody();
tubos.create(1100, 100, 'tubo').setScale(0.44).refreshBody();
tubos.create(1100, 140, 'tubo').setScale(0.44).refreshBody();
tubos.create(1100, 180, 'tubo').setScale(0.44).refreshBody();
tubos.create(1100, 220, 'tubo').setScale(0.44).refreshBody();
tubos.create(1101, 260, 'tubo').setScale(0.44).refreshBody();
tubos.create(1141, 304, 'tubo').setScale(0.50).refreshBody();
tubos.create(1100, 350, 'tubo').setScale(0.44).refreshBody();
tubos.create(1100, 390, 'tubo').setScale(0.44).refreshBody();
tubos.create(1100, 430, 'tubo').setScale(0.44).refreshBody();
//------------------------------------------------------------
tubos.create(1300, 65, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 105, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 145, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 185, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 225, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 265, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 306, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 347, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 388, 'tubo').setScale(0.43).refreshBody();
tubos.create(1300, 429, 'tubo').setScale(0.43).refreshBody();
//------------------------------------------------------------
tubos.create(1400, 260,'tubo').setScale(0.43).refreshBody();
tubos.create(1450, 95, 'tubo').setScale(0.43).refreshBody();
tubos.create(1570, 95, 'tubo').setScale(0.43).refreshBody();
tubos.create(1690, 95, 'tubo').setScale(0.43).refreshBody();
tubos.create(1810, 95, 'tubo').setScale(0.43).refreshBody();
tubos.create(1930, 95, 'tubo').setScale(0.43).refreshBody();
//---------------------------------------------------
tubos.create(1977, 132, 'tubo').setScale(0.46).refreshBody();
tubos.create(1977, 174, 'tubo').setScale(0.46).refreshBody();
tubos.create(1977, 216, 'tubo').setScale(0.46).refreshBody();
tubos.create(1977, 258, 'tubo').setScale(0.46).refreshBody();
tubos.create(1977, 300, 'tubo').setScale(0.46).refreshBody();
tubos.create(1977, 342, 'tubo').setScale(0.46).refreshBody();
tubos.create(1977, 384, 'tubo').setScale(0.46).refreshBody();
tubos.create(1977, 427, 'tubo').setScale(0.46).refreshBody();
//------------------------------------------------------------
tubos.create(2350, 100, 'tubo').setScale(0.43).refreshBody();
tubos.create(2600, 160, 'tubo').setScale(0.43).refreshBody();
tubos.create(2850, 230, 'tubo').setScale(0.43).refreshBody();
tubos.create(3100, 290, 'tubo').setScale(0.43).refreshBody();
tubos.create(3350, 360, 'tubo').setScale(0.43).refreshBody();
tubos.create(3600, 360, 'tubo').setScale(0.43).refreshBody();
tubos.create(3850, 455, 'tubo').setScale(0.43).refreshBody();
tubos.create(3850, 395, 'tubo').setScale(0.43).refreshBody();
tubos.create(3850, 335, 'tubo').setScale(0.43).refreshBody();
tubos.create(3850, 275, 'tubo').setScale(0.43).refreshBody();
tubos.create(3850, 215, 'tubo').setScale(0.43).refreshBody();
tubos.create(3850, 155, 'tubo').setScale(0.43).refreshBody();
tubos.create(3850, 90, 'tubo').setScale(0.43).refreshBody();
//------------------------------------------------------------
tubos.create(4300, 130, 'tubo').setScale(0.43).refreshBody();
tubos.create(4300, 180, 'tubo').setScale(0.43).refreshBody();
tubos.create(4300, 230, 'tubo').setScale(0.43).refreshBody();
tubos.create(4300, 280, 'tubo').setScale(0.43).refreshBody();
tubos.create(4300, 330, 'tubo').setScale(0.43).refreshBody();
tubos.create(4300, 380, 'tubo').setScale(0.43).refreshBody();
tubos.create(4300, 430, 'tubo').setScale(0.43).refreshBody();
star = this.physics.add.staticGroup();
star.create(4300,90, 'star');
platforms = this.physics.add.staticGroup();
platforms.create(-225, 768, 'ground').setScale(2).refreshBody();
platforms.create(411, 768, 'ground').setScale(2).refreshBody();
platforms.create(1047, 768, 'ground').setScale(2).refreshBody();
platforms.create(1682, 768, 'ground').setScale(2).refreshBody();
platforms.create(4238, 768, 'ground').setScale(2).refreshBody();
platforms.create(4605, 768, 'ground').setScale(2).refreshBody();
//-----------------------------------------------------------------
platforms.create(2047.7,0,'ground').setScale(0.3).refreshBody();
platforms.create(2140, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2233, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2326, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2419, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2512, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2605, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2698, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2791, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2884, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(2977, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3070, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3163, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3256, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3349, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3442, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3535, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3628, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3721, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3814, 0, 'ground').setScale(0.3).refreshBody();
platforms.create(3872, 0, 'ground').setScale(0.3).refreshBody();
player.setBounce(0.1);
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
this.physics.add.collider(player, platforms);
this.physics.add.collider(player, tubos);
this.physics.add.overlap(player, star, collectStar, null, this);
info = this.add.text(10, 7, '', { font: '48px Arial', fill: '#ff0000' });
info2 = this.add.text(19, 50, '', { font: '48px Arial', fill: '#ff0000' });
timer = this.time.addEvent({ delay: 46000, callback: Gameover,callbackScope: this, });
info.setScrollFactor(0);
info2.setScrollFactor(0);
},
update: function ()
{
if ( player.x >= 2000 && player.x <=3915 ) {
player.angle = -180;
player.setGravity(0, -100);
if (cursors.left.isDown)
{
player.setVelocityX(-90);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(90);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.up)
{
player.setVelocityY(-1500);
}
}
else if (player.x <2000 || player.x>3915){
player.angle=0;
player.setGravity(0, 300);
}
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-470);
}
info.setText('Time: ' + Math.floor(46000 - timer.getElapsed()));
info2.setText('Lifes: ' + vida);
}
});
var Game2 = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function Game2 ()
{
Phaser.Scene.call(this, { key: 'game2' });
window.GAME = this;
var timer1;
var platforms;
var player;
var pipe;
var timer2;
pipes=null;
},
create: function ()
{
this.add.image(350, 280, 'sky2').setScale(1.1);
this.pipes = this.add.group();
this.physics.world.enable(this.pipes);
platforms = this.physics.add.staticGroup();
platforms.create(0, 535, 'ground2').setScale(0.6).refreshBody();
platforms.create(150, 535, 'ground2').setScale(0.6).refreshBody();
platforms.create(300, 535, 'ground2').setScale(0.6).refreshBody();
platforms.create(450, 535, 'ground2').setScale(0.6).refreshBody();
platforms.create(600, 535, 'ground2').setScale(0.6).refreshBody();
platforms.create(750, 535, 'ground2').setScale(0.6).refreshBody();
cursors = this.input.keyboard.createCursorKeys();
player = this.physics.add.sprite(100, 300, 'dude').setGravity(0, 300);
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
this.physics.add.collider(player, platforms);
info = this.add.text(10, 10, '', { font: '48px Arial', fill: '#ff0000' });
info3 = this.add.text(19, 50, '', { font: '48px Arial', fill: '#ff0000' });
timer2 = this.time.addEvent({ delay: 90000, callback: ganhar,callbackScope: this, });
timer1 = this.time.addEvent({ delay: 2000, callback: this.addRowOfPipes,callbackScope: this, loop: true });
},
update: function ()
{
if (cursors.left.isDown)
{
player.setVelocityX(-130);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(130);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown)
{
player.setVelocityY(-250);
}
if (cursors.down.isDown)
{
player.setVelocityY(300);
}
info3.setText('Lifes: ' + vida);
info.setText('Time: ' + Math.floor(90000 - timer2.getElapsed()));
},
addOnePipe: function(x, y) {
pipe = this.physics.add.image(x, y, 'br').setScale(1.1);
pipe.setVelocityX(-150);
this.pipes.addMultiple(pipe);
pipe.checkWorldBounds = true;
pipe.outOfBoundsKill = true;
var collider= this.physics.add.overlap(player, pipe, perder, false, this);
},
addRowOfPipes: function() {
var hole = Phaser.Math.Between(1, 6);
//var hole=6;
for (var i = 0; i < 8; i++)
if (i != hole && i != hole + 1){
this.addOnePipe(760, i *54 + 40);
}
},
});
function perder(player,pipe)
{
vida--;
if (vida==0){
this.scene.start('gameover');
}
else(this.scene.start('game2'));
collider.active = false;
}
function ganhar ()
{
this.scene.start('gamewon2');
}
function collectStar (player, star)
{
star.disableBody(true, true);
drums.stop();
synth2.stop();
this.scene.start('gamewon');
}
function Gameover ()
{
drums.stop();
synth2.stop();
vida--;
if (vida==0){
this.scene.start('gameover');
}
else(this.scene.start('game'));
}
var GameWon = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function GameWon ()
{
Phaser.Scene.call(this, { key: 'gamewon' });
window.OVER = this;
},
create: function ()
{
music = this.sound.addAudioSprite('kyobi');
music.play('title');
var map2= this.add.image(400,300,'back');
this.add.sprite(580, 380, 'final').setScale(0.8);
var play4= this.add.image(151,481,'play').setScale(0.2);
this.add.text(96, 460, 'Map2', { font: '50px Courier', fill: '#000000' });
this.add.text(40, 30, 'Congratulations!!!', { font: '45px Arial', fill: '#ffffff' });
this.add.text(40, 100, 'You won Map 1.', { font: '39px Courier', fill: '#ffffff' });
this.add.text(40, 150, 'Try to beat the 2 Map.', { font: '39px Courier', fill: '#ffffff' });
play4.setInteractive();
play4.once('pointerup', function () {
music.stop();
this.scene.start('game2');
}, this);
}
});
var GameWon2 = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function GameWon2 ()
{
Phaser.Scene.call(this, { key: 'gamewon2' });
window.OVER = this;
},
create: function ()
{
var map3= this.add.image(400,300,'back');
this.add.sprite(580, 380, 'final').setScale(0.8);
var play6= this.add.image(151,481,'play').setScale(0.2);
this.add.text(96, 460, 'Menu', { font: '50px Courier', fill: '#000000' });
this.add.text(40, 30, 'Congratulations!!!', { font: '45px Arial', fill: '#ffffff' });
this.add.text(40, 100, 'You won Map 2.', { font: '39px Courier', fill: '#ffffff' });
this.add.text(40, 150, 'More maps coming soon.Be Aware', { font: '39px Courier', fill: '#ffffff' });
play6.setInteractive();
play6.once('pointerup', function () {
this.scene.start('mainmenu');
}, this);
}
});
var GameOver = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function GameOver ()
{
Phaser.Scene.call(this, { key: 'gameover' });
window.OVER = this;
},
create: function ()
{
var back= this.add.image(400,300,'back');
this.add.sprite(397.5, 230, 'imgfinal').setScale(0.75);
var play5= this.add.image(395,508,'play').setScale(0.22);
this.add.text(311, 490, 'Restart', { font: '40px Courier', fill: '#000000' });
play5.setInteractive();
play5.once('pointerup', function () {
this.scene.start('mainmenu');
}, this);
}
});
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade',
arcade: {
debug: false
}
},
scene: [ Preloader, MainMenu, Game, Game2, Rules, GameOver,GameWon, GameWon2 ]
};
var synth2;
var drums;
var music;
var vida=3;
var game = new Phaser.Game(config);
var blocked = false;

multiple tween on single node kinetic.js

I have a bar diagram for a polling system.i want two transition(tween) effects on events they are following
Mouse over OR check box check
Click button
I am using the same node for tween.tween.play() is working fine but on reverse the y cordinate that i gave in tween constructor not working.
checkout my jsfiddle
var stagewidthbywindow = 1000;
var stagesetting = {
container: "container_1_1_0",
width: stagewidthbywindow,
height: 50
};
var rectwidth0 = 0;
var rectSum = 0;
var stage110 = new Kinetic.Stage(stagesetting);
var layer110 = new Kinetic.Layer();
var group110 = new Kinetic.Group();
layer110.add(group110);
function increasestage() {
var myChecker = setInterval(function () {
var stage_height = stage110.getHeight();
if (stage_height == 250) {
clearInterval(myChecker);
} else {
stage110.setAttr("height", stage_height + 2.5);
}
}, 10);
}
var rectwidth1 = stagesetting.width * 0.5;
rectSum += rectwidth0;
var rectObject1 = {
x: rectSum,
y: 0,
width: rectwidth1,
height: 50,
fill: "#DA4B4B",
stroke: "#ffffff",
strokeWidth: 2,
opacity: 1
};
var shadeObject = {
x: rectSum,
y: 0,
width: stagewidthbywindow,
height: 50,
fill: "#f3f3f3",
stroke: "#f3f3f3",
strokeWidth: 1,
opacity: 1
};
var shade111 = new Kinetic.Rect(shadeObject);
var rect111 = new Kinetic.Rect(rectObject1);
rectSum += rectwidth1;
var ansOption111 = new Kinetic.Text({
x: rect111.getX() + 10,
y: rect111.getY() + 10,
text: "iPhone 5s",
fontSize: 14,
fontFamily: "Merriweather Sans",
width: rect111.getWidth(),
align: "left",
fill: "#ffffff"
});
var ansPercentage111 = new Kinetic.Text({
x: rect111.getX() + 10,
y: 30,
text: "50%",
fontSize: 15,
fontFamily: "Merriweather Sans",
width: rect111.getWidth(),
fontStyle: "bold",
align: "left",
fill: "#ffffff"
});
group110.add(shade111);
group110.add(rect111);
group110.add(ansOption111);
group110.add(ansPercentage111);
rect111.tween = new Kinetic.Tween({
node: rect111,
scaleX: 1,
scaleY: 5,
easing: Kinetic.Easings.Linear,
duration: .5
});
ansOption111.tween = new Kinetic.Tween({
node: ansOption111,
scaleX: 1.5,
scaleY: 1.5,
x: rect111.getX() + 20,
y: 20,
easing: Kinetic.Easings.Linear,
duration: .5,
});
ansPercentage111.tween = new Kinetic.Tween({
node: ansPercentage111,
x: rect111.getX() + 20,
y: 100,
scaleX: 3,
scaleY: 3,
easing: Kinetic.Easings.Linear,
duration: .5,
});
rect111.on("mouseover touchstart", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 250);
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
}
});
rect111.on("mouseout touchend", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 50);
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
}
});
ansOption111.on("mouseover touchstart", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 250);
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
}
});
ansOption111.on("mouseout touchend", function (evt) {
if (!$("#sample_size1").is(":checked") &&
$("#orientation_1_1_0").val() == "horizontal") {
stage110.setAttr("height", 50);
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
}
});
$("#sample_size1").change(function () {
if ($(this).is(":checked") && $("#orientation_1_1_0").val() == "horizontal") {
var scaleFactor = 5;
increasestage();
stage110.draw();
rect111.tween.play();
ansOption111.tween.play();
ansPercentage111.tween.play();
} else if (!$(this).is(":checked") && $("#orientation_1_1_0").val() == "horizontal") {
rect111.tween.reverse();
ansOption111.tween.reverse();
ansPercentage111.tween.reverse();
setTimeout(function () {
stage110.setAttr("height", 50);
}, 600);
}
});
var rectangle111 = new Kinetic.Tween({
node: rect111,
duration: .5,
x: 0,
y: 20 * 1 + 18 * 0,
width: rectwidth1,
height: 20,
opacity: 1,
scaleX: 1
//scaleY: 0.4
});
var shadetween111 = new Kinetic.Tween({
node: shade111,
duration: .5,
x: 0,
y: 20 * 1 + 18 * 0,
//width: stagewidthbywindow,
height: 20,
opacity: 1,
scaleX: 1
});
var answerOption111 = new Kinetic.Tween({
node: ansOption111,
duration: .5,
x: 0,
y: (40 * 0),
width: 150,
height: 15,
opacity: .9,
strokeWidth: 2,
scaleX: 1
});
function call_answerPercentage111() {
var answerPercentage111 = new Kinetic.Tween({
node: ansPercentage111,
x: 160,
y: (40 * 0),
width: 150,
height: 18,
opacity: .9,
duration: 0.5,
strokeWidth: 2,
scaleX: 1
});
return answerPercentage111;
}
document.getElementById("arrow110").addEventListener("click", function () {
if ($("#orientation_1_1_0").val() == "horizontal") {
$("#arrow110").addClass("btn-arow-down");
stage110.setAttr("height", 4 * 40);
$("#orientation_1_1_0").val("vertical");
if ($("#sample_size1").is(":checked")) {
console.log("destroy");
}
ansPercentage111.setFill("black");
ansOption111.setFill("black");
rectangle111.play();
shadetween111.play();
answerOption111.play();
var answerPercentage111 = call_answerPercentage111();
answerPercentage111.play();
layer110.draw();
} else if ($("#orientation_1_1_0").val() == "vertical") {
$("#arrow110").removeClass("btn-arow-down");
$("#orientation_1_1_0").val("horizontal");
ansPercentage111.setFill("white");
ansOption111.setFill("white");
rectangle111.reverse();
shadetween111.reverse();
answerOption111.reverse();
var answerPercentage111 = call_answerPercentage111();
answerPercentage111.reverse();
answerPercentage111.destroy();
layer110.draw();
setTimeout(function () {
stage110.setAttr("height", 50);
}, 1000);
}
}, false);
stage110.add(layer110);
On calling call_answerPercentage111 you are creating new tween. You can not reverse tween that is not played with play() function. Also you are calling destroy() method after reverse() - you can do this ONLY after tween is done (or you will stop the tween).
http://jsfiddle.net/ynNUN/3/

Resources