Moving a car with buttons

JavaScript
1

this is the javascript code:

window.addEventListener("load",init);

var ctx;
var car;
var on = false;

class auto{
    constructor(snelheid, x, y){
        this.height = 100;
        this.width = 150;
        this.snelheid = parseInt(snelheid);
        this.x = parseInt(x);
        this.y = parseInt(y);
    }

    teken(context){
        ctx.beginPath();
        ctx.rect(this.X,this.Y,this.width,this.height);
        ctx.fill();
                
        ctx.beginPath();
        ctx.arc(this.X+this.height/3, this.Y+this.height+this.height/3, this.height/3, 0, Math.PI * 2, true);
        ctx.stroke();
                
        ctx.beginPath();
        ctx.arc(this.X+this.width-this.height/3, this.Y+this.height+this.height/3, this.height/3, 0, Math.PI * 2, true);
        ctx.stroke();
    }

    Update(){
        if((this.X + this.snelheid) > (ctx.canvas.getAttribute("width") - this.width))
        {
            this.X = ctx.canvas.getAttribute("width") - this.width;
        }
        else if(this.X + this.snelheid < 0)
        {
            this.X = 0;
        }
        else
        {
            this.X += this.snelheid;
        }
    }
}

function init(){
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');

    car = new auto(1, 50, 150);
    animatie();
}

function animatie(){
    ctx.clearRect(0, 0, 1500, 500);

    car.teken(ctx);
    car.Update();

    setTimeout(animatie, 5);
    if (on) setTimeout(animatie, 5);
}

function Start()
{
    on = true;
    animatie();
}

function Stop()
{
    on = false;
    car.speed = 1;
}

function Achteruit()
{
    console.log("achteruit");
    console.log(car.snelheid);
    var temp = car.snelheid;
    if(temp > 0) temp = 0 - car.snelheid;
    car.snelheid = temp;
    console.log(car.snelheid);
}

function Versnelling()
{
    var temp = car.snelheid;
    
    if (temp > 0) temp += 1;
    if (temp < 0) temp -= 1;
    
    car.snelheid = temp;            
}

function BeginPositie()
{
    car.snelheid = 1;
    car.X = 0;
    
    if (!on)Animate();
}

this is html code:
<body>

<canvas id=“canvas” width=“1400” height=“500”></canvas><br/>

<input type=“button” value=“Start” onclick=“Start()” />

<input type=“button” value=“Stop” onclick=“Stop()” />

<input type=“button” value=“Achteruit” onclick=“Achteruit()” />

<input type=“button” value=“Versnelling” onclick=“Versnelling()” />

<input type=“button” value=“BeginPositie” onclick=“BeginPositie()” />

</body>

</html>

the thing is, the car that i made with the teken(draw) function wont show up, i dont know what i did wrong here

2

Your problem is caused by case sensitivity. In your contructor you have this.x and this.y, your methods are using this.X and this,Y. Common practise is to write class names in UpperCamelCase and to write variables, properties and function names in lowerCamelCase. So you would have class Auto, this.x and the function beginPositie.

Also notice the double setTimeout and the call to Animate instead of animatie.

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.