I'm creating a simple game with a character that can jump, move right, and move left.
I'm having trouble with the jump function, which uses a setInterval.
Here is the function:
jumpUp: function (speed) {
setInterval(function () {
this.yPos += 10;
this.playerElement.css("top", '-=' + 10);
alert("dude, im not moving....so stop trying"); //for some reson, this line works and other dont.
}, 100);
}
I should add that the code works without the setInterval. I really don't have any idea why it's not working when I add the setInterval.
My questions:
What is stopping this code from running?
Is setInterval a good way to make a character look like it jumping and landing? Or should i use different method?
EDIT 1:
fiddle
The problem is your use of this. When the function you pass to setInterval is called, this will be the global object (window in browsers). You need to preserve the this value from when you call setInterval. One way of doing this is to store the value of this into a variable, which will then be closed over by the anonymous function (which is a closure):
jumpUp: function (speed) {
var self = this;
setInterval(function () {
self.yPos += 10;
self.playerElement.css("top", '-=' + 10);
}, 100);
}
EDIT:
To answer your second question, a better approach to animating a sprite (like your character) is to store the character's velocity, and then have a single game loop that will calculate the next position of the sprite based on that information. A very simple example would look like:
// Somewhere else in the code:
function tick() {
// move player by player.velocity.x and player.velocity.y
// code to decelerate player gradually, stop player when they hit a wall/floor, etc...
// A very simple example:
if (player.velocity.y > 0) {
player.velocity.y -= 1
}
// call next tick() (setTimeout, or preferably requestAnimationFrame)
}
// In the player code:
velocity: {x: 0, y: 0},
jumpUp: function () {
this.velocity.y -= 10;
},
moveRight: function () {
this.velocity.x += 10;
}
As darma and danronmoon pointed out, you have a scoping problem with this.
Try the following code:
jumpUp: function (speed) {
var that = this;
setInterval(function () {
that.yPos += 10;
that.playerElement.css("top", '-=' + 10);
}, 100);
}
I added a variable, that, to maintain the reference to whatever this is supposed to be.
In addition to your closure problem, this is probably going to cause choppy jumping.
Here's another pattern that watches the clock to see how much time has elapsed between each call to the function (setInterval is not consistent):
jumpUp: function (speed) // speed in pixels per second
{
var last = +new Date();
var c = this;
var jumptick = function ()
{
var interval = +new Date() - last;
c.yPos += speed * interval;
c.playerElement.css("top", c.yPos);
if (/* condition for reaching maximum height */) speed = -speed;
if (! /* condition for reaching ground */) setTimeout(jumptick);
// could add an interval but this will lead to fastest frame rate
};
jumptick();
}
Setinterval is not a good way to achieve this because it will use a lot a ressources.
You also need to consider the framerate when you are moving your character, otherwise he will move fast on a fast machine/browser and slow on a slow machine.
A good method is using the requestAnimationFrame method. You can find a javascript file on google that will make it crossbrowser compatible.
Then, everytime your function is called, you will need to check the time elapsed between to frame and move your sprites accordingly. It's more work but that way, your game will run at the same pace on any machine.
Related
Is there a way to temporarily modify the speed of something with window.requestAnimationFrame in the middle of say, a classic Snake game?
See the following code:
class Game {
constructor(snake) {
this.snake = snake;
}
draw() {
this.snake.slither()
this.snake.draw()
}
start() {
document.addEventListener("keydown", keyDownEvent);
let x = 8;
interval = setInterval(this.draw.bind(this), 1000 / x);
}
}
In the above example, if I wanted to temporarily change the speed, I would just change the interval speed, and then after setTimeOut, return the speed back to normal.
Unfortunately, and for the best, you cannot change the speed of the requestAnimationFrame speed as it is calculated by the browser to ensure a good performance.
You can however, like you described yourself, change an interval speed. But setting setInterval doesn't allow the interval speed to be changed, unless being stopped and restarted. Alternatively you could use a function which uses setTimeout and calls itself after each timeout is being called.
The setTimeout should use a variable or property that is available in all function scopes to use and modify the interval rate.
let timeout = null;
let interval = 0;
function render() {
// Render your animation.
}
function draw() {
timeout = setTimeout(() => {
requestAnimationFrame(render);
draw();
}, interval);
}
function stop() {
if (timeout !== null) {
clearTimeout(timeout);
}
}
function changeDrawSpeed(times) {
interval = 100 * times;
}
draw();
setTimeout(changeDrawSpeed, 1000, 50);
setTimeout(changeDrawSpeed, 3000, 0);
Edit: I just forked and edited a bit a previous example of mine for you:
https://jsfiddle.net/ibowankenobi/2k81ya5q/
You can certainly write a routine to control your game frames, I have a small library for instance where I can do:
rafx.async({frame:0})
.animate(function(frames){
let frame = ++frames.frame;
if (!(frames % 3)) { //skip every third frame
return frames;
}
//game logic here
}).until(function(frames){
//return true to quit;
}).then(//whatever follows)
You can also pass additional variables that modify in-run-time how animation changes (frames or whatever).
https://github.com/IbrahimTanyalcin/RafX
I have just made a version of the "10 PRINT" to try to develop my JS skills.
In the end i thought it would be nice to add some sliders and let the viewers adjust some of the parameters to see what effect they have.
You can see what i came up with here: 10PRINT, by Boguz, on GitHub
One of the sliders i wanted to add changes the speed of the animation, but i can get it to work.
To trigger the animation i am using a setInterval like this:
setInterval(function(speed){
draw();
}, speed);
The variable speed is initialized when the document loads
let speed = 50;
and then i am trying to update it (when the viewer moves the slider) like this:
const speedControl = document.querySelector("#speed-slider");
speedControl.oninput = function() {
let speedVal = speedControl.value;
speed = Number(speedVal);
resetDraw();
}
When i log the speed variable i get the right values in the console, but somehow it is not having the desired effect.
If you need to see some more code, please ask me, or take a look at the GitHub Repository.
Any help is very welcome.
Thank you!
In your script store the setInterval value so you can clear it.
// SET INTERVAL
let drawInterval = setInterval(function(){
draw();
}, speed);
then in your resetDraw clear the interval and re set it (it will now use the new speed)
function resetDraw() {
context.clearRect(0, 0, canvas.width, canvas.height);
xpos = 0;
ypos = 0;
draw();
clearInterval(drawInterval);
drawInterval = setInterval(draw, speed);
}
You could also completely remove the initial setInterval and just call the resetDraw once to start.
Clear your old one first, then make a new one
function makeInterval(speed) {
const intervalId = setInterval(function(){
draw();
}, speed);
return intervalId;
}
let intervalId = makeInterval(speed);
...oninput = function() {
clearInterval(intervalId);
let speedVal = speedControl.value;
speed = Number(speedVal);
intervalId = makeInterval(speedVal);
}
The interval time passed to setInterval can't be live updated, it's baked in to the call when you make it.
Hellow
I ran into a little problem i don't know how to stop my add function when it reaches some Y position on my web, can some body help me whit it!!
var scroll = function(){
var positionYTop = 0,
speed = 50,
links = document.getElementsByTagName('a');
function timer() {
var clock = setTimeout(add, 200)
}
function add() {
window.scrollTo(0, positionYTop += speed);
timer();
}
add();
}
It's not clear exactly what you're trying to do with your specific code, but the general answer for stopping a timer is that you save the result from setTimeout() into a variable that is in a high enough scope or on a property of an object that you can later access it and then use it to call clearTimeout(). That will stop the timer.
In your current code, the variable clock is local only to the timer() function so as soon as that function finishes, it will be out of scope and unreachable. You likely need to move the clock variable to a higher scope where it will be accessible from whatever code you want to stop the timer from.
Or, if the issue you're asking about is how to tell your add() function to stop issuing new timer() calls when it has reached a certain position, then you can just add an if() statement to your add() function and not call timer() again if some condition has been met.
For example:
function add() {
window.scrollTo(0, positionYTop += speed);
if (window.scrollTop < 400) {
timer();
}
}
A common approach to this is to start off by setting the scroll in advance, along with a transform/translateY in the other direction to offset the effect of the scroll, then transition the transform down to zero.
Basically, in this day and age, we want the browser/CSS to do the transition. It's less code, and using transform it will be much smoother.
Here's a very rough idea (not tested, you will need to play with it):
body.start {
transform: translateY(-400px);
}
body.transitioned {
transform: translateY(0);
transition: transform 1s;
}
function scroll() {
document.body.scrollTop; = 400;
document.body.classList.add('start');
setTimeout(function() { document.body.classList.add('transitioned'); }, 100);
}
I realize a project for the master degree.
I must create a three js space invaders game.
The project is well underway but i have a problem. My aliens ( THREE.Mesh object ) must be able to fire randomly.
To carry out that, i've created a function which should draw a random number. This function works.
The problem comes the animate() function. In fact i can't put a SetTimeOut() the animate() function.
The SetTimeOut() works the first time animate() is called but after there is no timer. The code executing continually without waiting the timer.
Maybe the problem coming because animate is continually called by requestAnimationFrame();
My code :
Index.html =>
if (!init())animate();
function animate(){
requestAnimationFrame( animate );
level1.animate();
render();
}
Level.js =>
Level.prototype.animate = function()
{
//Timer doesn't work
var that = this;
//Just a test with a simple console.log test
setTimeout(function() { console.log("test"); },10000);*/
this.sky.rotation.x -=0.005;
this.spaceship.fire();
for (var i=0; i<this.ducks.length;i++)
{
this.ducks[i].move();
if (this.ducks[i].is_ready_to_fire())
this.ducks[i].fire_if_ready();
}
};
With this example the program will wait 10 seconds the first time before print "test" and after the first call, print "test" without waiting.
Have you any ideas ?
Thank you very much.
Sorry for my poor english.
The question if you need a timer for your purpose.
If I understand your problem correctly, you need the aliens to fire after a random amount of time.
If you don't care about the exact amount of time and only about the aliens shooting at random occasions, I'd use a counter on each alien to count the frames until it shoots.
So your code will look something like this:
var MAX_FRAMES_TO_WAIT = 600000;
Alien.prototype.init = function() {
this.framesUntilFire = Math.round(Math.random() * MAX_FRAMES_TO_WAIT);
}
Alien.prototype.fireWhenReady = function() {
if(--this.framesUntilFire === 0) {
this.fire();
this.framesUntilFire = Math.round(Math.random() * MAX_FRAMES_TO_WAIT);
}
}
function animate() {
requestAnimationFrame(animate);
/* ... */
for (var i=0; i<this.ducks.length;i++)
{
this.ducks[i].move();
this.ducks[i].fireWhenReady();
}
That should do the trick. Be aware that this will mean that the enemies fire quicker when the framerate is higher and slower when the framerate should drop.
You can counter that with counting the framerate as well and using it as a divider to level it out.
I hope that helped you a bit!
You can avoid setting a new timer every frame by simply resetting a new timer once the previous one has finished. A simple solution for this is recursive:
Level.prototype.fireDelayed = function() {
setTimeout(function() {
if (!this.currentLevel) {
return;
}
this.fireDelayed();
this.fire();
}.bind(this), Math.random() * 1000);
};
It simply stops firing if the level is no longer the currentLevel.
Does that make sense?
I'm just trying some JS animations, and I have animated a box that moves within borders, but I would like the animation to stop when the box hits one of the borders. This is one of the functions I use:
function AnimMoveRight() {
var interval = setInterval("moveRight(10)", 40);
if (hitRight == true) {
clearInterval(interval);
}
}
The moveRight(10) changes the box'position for 10 pixels to the right. hitRight is set true when the box hits the right border. Well, obviously, this code doesn't work, it just keeps on looping the moveRight() function. Now, my question is, how do I cancel the interval from within the AnimMoveRight() function?
function AnimMoveRight() {
var interval;
function fnc(){
if (hitRight == true) {
window.clearInterval(interval);
}
else{
moveRight(10);
}
}
interval = setInterval(fnc, 40);
}
One option would be to get rid of setInterval altogether and just call setTimeout every iteration that doesn't result in a border hit:
function AnimMoveRight() {
// Do stuff here
if (!hitRight) {
var nextCall = setTimeout("moveRight(10)", 40);
}
}
Use setTimeout instead of setInterval for greater control.
Use functions instead of strings when setting timers.
The common convention is to start function names with a lower case letter.
Directly check truthy/falsy expressions instead of comparing them to Booleans.
function animMoveRight() {
moveRight(10);
if (!hitRight) {
setTimeout(animMoveRight, 40);
}
}
I'd say, just move clearInterval(); out of the AnimMoveRight(); and do a global check for hitRight. And, if it's true, then clear the interval.
Or, define the interval variable in global scape, and on AnimMoveRight(); set it. Then you could clear it within AnimMoveRight(); too. Haven't tested neither, but I think both options would work.
If you check to see if it has hit the right before moving it will only call the animate function if it has yet to hit the right side, I chaged the function to setTimeout, I think this fits the task better.
function AnimMoveRight() {
if (hitRight !== true) {
moveRight(10);
setTimeout(AnimMoveRight,40);
}
}
Save the interval handle as a global, and check, within moveRight, if it needs to be canceled and if so cancel it there.
Better yet, use a closure so that the moveRight function can get to the interval handle without having to make it a global.
var interval = setInterval(function(){moveRight(10, interval);}, 40);
Use this:
function AnimMoveRight() {
var interval;
function animate() {
var hitRight = moveRight(10);
if (hitRight)
clearInterval(interval);
}
interval = setInterval(animate, 40);
}
Note that your moveRight shall return true|false.
You'll need to cancel the interval from within moveRight()*. The trick is letting moveRight() know what the intervalId is. Do you need to expose moveRight() as public? If not, you could put it inside AnimMoveRight:
function AnimMoveRight() {
function moveRight(n) {
// do stuff
if (hitRight) {
clearInterval(interval);
}
}
var interval = setInterval(function() { moveRight(10); }, 40);
}
Other options including passing interval as a parameter to moveRight:
var interval = setInterval(function() { moveRight(10, interval); }, 40);
Or do it right after the moveRight() call:
var interval = setInterval(function() {
moveRight(10);
if (hitRight) {
clearInterval(interval);
}
}, 40);
* This last one actually does cancel the interval from within AnimMoveRight(), as you requested.