I have a JavaScript code that I am going to use for an animated train map.
I have a loop that goes up and down, but I would like it to stop for 10 seconds every 20px, and then resume it's movement.
How do I accomplish this?
`window.onload = () => {
startSetTrain0Animation();
startSetTrain1Animation();
};
function startSetTrain0Animation() {
const refreshRate = 1000 / 60;
const maxXPosition = 470;
let rect = document.getElementById('rect0');
let speedX = 0.02;
let positionX = 25;
window.setInterval(() => {
positionX = positionX + speedX;
if (positionX > maxXPosition || positionX < 25) {
speedX = speedX * (-1);
}
rect.style.top = positionX + 'px';
}, refreshRate);
}`
There are typically two options to handle this:
Use a flag to indicate the state of the loop
Store a reference to the setInterval() function so that you can clear/stop via the clearInterval() function and later restart.
Using a Flag
Using a flag would be as simple as it sounds. Simply declare a variable and it would dictate if the body of the loop is executed or not:
// Flag to pause animation (change its value to toggle the animation)
var paused = false;
// Omitted for brevity
window.setInterval(() => {
// If you are paused, don't do anything
if (paused) {
return;
}
positionX = positionX + speedX;
if (positionX > maxXPosition || positionX < 25) {
speedX = speedX * (-1);
}
rect.style.top = positionX + 'px';
}, refreshRate);
This is the simplest of use cases, however you could easily adjust it to define some logic regarding when you would start/stop within the interval itself.
Explicitly Stopping / Restarting the Loop
Another option would be to store a reference to your loop in a variable when you declare it:
// Store a reference to your loop
var loop = setInterval(() => { ... }, refreshRate);
// Clear it when you need to stop it
window.clearInterval(loop);
If you prefer this approach, you'd likely elect to have a function that would wrap your "start loop" functionality such that you could do something like:
// Start the loop (wraps your setInterval() function)
var loop = startLoop();
// Stop the loop (could easily be renamed stopLoop())
window.clearInterval(loop);
I'm trying to make a basic FPS view using CSS.
Here's a demo of what I have so far: https://jsfiddle.net/w8q7xtmL/
In particular, movement is as simple as detecting keypresses, then:
// "self" is if the player object
requestAnimationFrame(step);
function step() {
if( keys[37]) self.direction += 2;
if( keys[39]) self.direction -= 2;
if( keys[38]) {
self.x += Math.cos(self.direction/180*Math.PI) * 4;
self.y -= Math.sin(self.direction/180*Math.PI) * 4;
}
if( keys[40]) {
self.x -= Math.cos(self.direction/180*Math.PI) * 4;
self.y += Math.sin(self.direction/180*Math.PI) * 4;
}
self.camera.style.transform = "rotateX(90deg) rotateZ("+(self.direction-90)+"deg) translate(-"+self.x+"px,-"+self.y+"px)";
requestAnimationFrame(step);
}
This works quite well, but there are a couple of issues.
Sometimes, elements don't stack correctly. The floor will be visible when walls should be blocking it from view, for instance.
Other times, the view will freeze completely, despite there being no errors in the console or anything that would indicate failure. It just... stops. Sometimes I can get it un-stuck by trying to move around a bit to "unstick" it, but other times I just have to reload the page.
Are there any discernible errors in my approach, or is the state of 3D transforms just not there yet for this kind of thing?
For the record, in case it matters, I'm developing with Google Chrome 49.
I can't believe I missed this.
Before:
self.camera.style.transform = "rotateX(90deg) rotateZ("+(self.direction-90)+"deg)
translate(-"+self.x+"px,-"+self.y+"px)";
After:
self.camera.style.transform = "rotateX(90deg) rotateZ("+(self.direction-90)+"deg)
translate("+(-self.x)+"px,"+(-self.y)+"px)";
Because, funnily enough, when self.x is negative, you get translate(--12px,0px) which is invalid.
I believe it is because you are detecting keys in a loop.
Instead, use this:
var rotval = 0;
window.addEventListener('keydown', function(e) {
key = e.keyCode
if(key === "left")
{
rotval = 1;
}
}, true);
window.addEventListener('keyup', function(e) {
key = e.keyCode
if(key === "left")
{
rotval = 0;
}
}, true);
then just add a variable to the loop function and when it is more or less than 0, it moves or rotates the camera!
function loop()
{
camera.rotation.y += rotval
camera.position.x //and so on
}
setInterval(loop,30)
Hope this helps :)
OK, so I am making a Pacman game using HTML5 . the problem is whenever I hit one of the brick blocks I want the sprite to stop moving but it keeps going until it hits the left most brick object.
how do I fix this? please help... here is the code I'm using to make the sprite stop.
here is all my code, if you have time, please parse it, and tell me what I have done wrong.
function init(){
var canvas=document.getElementById("ctx");
var ctx = canvas.getContext("2d");
var player = {sx:6,sy:6,sw:15,sh:15,x:230,y:377,w:20,h:20}
var ss = new Image();
ss.src="SS.png";
var right=false,left= true,up = false,down = false
var b = [{x:0,y:0,w:25,h:((canvas.height/2)-25)},{x:0,y:((canvas.height/2)),w:25,h:((canvas.height/2))},{x:50,y:25,w:50,h:50},{x:125,y:25,w:75,h:50},{x:225,y:0,w:25,h:75},{x:275,y:25,w:75,h:50},{x:375,y:25,w:50,h:50},{x:50,y:100,w:50,h:25},{x:125,y:100,w:25,h:125},{x:125,y:150,w:75,h:25},{x:175,y:100,w:125,h:25},{x:225,y:125,w:25,h:50},{x:325,y:100,w:25,h:125},{x:275,y:150,w:75,h:25},{x:375,y:100,w:50,h:25},{x:25,y:150,w:75,h:75},{x:375,y:150,w:75,h:75},{x:375,y:250,w:75,h:75},{x:25,y:250,w:75,h:75},{x:125,y:250,w:25,h:75},{x:325,y:250,w:25,h:75},{x:175,y:300,w:125,h:25},{x:225,y:325,w:25,h:50},{x:50,y:350,w:50,h:25},{x:75,y:350,w:25,h:75},{x:125,y:350,w:75,h:25},{x:275,y:350,w:75,h:25},{x:375,y:350,w:50,h:25},{x:375,y:350,w:25,h:75},{x:25,y:400,w:25,h:25},{x:125,y:400,w:25,h:75},{x:50,y:450,w:150,h:25},{x:275,y:450,w:150,h:25},{x:325,y:400,w:25,h:50},{x:425,y:400,w:25,h:25},{x:175,y:400,w:125,h:25},{x:225,y:425,w:25,h:50},{x:450,y:0,w:50,h:((canvas.height/2)-25)},{x:450,y:(canvas.height/2),w:50,h:((canvas.height/2))}];
function gen(){
for(var i=0;i<b.length;i++){
ctx.fillStyle="blue"
ctx.fillRect(b[i].x,b[i].y,b[i].w,b[i].h)
}
ctx.drawImage(ss,player.sx,player.sy,player.sw,player.sh,player.x,player.y,player.w,player.h)
}
function move(){
for(var i=0;i<b.length;i++){
//((a.x + a.width) < b.x)
if(left &&
player.x > b[i].x && (player.x + player.w) < (b[i].x + b[i].w) &&
player.y > b[i].y && (player.y + player.h) < (b[i].y + b[i].h)) {
// here you can tell that the user is colliding an object
player.x-=1
}
else {
}
}
}
function animate(){
ctx.save()
ctx.clearRect(0,0,canvas.width,canvas.width);
gen()
move()
ctx.restore();
}
var ani = setInterval(animate, 30)
}
window.addEventListener("load",function(){
init()
})
First, I can see a problem with the first part of your if condition:
left = true && ...
Should be
left === true && ...
Or even better
left && ...
Now for the collision part it usually is top-left or in the middle of the object
I'd suggest this top-left origin collision check:
if(left &&
(player.x >= b[i].x && player.x + player.w <= b[i].x + b[i].w) &&
(player.y >= b[i].y && player.y + player.h <= b[i].y + b[i].h) {
// here you can tell that the user is colliding an object
}
It checks several cases, this part
(player.x >= b[i].x && player.x + player.w <= b[i].x + b[i].w)
Will meet requirements if the player's x (with its width component) inside the occupied x range of the current object
The second part
(player.y >= b[i].y && player.y + player.h <= b[i].y + b[i].h)
Will meet requirements if the player's y (with its height component) is inside the occupied y range of the current object.
It will only execute the if statement if the condition is satisfied for both of the above cases.
You can tell if you should reposition the player on the left or on the right, by substracting the players x component to the object's x component, same goes for top or bottom with y component. The previous sentence is only valid if you move in a grid cell by cell.
This is my JSFiddle: http://jsfiddle.net/Au6br/13/
The problem is when I keep pressing keydown.up the player jump multiple times. What I want is to define a variable called JumpCount so when the player jump if the jump variable is greater than this value the jumping stop.
Character.prototype.Jump = function () { // Jumping
character.MaxJump += gravity;
character.y += character.MaxJump;
if (keydown.up) {
if (!character.jumping) {
character.jumping = true;
character.Pos = 4;
character.Row = 2;
character.h = 23;
character.MaxJump = -character.sp * 2.5;
}
}
if (character.y >= ch - character.h) { // if the character is under the bottom
character.y = ch - character.h;
character.jumping = false;
}
};
The first problem is that you can jump when you're not on the ground. It's because of the Onground function.
Replace this :
return this.y <= ch - this.h;
With this :
return this.y >= ch - this.h;
You should also use this function in Jump to avoid duplicate code :
if (character.Onground()) { // if the character is under the bottom
character.y = ch - character.h;
character.jumping = false;
}
Counting the jumps (I assume you want to make double jumps) can't work as long as you test if(keydown.up). When you press the UP key, this value will be true for more than one frame (depending on the duration the player presses it), so you'll never be able to correctly count the number of jumps. You must bind the jump on the onkeydown event, which is called once. After that, it will be simple to replace character.jumping with an integer.
I'd do it like this:
Character.prototype.Jump = function () {
character.MaxJump += gravity;
character.y += character.MaxJump;
if (keydown.up) {
if (character.CurrentJumps < character.JumpCount) {
character.CurrentJumps++
character.Pos = 4;
character.Row = 2;
character.h = 23;
character.MaxJump = -character.sp * 2.5;
}
}
if (character.y >= ch - character.h) {
character.y = ch - character.h;
character.CurrentJumps = 0
}
};
Were JumpCount is the max jumps, and CurrentJumps is the currently done jumps
And an example to set to double jump:
character.JumpCount = 2 // 2 Jumps
How about you add a variable called jumpCount or something that you increase every time the character jumps. Only allow the character to jump if jumpCount is smaller or equal to the number of jumps you like the character to be able to do. Then just set jumpCount to zero when the player touches the floor. This also gets rid of your jumping variable since this would mean the same thing as jumpCount === 0.