Issue with key down - JS


Joined
Nov 25, 2020
Messages
3
Reaction score
0
Hello,
I'm following this tutorial :

I am stuck near the 8:45 mark where the guy tests his left and right arrow keys on the moto.....because when the guy added the line "this.rvel += (k.ArrowLeft - k.ArrowRight) * 0.05" on the 8:20 mark, and I did the same, my code isn't working in the sense that when I press the right or left arrow keys, the moto doesn't rotate accordingly. And there aren't any errors. (see the commented line):

my code:

Code:
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 500;
c.height = 350;

document.body.appendChild(c);

var perm = [];
while(perm.length < 255){
    while(perm.includes(val = Math.floor(Math.random() * 255)));
    perm.push(val);
}

var lerp = (a, b, t) => a + (b-a) * (1 - Math.cos(t * Math.PI))/2;


var noise = x=>{
    x = x * 0.01 % 255;
    return lerp(perm[Math.floor(x)], perm[Math.ceil(x)], x - Math.floor(x));
}

var player = new function(){
    this.x = c.width/2;
    this.y = 0;
    this.dy = 0;
    this.rot = 0;
    this.rvel = 0;
    
    this.img = new Image();
    this.img.src = "https://image.flaticon.com/icons/png/512/10/10027.png"
    this.draw = function(){
        var pl = c.height - noise(t + this.x) * 0.25;
        var p2 = c.height - noise(t + 5 + this.x) * 0.25;
        
        var grounded = 0;
        if (pl - 15 > this.y){
            this.dy += 0.1;
        } else {
            this.dy -= this.y - (pl - 15);
            this.y = pl - 15;
            grounded = 1;
            
        }
        var angle = Math.atan2((p2 - 15) - this.y, (this.x + 5) - this.x);
        this.y += this.dy;
        
        if (grounded){
            this.rot -= (this.rot - angle) * 0.5;
            this.rvel = this.rvel - (angle - this.rot);
        }
        
        // this.rvel += (k.ArrowLeft - k.ArrowRight) * 0.05;  --> the line I'm referring to
        this.rot -= this.rvel * 0.1;
        
        
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rot);
        ctx.drawImage(this.img, -15, -15, 30, 30);
        ctx.restore();
    }
}

var t = 0;
var speed = 8;
var k = {ArrowUp: 0, ArrowDown: 0, ArrowLeft: 0, ArrowRight: 0};

function loop(){
    t += speed;
    ctx.fillStyle = "#19f";
    ctx.fillRect(0, 0, c.width, c.height);
    
    
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(0, c.height);
    for (let i = 0; i < c.width; i++){
        ctx.lineTo(i, c.height - noise(t + i) * 0.25);
        
    }
    ctx.lineTo(c.width, c.height);
    ctx.fill();
    
    player.draw();
    requestAnimationFrame(loop);
}

onkeydown = d => k[d.key] = 1;
onkeyup = d => k[d.key] = 0;


loop();

Can someone pls help? Thanks.
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
26
Reaction score
4
I would love to help, but I have trouble following youtube from a guy that can't afford a mike. AND uses the most irritating music.
He added "this.rSpeed +=" to the left side of the equation and you added "this.rvel" leaving me to wonder how many other things did you change. Plus, I have no idea what is suppose to happen when the left arrow key is pressed.

My suggestion at this point is to reprogram from the video and see if it works the second time (Don't change what he asks you to do!)
You now know what is happening or suppose to happen as each section is added to the code. It is here that you should be testing that the sections are working correctly.

Good luck. We're here if you need help after the second coding.
 
Joined
Nov 25, 2020
Messages
3
Reaction score
0
Hi, I re-watched the video and re-programmed and this time it worked. Thanks so much !
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
26
Reaction score
4
Glad to hear that. I just got back from Thanksgiving with the family and was going to try following the video myself. So happy I didn't need to do that.
Happy T day adibak

and to everyone else here!!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top