个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 Canvas ，在初始化页面时绘制了两个矩形对象。
我有一个 X 和 Y 的变量，当按下键盘按钮时它会改变，它工作正常。
我想根据新的 X 和 Y 值移动其中一个对象方 block “playerCar”，因为它们发生变化，但我无法让方 block 发生变化。
我在不使用对象的情况下使用了它，但我想使用对象以便我可以添加更多(当我学习它时)。
我试过 playercar.draw(keyX, KeyY); 但这不是更新。
var canvas = document.getElementById('plot');
var context;
var keyX = 100;
var keyY = 100;
playerCar = new car(100, 100, 'red');
playerCar2 = new car(350, 100, 'blue');
init()
playerCar.draw();
playerCar2.draw();
document.addEventListener('keydown', function(event){
var keyPressed = event.keyCode;
switch(keyPressed){
case 104:
keyY = keyY -1;
break;
case 98:
keyY = keyY +1;
break;
case 100:
keyX = keyX -1;
break;
case 102:
keyX = keyX +1;
break;
}
playerCar.draw();
console.log('key Y = ' + keyY);
console.log('key X = ' + keyX);
});
function init(){
context = canvas.getContext('2d');
context.fillStyle = "green";
var plot = {height: 800, width: 800};
context.fillRect(1, 1, plot.width, plot.height);
}
function car (keyX, keyY, color){
carwidth = 150;
carHeight = 100;
this.x = keyX;
this.y = keyY;
this.color = color;
this.draw = function (){
context.fillStyle = this.color;
context.fillRect(this.x, this.y, carwidth, carHeight);
}
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="plot" width="800" height="800"></canvas>
<script src="index.js"></script>
</body>
</html>最佳答案
您遇到的问题是您指望的是 KeyX 和 KeyY 的初始值，而不是存储在 car 对象中的值。您需要在 playerCar.y
所以我将 keyY = keyY +1; 替换为 playerCar.y += 1;。
如您所见，我使用了 += 这只是编写相同内容的一种更短的方式，参见:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
您也可以使用 playerCar.y++，但您无法再调整它添加的数量。
除了这个问题之外，您还遇到了一个问题，即您没有重绘 Canvas 。这是一个稍微大一点的问题，在大多数游戏中，您会有一个负责所有绘图的绘图函数(循环)和一个负责逻辑(循环)的单独函数。
现在我添加了一个重绘函数来重绘屏幕上的所有对象。
var canvas = document.getElementById('plot');
var context;
var keyX = 100;
var keyY = 100;
playerCar = new car(100, 100, 'red');
playerCar2 = new car(350, 100, 'blue');
init()
document.addEventListener('keydown', function(event){
var keyPressed = event.keyCode;
switch(keyPressed){
case 104:
playerCar.y += 1;
break;
case 98:
playerCar.y -= 1;
break;
case 100:
playerCar.x += 1;
break;
case 102:
playerCar.x -= 1;
break;
}
redraw()
console.log('key Y = ' + playerCar.y);
console.log('key X = ' + playerCar.x);
});
function init(){
context = canvas.getContext('2d');
redraw();
}
function redraw() {
context.fillStyle = "green";
var plot = {height: 800, width: 800};
context.fillRect(1, 1, plot.width, plot.height);
playerCar.draw();
playerCar2.draw();
}
function car (keyX, keyY, color){
carwidth = 150;
carHeight = 100;
this.x = keyX;
this.y = keyY;
this.color = color;
this.draw = function (){
context.fillStyle = this.color;
context.fillRect(this.x, this.y, carwidth, carHeight);
}
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="plot" width="800" height="800"></canvas>
<script src="index.js"></script>
</body>
</html>关于javascript - Canvas 对象更新位置并重绘对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59248182/
25
4
0
我是一名优秀的程序员,十分优秀！