Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Help with a couple of Javascripts

G

Glenn

New Coder
Hi,
My nephew is doing some year 10 electives through Alison.com namely Shooting Web Game using Canvas & JavaScript

He is halfway through the course and suddenly the code the instructor is writing no longer works correctly. Even the source code found in the download section of the course doesn't work. There are 17 source code files in the download section that are JavaScript code in text files, up to Source 10 works correctly however nothing after that works

I have tried the code in Chrome, Firefox and Edge browsers but nothing works. I can't see why Source 11 and on wards don't work as using 'inspect' in FF or Chrome shows there are no issues.

The scripts are as follows (I have not written these they are from the course);
Source 10
JavaScript: 
const canvas = document.createElement('canvas');
const grid = 50;
canvas.setAttribute('width', grid * 20);
canvas.setAttribute('height', grid * 15);
document.body.prepend(canvas);
canvas.style.border = '1px solid black';
const ctx = canvas.getContext('2d');
const players = [{
  x: canvas.width / 2 + (grid * 2)
  , y: canvas.height / 2
  , size: 30
  , speed: 5
  , color: 'red'
  , cooldown: 0
  , score: 0
  , pos: canvas.width / 2 + (canvas.width / 4)
}, {
  x: canvas.width / 2 - (grid * 2)
  , y: canvas.height / 2
  , size: 30
  , speed: 5
  , color: 'blue'
  , cooldown: 0
  , score: 0
  , pos: canvas.width / 4
}];
const game = {
  req: ''
  , bullets: []
  , bulletSpeed: 5
};
const keyz = {
  ArrowLeft: false
  , ArrowRight: false
  , ArrowUp: false
  , ArrowDown: false
  , KeyA: false
  , KeyS: false
  , KeyZ: false
  , KeyW: false
};
document.addEventListener('keydown', (e) => {
  if (e.code in keyz) {
    keyz[e.code] = true;
  }
  if (e.code == 'Space' && players[0].cooldown <= 0) {
    players[0].cooldown = 20;
    game.bullets.push({
      x: players[0].x - players[0].size - 15
      , y: players[0].y - 5
      , speed: -game.bulletSpeed
      , size: 10
      , color: 'pink'
    })
  }
  if (e.code == 'KeyD' && players[1].cooldown <= 0) {
    players[1].cooldown = 20;
    game.bullets.push({
      x: players[1].x + players[1].size + 15
      , y: players[1].y - 5
      , speed: game.bulletSpeed
      , size: 10
      , color: 'lightblue'
    })
  }
})
document.addEventListener('keyup', (e) => {
  if (e.code in keyz) {
    keyz[e.code] = false;
  }
  if (e.code == 'KeyM') {
    console.log(players[0].x, players[0].y);
    console.log(players[1].x, players[1].y);
    colDec(players[0], players[1]);
  }
})
game.req = requestAnimationFrame(draw);

function colDec(a, b) {
  return a.x < b.x + b.size && a.x + a.size * 2 > b.x && a.y < b.y + b.size * 2 && a.y + a.size * 2 > b.y;
}

function movementPlayer() {
  if (keyz['ArrowLeft'] && players[0].x > canvas.width / 2 + players[0].size) {
    players[0].x -= players[0].speed;
  }
  if (keyz['ArrowRight'] && players[0].x < canvas.width - players[0].size) {
    players[0].x += players[0].speed;
  }
  if (keyz['ArrowUp'] && players[0].y > players[0].size) {
    players[0].y -= players[0].speed;
  };
  if (keyz['ArrowDown'] && players[0].y < canvas.height - players[0].size) {
    players[0].y += players[0].speed;
  };
  if (keyz['KeyA'] && players[1].x > players[1].size) {
    players[1].x -= players[1].speed;
  }
  if (keyz['KeyS'] && players[1].x < canvas.width / 2 - players[1].size) {
    players[1].x += players[1].speed;
  }
  if (keyz['KeyW'] && players[1].y > players[1].size) {
    players[1].y -= players[1].speed;
  };
  if (keyz['KeyZ'] && players[1].y < canvas.height - players[1].size) {
    players[1].y += players[1].speed;
  };
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  movementPlayer();
  game.bullets.forEach((bull, index) => {
    ctx.fillStyle = bull.color;
    ctx.fillRect(bull.x + (bull.size / 2), bull.y, bull.size, bull.size);
    bull.x += bull.speed;
    if (bull.x < 0) {
      game.bullets.splice(index, 1);
    }
    players.forEach((player, i) => {
      if (colDec(bull, player)) {
        console.log('HIT Player ' + player.color + ' ' + i);
        if (i == 0) {
          players[1].score++;
        }
        else {
          players[0].score++;
        }
        game.bullets.splice(index, 1);
      }
    })
  })
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, 0);
  ctx.lineTo(canvas.width / 2, canvas.height);
  ctx.stroke();
  players.forEach((player) => {
    if (player.cooldown > 0) {
      player.cooldown--;
    }
    ctx.fillStyle = player.color;
    ctx.font = '48px serif';
    ctx.textAlign = 'center';
    ctx.fillText('Score:' + player.score, player.pos, 50);
    ctx.beginPath();
    ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
    ctx.fill();
  })
  game.req = requestAnimationFrame(draw);
}

Source 11
JavaScript: 
const canvas = document.createElement('canvas');
const grid = 50;
canvas.setAttribute('width', grid * 20);
canvas.setAttribute('height', grid * 15);
document.body.prepend(canvas);
canvas.style.border = '1px solid black';
const ctx = canvas.getContext('2d');
const players = [{
  x: canvas.width / 2 + (grid * 4)
  , color: 'red'
  , pos: canvas.width / 2 + (canvas.width / 4)
}, {
  x: canvas.width / 2 - (grid * 4)
  , color: 'blue'
  , pos: canvas.width / 4
}];
const game = {
  req: ''
  , bullets: []
  , bulletSpeed: 5
};
const keyz = {
  ArrowLeft: false
  , ArrowRight: false
  , ArrowUp: false
  , ArrowDown: false
  , KeyA: false
  , KeyS: false
  , KeyZ: false
  , KeyW: false
};
canvas.addEventListener('click', startGame);

function startGame() {
  cancelAnimationFrame(game.req);
  players.forEach((player) => {
    player.score = 0;
    player.cooldown = 100;
    player.speed = 5;
    player.size = 30;
    player.y = canvas.height / 2;
  })
  game.req = requestAnimationFrame(draw);
}
document.addEventListener('keydown', (e) => {
  if (e.code in keyz) {
    keyz[e.code] = true;
  }
  if (e.code == 'Space' && players[0].cooldown <= 0) {
    players[0].cooldown = 20;
    game.bullets.push({
      x: players[0].x - players[0].size - 15
      , y: players[0].y - 5
      , speed: -game.bulletSpeed
      , size: 10
      , color: 'pink'
    })
  }
  if (e.code == 'KeyD' && players[1].cooldown <= 0) {
    players[1].cooldown = 20;
    game.bullets.push({
      x: players[1].x + players[1].size + 15
      , y: players[1].y - 5
      , speed: game.bulletSpeed
      , size: 10
      , color: 'lightblue'
    })
  }
})
document.addEventListener('keyup', (e) => {
  if (e.code in keyz) {
    keyz[e.code] = false;
  }
  if (e.code == 'KeyM') {
    console.log(players[0].x, players[0].y);
    console.log(players[1].x, players[1].y);
    colDec(players[0], players[1]);
  }
})

function colDec(a, b) {
  return a.x < b.x + b.size && a.x + a.size * 2 > b.x && a.y < b.y - b.size + b.size * 2 && a.y + a.size > b.y - b.size;
}

function movementPlayer() {
  if (keyz['ArrowLeft'] && players[0].x > canvas.width / 2 + players[0].size) {
    players[0].x -= players[0].speed;
  }
  if (keyz['ArrowRight'] && players[0].x < canvas.width - players[0].size) {
    players[0].x += players[0].speed;
  }
  if (keyz['ArrowUp'] && players[0].y > players[0].size) {
    players[0].y -= players[0].speed;
  };
  if (keyz['ArrowDown'] && players[0].y < canvas.height - players[0].size) {
    players[0].y += players[0].speed;
  };
  if (keyz['KeyA'] && players[1].x > players[1].size) {
    players[1].x -= players[1].speed;
  }
  if (keyz['KeyS'] && players[1].x < canvas.width / 2 - players[1].size) {
    players[1].x += players[1].speed;
  }
  if (keyz['KeyW'] && players[1].y > players[1].size) {
    players[1].y -= players[1].speed;
  };
  if (keyz['KeyZ'] && players[1].y < canvas.height - players[1].size) {
    players[1].y += players[1].speed;
  };
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  movementPlayer();
  game.bullets.forEach((bull, index) => {
    ctx.fillStyle = bull.color;
    ctx.fillRect(bull.x + (bull.size / 2), bull.y, bull.size, bull.size);
    bull.x += bull.speed;
    if (bull.x < 0) {
      game.bullets.splice(index, 1);
    }
    players.forEach((player, i) => {
      if (colDec(bull, player)) {
        console.log('HIT Player ' + player.color + ' ' + i);
        if (i == 0) {
          players[1].score++;
        }
        else {
          players[0].score++;
        }
        game.bullets.splice(index, 1);
      }
    })
  })
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, 0);
  ctx.lineTo(canvas.width / 2, canvas.height);
  ctx.stroke();
  players.forEach((player) => {
    if (player.cooldown > 0) {
      player.cooldown--;
    }
    ctx.fillStyle = player.color;
    ctx.font = '48px serif';
    ctx.textAlign = 'center';
    ctx.fillText('Score:' + player.score, player.pos, 50);
    ctx.beginPath();
    ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
    ctx.fill();
  })
  game.req = requestAnimationFrame(draw);
}

Could anyone please offer some assistance.

Thank you for your help.

Kind regards
Glenn
 
Solution
O
Not knowing what the code is supposed to do you won't be able to determine what it is not doing. Both codes seem to do the same thing, the only difference is code 11 needs the user to click on the canvas to get things started. This is the code that was added to do that:
Code: 
canvas.addEventListener('click', startGame); function startGame() { cancelAnimationFrame(game.req); players.forEach((player) => { player.score = 0; player.cooldown = 100; player.speed = 5; player.size = 30; player.y = canvas.height / 2; }) game.req = requestAnimationFrame(draw); }
Sort by date Sort by votes
Not knowing what the code is supposed to do you won't be able to determine what it is not doing. Both codes seem to do the same thing, the only difference is code 11 needs the user to click on the canvas to get things started. This is the code that was added to do that:
Code: 
canvas.addEventListener('click', startGame); function startGame() { cancelAnimationFrame(game.req); players.forEach((player) => { player.score = 0; player.cooldown = 100; player.speed = 5; player.size = 30; player.y = canvas.height / 2; }) game.req = requestAnimationFrame(draw); }
 
Upvote 0 Downvote
Solution

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom