CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
SasukeRinnegan
SasukeRinnegan

Reputation: 129

Simple HTML and JS code won't work?

I'm trying to make a racing game, and my first step was to try out making the car and getting it to move a bit. Unfortunately, it isn't working, as nothing is showing up on the canvas, not the rectangle nor the car. Any ideas (of course you have ideas)? Sorry if the code isn't formatted correctly, I joined this site today.

HTML:

<!doctype html>

<html lang="en">
<head>
<title>Ball</title>
<script src="http://code.jquery.com/jquery-git2.js"></script>
</head>


<body>
<center>
<canvas id="gameCanvas" width="500" height="500" style="border:5px solid green"></canvas>
<script src="js/Game.js"></script>
</center>
</body>
</html>

JS:

window.onload = function() {
  var x = 0;
  var y = 0;
  var speed = 5;
  var angle = 0;
  var mod = 0;

  var canvas = $('#gameCanvas')[0].getContext('2d');
  var context = gameCanvas.getContext('2d');
  var car = new Image();
  car.src = "Gamecar.png";

  window.addEventListener("keydown", keypress_handler, false);
  window.addEventListener("keyup", keypress_handler, false);

  var moveInterval = setInterval(function() {
    draw();
  }, 30);
};

function render() {
  context.clearRect(0, 0, width, height);

  context.fillStyle = "rgb(200, 100, 220)";
  context.fillRect(50, 50, 100, 100);

  x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
  y += (speed * mod) * Math.sin(Math.PI / 180 * angle);

  context.save();
  context.translate(x, y);
  context.rotate(Math.PI / 180 * angle);
  context.drawImage(car, -(car.width / 2), -(car.height / 2));
  context.restore();
}

function keyup_handler(event) {
  if (event.keyCode == 87 || event.keyCode == 83) {
    mod = 0;
  }
}

function keypress_handler(event) {
  console.log(event.keyCode);
  if (event.keyCode == 87) {
    mod = 1;
  }
  if (event.keyCode == 83) {
    mod = -1;
  }
  if (event.keyCode == 65) {
    angle -= 5;
  }
  if (event.keyCode == 68) {
    angle += 5;
  }
}

Upvotes: 2

Views: 230

Answers (1)

Shomz
Shomz

Reputation: 37701

This is what you need for a start: 

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "rgb(200, 100, 220)";
    context.fillRect(50, 50, 100, 100);

    x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
    y += (speed * mod) * Math.sin(Math.PI / 180 * angle);

    context.save();
    context.translate(x, y);
    context.rotate(Math.PI / 180 * angle);
    context.drawImage(car, -(car.width / 2), -(car.height / 2));
    context.restore();
}

That is the original render function, but you use it as draw. Also, there were invalid width and height references inside, so I used canvas.width and canvas.height.

This is the progress so far: http://jsfiddle.net/qf47mb4k/

Added an existing car image here, so no more errors in the console: http://jsfiddle.net/qf47mb4k/2/

WASD keys are now working, but you need to clear the canvas on every frame to get what you expected.

After fixing your canvas and context objects (also removed jQuery): 

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

To get the brakes working, you need to fix your keyup handler: 

window.addEventListener("keyup", keyup_handler, false);

Everything seems fine now: http://jsfiddle.net/qf47mb4k/4/. Enjoy driving the car!

Full Code / Working Example

var x = 0;
var y = 0;
var speed = 5;
var angle = 0;
var mod = 0;

var canvas = document.getElementById('gameCanvas');
var context = canvas.getContext('2d');
var car = new Image();
car.src = "http://images.clipartpanda.com/car-top-view-clipart-red-racing-car-top-view-fe3a.png";

window.addEventListener("keydown", keypress_handler, false);
window.addEventListener("keyup", keyup_handler, false);

var moveInterval = setInterval(function () {
    draw();
}, 30);


function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "rgb(200, 100, 220)";
    context.fillRect(50, 50, 100, 100);

    x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
    y += (speed * mod) * Math.sin(Math.PI / 180 * angle);

    context.save();
    context.translate(x, y);
    context.rotate(Math.PI / 180 * angle);
    context.drawImage(car, -(car.width / 2), -(car.height / 2));
    context.restore();
}

function keyup_handler(event) {
    if (event.keyCode == 87 || event.keyCode == 83) {
        mod = 0;
    }
}

function keypress_handler(event) {
    console.log(event.keyCode);
    if (event.keyCode == 87) {
        mod = 1;
    }
    if (event.keyCode == 83) {
        mod = -1;
    }
    if (event.keyCode == 65) {
        angle -= 5;
    }
    if (event.keyCode == 68) {
        angle += 5;
    }
}
<canvas id="gameCanvas" width="500" height="500" style="border:5px solid green"></canvas>

Upvotes: 5

Related Questions