I'm practicing some Javascript. I used a var to create an object (because before that I created a class) and now I'm trying to do the same, but instead of using a variable I want to use an array.
While this is working:
function start (){
var brick = new create_class_brick(10, 400, 10, 400, 0, 2.5, "brick");
window.setInterval(function(){brick.MOVE_BRICK();}, 25);
the MOVE_BRICK function doesn't work here:
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
for ( i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick();
vector_bricks[i].MOVE_BRICK();
}
}
Can anyone give me a hand?
Do you forget to call the function move_brick with window.setInterval? So it's not looping.
Simply change where you put the interval.
You get an error if you put it inside the for loop.
Meaning you should have this :
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
setInterval(function(){
for (var i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick(); // Not sure what this is for
vector_bricks[i].MOVE_BRICK();
}
}, 25);
}
Related
I'm trying to make some kind of a notification/message box giving players hints to advance the gameplay, here is the code
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec');
Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Phaser.Display.Align.In.Center works well with the first line of my text but doesn't center my 2nd line. How do I fix it?
Phaser.Display.Align.In.Center just aligns single GameObjects. Both lines of text are in the same GameObject noti_txt.
If you want to align both textlines, you could use the align property of the text GameObject, on creating it. { align: 'center' }
(Or after creation with the property setStyle here a link to the documentation)
Here the adapted Code:
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec', { align: 'center' });
Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Alternatively / Extra:
I would only recommended it, if you are reusing text blocks (or dramatic effect), you could split the text, into two GameObjects.
But for that to work you would also have use the function Phaser.Display.Align.To.BottomCenter:
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt1 = this.add.text(0, 0, 'Magic is not ready yet');
let noti_txt2 = this.add.text(0, 0, 'wait a sec');
// extra visual effect
this.tweens.add({
targets: noti_txt2 ,
alpha: 0,
ease: 'Power1',
duration: 1000,
yoyo: true,
repeat: -1,
});
Phaser.Display.Align.In.Center(noti_txt1, noti_bg);
// Just adding a minor horizontal offset
Phaser.Display.Align.To.BottomCenter(noti_txt2, noti_txt1, 0, 10);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I'm trying create new shapes that drop down into the canvas when you press the button for that shape. I'm using a CDN. Only two pages are my index and app.js. My canvas appears along with the buttons and the first ball drops down but whenever I press the button nothing happens. The console says "$" is undefined. Any help is greatly appreciated. Also, on my index page my CDN is in a script tag and comes before my app.js script tag.
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
var engine = Engine.create();
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 400,
wireframes: false
}
});
var topWall = Bodies.rectangle(400, 0, 810, 30, { isStatic: true });
var leftWall = Bodies.rectangle(0, 200, 30, 420, { isStatic: true });
var ball = Bodies.circle(460, 10, 40, 10);
var bottomWall = Bodies.rectangle(400, 400, 810, 30, { isStatic: true });
World.add(engine.world, [topWall, leftWall, ball, bottomWall]);
Engine.run(engine);
Render.run(render);
var addCircle = function () {
return Bodies.circle(Math.random() * 400 + 30, 30, 30);
};
var addSquare = function () {
return Bodies.rectangle(Math.random() * 400 + 30, 30, 60, 60);
};
var addRect = function () {
return Bodies.rectangle(Math.random() * 400 + 30, 30, 100, 60);
};
This is where my issue is. I followed the tutorial as well.
$('.add-circle').on('click', function () {
World.add(engine.world, addCircle());
});
$('.add-square').on('click', function () {
World.add(engine.world, addSquare());
})
$('.add-rect').on('click', function () {
World.add(engine.world, addRect());
})
In createjs I'm trying to add elements to the stage but only when called by a function.
If I add this code into my onload init() function the code works:
function init()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
However if I add it like
function init()
{
loadScreen();
}
function loadScreen()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
I'm probably just doing something silly, any tips appreciated.
Thanks,
Remove the semicolon(;) after loadScreen() function defenition
function init()
{
loadScreen();
}
function loadScreen()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
Make sure that your variables are declared.
E.g.
var stage; var background;
And make sure that they are global.
window.onload = function(){
var stage;
var background;
function init(){
// create reference to stage and add 'tick' listener.
}
function loadScreen(){
// draw something onto the stage.
}
};
Check out this website for an example: http://createjs.com/docs/easeljs/modules/EaselJS.html.
I can see that you removed this line ->
myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);
Have you tried instantiating background inside init() and then passing the object to the load function?
I'm working on a simple game with Javascript, involving changes to an HTML5 canvas. Have a number (10+) of objects entered in an array:
var boxes = [];
boxes.push({
x: 0,
y:canvas.height - 370,
width: 400,
height: 20});
boxes.push({
x: 300,
y:canvas.height - 100,
width: 150,
height: 90});
The entire array is then run through an update function, which changes the x value depending on the player's position:
for (var i = 0; i < boxes.length; i++) {
if (boxes[1].x > -3000 + canvas.width) {
boxes[i].x -= robot.speed * modifier;
robot.x = canvas.width - 300;
};
};
When the player dies a reset function is run:
var reset = function () {
robot.x = 0;
robot.y = 500;
++deaths;
};
I'm looking for a way to reset all the values of the boxes array to the original values when this function runs, essentially resetting the map, without having to enter each one manually, ie boxes[1].x = 300
https://jsfiddle.net/to31b612/
Simply initialize from a single function:
var boxes;
initBoxes();
function initBoxes() {
boxes = [];
boxes.push({
x: 0,
y:canvas.height - 370,
width: 400,
height: 20});
boxes.push({
x: 300,
y:canvas.height - 100,
width: 150,
height: 90});
}
Then just recall initBoxes() every time you need to initialize it.
You could just initialize boxes inside the reset() function, and make sure to call call reset() before the first run of the game, too.
var deaths = -1;
var boxes = [];
function reset() {
robot.x = 0;
robot.y = 500;
boxes = [{
x: 0,
y:canvas.height - 370,
width: 400,
height: 20
}, {
x: 300,
y:canvas.height - 100,
width: 150,
height: 90
}];
++deaths;
}
It sounds like you want to use the Memento Pattern
just use 2 variables
var initBoxes = [];
initBoxes.push({
x: 0,
y:canvas.height - 370,
width: 400,
height: 20});
initBoxes.push({
x: 300,
y:canvas.height - 100,
width: 150,
height: 90});
var boxes = initBoxes;
Then when ever you need to reset boxes just
boxes = initBoxes;
I am most likely misusing this call back feature but in the following code, the "testCircle" performs no animation before disappearing.
var paper = Raphael(0, 0, 1280,600);
var testCircle = paper.circle(300, 300, 50);
testCircle.animate({
cx: 700
}, 1000, testCircle.remove())
I want the animation to actually finish before the circle is removed. Am I misusing this function?
Here you go: DEMO
var paper = Raphael(0, 0, 1280,600);
var testCircle = paper.circle(300, 300, 50).attr('fill','red');
testCircle.animate({cx: 700}, 1000, hideCircle);
function hideCircle()
{
testCircle.remove();
}