完整代码/工作示例

Question

我正在尝试制作一款赛车游戏，而我的第一步就是尝试制造这款车并让它稍微移动一下。不幸的是，它不起作用，因为画布上没有任何东西出现，而不是矩形和汽车。任何想法（当然你有想法）？很抱歉，如果代码格式不正确，我今天就加入了这个网站。

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;
  }
}

Answer 1

这是你开始所需要的：

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();
}

这是原始render功能，但您将其用作draw。此外，内部存在无效的width和height引用，因此我使用了canvas.width和canvas.height。

这是迄今为止取得的进展：http://jsfiddle.net/qf47mb4k/

此处添加了现有汽车图片，因此控制台中不再出现错误：http://jsfiddle.net/qf47mb4k/2/

WASD键现在正在工作，但你需要在每一帧上清除画布以获得你期望的效果。

修复画布和上下文对象（也删除了jQuery）之后：

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

要使制动器正常工作，您需要修复您的键盘处理程序：

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

现在一切似乎都很好：http://jsfiddle.net/qf47mb4k/4/。喜欢驾驶汽车！

完整代码/工作示例

＆＃13;

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;
    }
}

＆＃13;

<canvas id="gameCanvas" width="500" height="500" style="border:5px solid green"></canvas>

＆＃13;

简单的HTML和JS代码不起作用？

1 个答案:

完整代码/工作示例