CODEWITHSUNDEEP
javascript
Nicholas Chidez
Nicholas Chidez

Reputation: 9

Why isn't my paddle moving Javascript Canvas?

I am attempting to code a rudimentary game but can't get the paddle to move. the code throws no errors. I'm working from a tutorial and know this code (https://drive.google.com/file/d/10-dH62BYlvPY20OeZo5VPWP92jWXvgjE/view) to work fine.

"use strict";


//gameParameters
const height = 550;
const width = height;
const border = 15;

const paddleHeight = 15;
const paddleWidth = 45;
const paddleSpeed = 0.7; //fraction of screen width/sec 

//colors
const colorBackground = 'black';

const colorBorder = 'pink';

const colorPaddle = 'pink';

//definitions
const direction = {
  left: 0,
  right: 1,
  stop: 2
}


//gameCanvas
var canv = document.createElement('canvas');
canv.width = width;
canv.height = height;
document.body.appendChild(canv);


//context
var ctx = canv.getContext('2d');
ctx.lineWidth = border;


//game Variables
var paddle;

//start new game
newGame();

//event listeners
document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);

// gameLoop
var timeDelta, timeLast;
requestAnimationFrame(loop);

function loop(timeNow) {
  if (!timeLast) {
    timeLast = timeNow;

  }
  //calcTimeDifference

  timeDelta = (timeNow - timeLast) * 0.001; //ms => sec
  timeLast = timeNow;

  //update
  updatePaddle(timeDelta);



  //draw
  drawBackground();
  drawBorder();
  drawPaddle();


  //call next loop
  requestAnimationFrame(loop);
}

function drawBackground() {
  ctx.fillStyle = colorBackground;
  ctx.fillRect(0, 0, canv.width, canv.height);
}

function drawBorder() {
  let halfBorder = border * 0.5;
  ctx.strokeStyle = colorBorder;
  ctx.beginPath();
  ctx.moveTo(halfBorder, height);
  ctx.lineTo(halfBorder, halfBorder);
  ctx.lineTo(width - halfBorder, halfBorder);
  ctx.lineTo(width - halfBorder, height);
  ctx.stroke();

}

function drawPaddle() {
  ctx.fillStyle = colorPaddle;
  ctx.fillRect(paddle.x - paddle.w * 0.5, paddle.y - paddle.h * 0.5, paddle.w, paddle.h);
}

function keyDown(ev) {
  switch (ev.keyCode) {
    case 37: //left arrow
      movePaddle(direction.left);
      break;

    case 39: //right arrow
      movePaddle(direction.right);
      break;
  }
}

function keyUp(ev) {
  switch (ev.keyCode) {
    case 37: //left arrow
    case 39: //right arrow
      movePaddle(direction.stop);
      break;
  }
}


function movePaddle(direction) {
  switch (direction) {

    case direction.left:
      paddle.xv = -paddle.spd;
      break;

    case direction.right:
      paddle.xv = paddle.spd;
      break;

    case direction.stop:
      paddle.xv = 0;
      break;
  }
}

function newGame() {
  paddle = new paddle();
}


function updatePaddle(delta) {
  paddle.x += paddle.xv * delta;
}

function paddle() {
  this.w = paddleWidth;
  this.h = paddleHeight;
  this.x = canv.width / 2;
  this.y = canv.height - this.h * 3;
  this.spd = paddleSpeed * width
  this.xv = 0;
}
<body></body>

Upvotes: 1

Views: 42

Answers (1)

Sanil Khurana
Sanil Khurana

Reputation: 1169

The mistake was in the function movePaddle. You had named the argument direction, and when you used direction.left, you meant to use the globally defined direction object, however since the function argument is local, your function argument was being used, which was just an integer.

Simply rename the function argument to fix the code.

"use strict";

//gameParameters
const height = 550;
const width = height;
const border = 15;

const paddleHeight = 15;
const paddleWidth = 45;
const paddleSpeed = 0.7; //fraction of screen width/sec 

//colors
const colorBackground = 'black';
const colorBorder = 'pink';
const colorPaddle = 'pink';

//definitions
const direction = {
  left: 0,
  right: 1,
  stop: 2
}

//gameCanvas
var canv = document.createElement('canvas');
canv.width = width;
canv.height = height;
document.body.appendChild(canv);

//context
var ctx = canv.getContext('2d');
ctx.lineWidth = border;

//game Variables
var paddle;

//start new game
newGame();

//event listeners
document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);

// gameLoop
var timeDelta, timeLast;
requestAnimationFrame(loop);

function loop(timeNow) {
  if (!timeLast) {
    timeLast = timeNow;

  }
  //calcTimeDifference

  timeDelta = (timeNow - timeLast) * 0.001; //ms => sec
  timeLast = timeNow;

  //update
  updatePaddle(timeDelta);

  //draw
  drawBackground();
  drawBorder();
  drawPaddle();


  //call next loop
  requestAnimationFrame(loop);
}


function drawBackground() {
  ctx.fillStyle = colorBackground;
  ctx.fillRect(0, 0, canv.width, canv.height);
}

function drawBorder() {
  let halfBorder = border * 0.5;
  ctx.strokeStyle = colorBorder;
  ctx.beginPath();
  ctx.moveTo(halfBorder, height);
  ctx.lineTo(halfBorder, halfBorder);
  ctx.lineTo(width - halfBorder, halfBorder);
  ctx.lineTo(width - halfBorder, height);
  ctx.stroke();
}

function drawPaddle() {
  ctx.fillStyle = colorPaddle;
  ctx.fillRect(paddle.x - paddle.w * 0.5, paddle.y - paddle.h * 0.5, paddle.w, paddle.h);
}

function keyDown(ev) {
  switch (ev.keyCode) {
    case 37: //left arrow
      movePaddle(direction.left);
      break;

    case 39: //right arrow
      movePaddle(direction.right);
      break;
  }
}

function keyUp(ev) {
  switch (ev.keyCode) {
    case 37: //left arrow
    case 39: //right arrow
      movePaddle(direction.stop);
      break;
  }
}


function movePaddle(to_direction) {
  switch (to_direction) {

    case direction.left:
      paddle.xv = -paddle.spd;
      break;

    case direction.right:
      paddle.xv = paddle.spd;
      break;

    case direction.stop:
      paddle.xv = 0;
      break;
  }
}

function newGame() {
  paddle = new paddle();
}

function updatePaddle(delta) {
  paddle.x += paddle.xv * delta;
}

function paddle() {
  this.w = paddleWidth;
  this.h = paddleHeight;
  this.x = canv.width / 2;
  this.y = canv.height - this.h * 3;
  this.spd = paddleSpeed * width
  this.xv = 0;
}
<body></body>

Upvotes: 1

Related Questions