Return to Answer

deleted 224 characters in body

Source Link

edited Dec 11, 2014 at 21:32

janos

113.1k
15
154
396

Instead ofThen you can rewrite the conditions like this:

if (keys[37]) { // left
    ball_pos[0] -= vel;
}
if (keys[38]) { // up
    ball_pos[1] -= vel;
}

You can actually get rid of the keys variable and use a switch statement:

switchif (keyCodekeys[KEY_LEFT]) {
case 37:
    // ..ball.
 x -= vel; break;
case 38:}
if (keys[KEY_UP]) {
  // ...
  ball.y -= break;vel;
}

var canvas, context, ball, vel, keys = {};

var BALL_RADIUS = 20;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;

function init() {
    'use strict';
    canvas = document.getElementById('c');
    context = canvas.getContext('2d');
    ball = { x: canvas.width / 2, y: canvas.height / 2 };
    vel = 4;
}

function draw() {
    'use strict';

    // draw background
    context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);

    // draw ball
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.fillStyle = 'white';
    context.beginPath();
    context.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    context.stroke();
}

function keydown(evt) {
    'use strict';
    // mozilla based browsers return which and others keyCode
    var keyCode = evt.which || evt.keyCode;
    keys[keyCode] = true;
    // alert(keyCode)
    // 33 up right
    // 34 down right
    // 35 down right
    // 36 up left
    switchif (keyCodekeys[KEY_LEFT]) {
    case KEY_LEFT:
        ball.x -= vel; 
        break;}
    caseif KEY_UP:(keys[KEY_UP]) {
        ball.y -= vel;
        break;}
    caseif KEY_RIGHT:(keys[KEY_RIGHT]) {
        ball.x += vel;
        break;}
    caseif KEY_DOWN:(keys[KEY_DOWN]) {
        ball.y += vel;
    }
}

function keyup(evt) {
    'use break;strict';
    }var keyCode = evt.which || evt.keyCode;
    delete keys[keyCode];
}

function animate() {
    'use strict';
    window.requestAnimationFrame(animate);
    draw();
}

// register event handlers
window.onkeydown = keydown;
window.onkeyup = keyup;

init();
animate();

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="c" width="600" height="400"></canvas>
</body>
</html>

Instead of conditions like this:

if (keys[37]) { // left
    ball_pos[0] -= vel;
}
if (keys[38]) { // up
    ball_pos[1] -= vel;
}

You can actually get rid of the keys variable and use a switch statement:

switch (keyCode) {
case 37:
    // ...
    break;
case 38:
    // ...
    break;
}

var canvas, context, ball, vel, keys = {};

var BALL_RADIUS = 20;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;

function init() {
    'use strict';
    canvas = document.getElementById('c');
    context = canvas.getContext('2d');
    ball = { x: canvas.width / 2, y: canvas.height / 2 };
    vel = 4;
}

function draw() {
    'use strict';

    // draw background
    context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);

    // draw ball
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.fillStyle = 'white';
    context.beginPath();
    context.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    context.stroke();
}

function keydown(evt) {
    'use strict';
    // mozilla based browsers return which and others keyCode
    var keyCode = evt.which || evt.keyCode;
    // alert(keyCode)
    // 33 up right
    // 34 down right
    // 35 down right
    // 36 up left
    switch (keyCode) {
    case KEY_LEFT:
        ball.x -= vel; 
        break;
    case KEY_UP:
        ball.y -= vel;
        break;
    case KEY_RIGHT:
        ball.x += vel;
        break;
    case KEY_DOWN:
        ball.y += vel;
        break;
    }
}

function animate() {
    'use strict';
    window.requestAnimationFrame(animate);
    draw();
}

// register event handlers
window.onkeydown = keydown;

init();
animate();

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="c" width="600" height="400"></canvas>
</body>
</html>

Then you can rewrite the conditions like this:

if (keys[KEY_LEFT]) {
    ball.x -= vel; 
}
if (keys[KEY_UP]) {
    ball.y -= vel;
}

var canvas, context, ball, vel, keys = {};

var BALL_RADIUS = 20;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;

function init() {
    'use strict';
    canvas = document.getElementById('c');
    context = canvas.getContext('2d');
    ball = { x: canvas.width / 2, y: canvas.height / 2 };
    vel = 4;
}

function draw() {
    'use strict';

    // draw background
    context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);

    // draw ball
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.fillStyle = 'white';
    context.beginPath();
    context.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    context.stroke();
}

function keydown(evt) {
    'use strict';
    // mozilla based browsers return which and others keyCode
    var keyCode = evt.which || evt.keyCode;
    keys[keyCode] = true;
    // alert(keyCode)
    // 33 up right
    // 34 down right
    // 35 down right
    // 36 up left
    if (keys[KEY_LEFT]) {
        ball.x -= vel; 
    }
    if (keys[KEY_UP]) {
        ball.y -= vel;
    }
    if (keys[KEY_RIGHT]) {
        ball.x += vel;
    }
    if (keys[KEY_DOWN]) {
        ball.y += vel;
    }
}

function keyup(evt) {
    'use strict';
    var keyCode = evt.which || evt.keyCode;
    delete keys[keyCode];
}

function animate() {
    'use strict';
    window.requestAnimationFrame(animate);
    draw();
}

// register event handlers
window.onkeydown = keydown;
window.onkeyup = keyup;

init();
animate();

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="c" width="600" height="400"></canvas>
</body>
</html>

Source Link

answered Dec 11, 2014 at 21:10

janos

113.1k
15
154
396

Instead of using ball_pos as an array with two elements to contain the x and y coordinate values of the ball, it would be more natural to use a an object like this:

ball = {
    x: canvas.width() / 2,
    y: canvas.height() / 2
}

Instead of writing keys[37] and explaining with a comment // left what the number means, it would be better to put that in a well-named variables, for example:

var KEY_LEFT = 37;

Instead of conditions like this:

if (keys[37]) { // left
    ball_pos[0] -= vel;
}
if (keys[38]) { // up
    ball_pos[1] -= vel;
}

You can actually get rid of the keys variable and use a switch statement:

switch (keyCode) {
case 37:
    // ...
    break;
case 38:
    // ...
    break;
}

Putting it together:

var canvas, context, ball, vel, keys = {};

var BALL_RADIUS = 20;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;

function init() {
    'use strict';
    canvas = document.getElementById('c');
    context = canvas.getContext('2d');
    ball = { x: canvas.width / 2, y: canvas.height / 2 };
    vel = 4;
}

function draw() {
    'use strict';

    // draw background
    context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);

    // draw ball
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.fillStyle = 'white';
    context.beginPath();
    context.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    context.stroke();
}

function keydown(evt) {
    'use strict';
    // mozilla based browsers return which and others keyCode
    var keyCode = evt.which || evt.keyCode;
    // alert(keyCode)
    // 33 up right
    // 34 down right
    // 35 down right
    // 36 up left
    switch (keyCode) {
    case KEY_LEFT:
        ball.x -= vel; 
        break;
    case KEY_UP:
        ball.y -= vel;
        break;
    case KEY_RIGHT:
        ball.x += vel;
        break;
    case KEY_DOWN:
        ball.y += vel;
        break;
    }
}

function animate() {
    'use strict';
    window.requestAnimationFrame(animate);
    draw();
}

// register event handlers
window.onkeydown = keydown;

init();
animate();

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="c" width="600" height="400"></canvas>
</body>
</html>