javascript - not changing variable

Question

I'm trying to code Snake, but I have a little issue.

var ctx = document.getElementById('ctx').getContext('2d');
var canvas = document.getElementById('ctx');

var y = [240, 230, 220];
var x = [240, 240, 240];

var xSpeed = 0;
var ySpeed = 0;

function load() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (p = 0; p < x.length; p++) {
        ctx.fillStyle = "black";
        ctx.fillRect(x[p], y[p], 10, 10);
    }
}

function keyDown() {
    var key = event.keyCode; /*getting keyCode of pressed key*/
    ctx.fillStyle = "black"; /*color of rectangle*/
    if (key == 39) { //RIGHT
        var xSpeed = 10;
        var ySpeed = 0;
        console.log("right");
    } else if (key == 37) { //LEFT
        var xSpeed = -10;
        var ySpeed = 0;
        console.log("left");
    } else if (key == 38) { //UP
        var xSpeed = 0;
        var ySpeed = -10;
        console.log("up");
    } else if (key == 40) { //DOWN
        var xSpeed = 0;
        var ySpeed = 10;
        console.log("down");
    }
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    /*if (x[0] >= 490) {
        xSpeed = 0;
    } else if (y[0] >= 490) {
        ySpeed = 0;
    }*/
    for (w = 0; w < x.length; w++) {
        y[w] += ySpeed;
        x[w] += xSpeed;
    }
    for (i = 0; i < x.length; i++) {
        ctx.fillStyle = "black";
        ctx.fillRect(x[i], y[i], 10, 10);
    }

    console.log(xSpeed);
    console.log(ySpeed);
}

setInterval(update, 500);

<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="#">
    <title>The Snake Game</title>
</head>
<style>
    #ctx {
        position: absolute;
        /*it can be fixed too*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*this to solve "the content will not be cut when the window is smaller than the content":*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
    }
</style>

<body onkeydown="keyDown()" onload="load()">
    <center><canvas id="ctx" width="500" height="500" style="border:1px solid black"></canvas></center>
</body>
<script src="script.js"></script>

</html>

If you ran the code, you found out, that variables xSpeed & ySpeed are not changing. I tried the rubber ducky debbuging, but i have found nothing. I'm 14, so don't laught so much about my stupidy please. :D Thank you in advice. Tomas

CodeWizard · Accepted Answer · 2017-07-22 11:15:17Z

2

You have to remove the var before the variables in the if

else if (key == 38) { //UP
    xSpeed = 0;
    ySpeed = -10;
    console.log("up");
...

If you add var before the variable it will be visible only in the local function and not outside of it.

Here is a much better way to write it:

function keyDown() {
    var key = event.keyCode; /*getting keyCode of pressed key*/
    ctx.fillStyle = "black"; /*color of rectangle*/

    switch( key){        
      case 39:  //RIGHT
        xSpeed = 10;
        ySpeed = 0;
        console.log("right");
       break;
     case 37:  //Left
       xSpeed = -10;
       ySpeed = 0;
       console.log("left");
       break;
     case 38:  // Up
       xSpeed = 0;
       ySpeed = -10;
       console.log("up");
       break;
     case 40:  // Down
       xSpeed = 0;
       ySpeed = 10;
       console.log("down");
    }
}

Or even much much better:

var speed= {
        37: {
             xSpeed : -10,
             ySpeed : 0,
             text: 'left'
        },
        38: {
             xSpeed : 0,
             ySpeed = -0,
             text: 'up'
        },
        39: {
             xSpeed : 10,
             ySpeed = 0,
             text: 'right'
        },
        40: {
             xSpeed : 0,
             ySpeed = 10,
             text: 'down'
        }
}


function keyDown() {
    var key = event.keyCode; /*getting keyCode of pressed key*/
    ctx.fillStyle = "black"; /*color of rectangle*/

    xSpeed = speed[key].xSpeed ;
    ySpeed = speed[key].ySpeed ;
    console.log(speed[key].text);
}

edited Jul 22, 2017 at 11:15

answered Jul 22, 2017 at 11:05

CodeWizard

146k22 gold badges162 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomáš Hobza Over a year ago

Thank you so much"'

Tomáš Hobza Over a year ago

I have tried getting rid of the "var", but it didn't work. After adding the switch it started to work, so thank you again.

Munawir · Accepted Answer · 2017-07-22 11:14:59Z

Remove the var keyword when assigning new values of xSpeed and ySpeed inside the function. Using var keyword inside the function means you are declaring new variables inside the function that are local to that function only. Hence it cannot be accessed from other functions or from outside that function.

var ctx = document.getElementById('ctx').getContext('2d');
var canvas = document.getElementById('ctx');

var y = [240, 230, 220];
var x = [240, 240, 240];

var xSpeed = 0;
var ySpeed = 0;

function load() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (p = 0; p < x.length; p++) {
        ctx.fillStyle = "black";
        ctx.fillRect(x[p], y[p], 10, 10);
    }
}

function keyDown() {
    var key = event.keyCode; /*getting keyCode of pressed key*/
    ctx.fillStyle = "black"; /*color of rectangle*/
    if (key == 39) { //RIGHT
        xSpeed = 10;
        ySpeed = 0;
        console.log("right");
    } else if (key == 37) { //LEFT
        xSpeed = -10;
        ySpeed = 0;
        console.log("left");
    } else if (key == 38) { //UP
        xSpeed = 0;
        ySpeed = -10;
        console.log("up");
    } else if (key == 40) { //DOWN
        xSpeed = 0;
        ySpeed = 10;
        console.log("down");
    }
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    /*if (x[0] >= 490) {
        xSpeed = 0;
    } else if (y[0] >= 490) {
        ySpeed = 0;
    }*/
    for (w = 0; w < x.length; w++) {
        y[w] += ySpeed;
        x[w] += xSpeed;
    }
    for (i = 0; i < x.length; i++) {
        ctx.fillStyle = "black";
        ctx.fillRect(x[i], y[i], 10, 10);
    }

    console.log(xSpeed);
    console.log(ySpeed);
}

setInterval(update, 500);

<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="#">
    <title>The Snake Game</title>
</head>
<style>
    #ctx {
        position: absolute;
        /*it can be fixed too*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*this to solve "the content will not be cut when the window is smaller than the content":*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
    }
</style>

<body onkeydown="keyDown()" onload="load()">
    <center><canvas id="ctx" width="500" height="500" style="border:1px solid black"></canvas></center>
</body>
<script src="script.js"></script>

</html>

Collectives™ on Stack Overflow

javascript - not changing variable

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related