javascript - JavaScript 将对象从起始位置移动到结束位置
问题描述
我目前正在学习计算机编程入门课程。这是一门在线课程,当您遇到困难时没有太多帮助。
我正在使用 Brackets 和 p5.js,并且我得到了一个模板来开始。到目前为止,我似乎已经完成了所需的一切,但我无法使聚光灯移动。
我相信我没有正确初始化聚光灯,但我尝试了多种不同的方法。如果有人能指出我正确的方向,我将不胜感激。代码如下。
通过创建初始化到您的位置的 x 和 y 属性来编辑聚光灯对象。还将 endX 和 endY 属性初始化为 Marvin 的位置
通过调整 x 和 y 属性的增量,使聚光灯完美地从您向 Marvin 移动。如果你一切都正确,那么它将停在目标上。
使用调整 x 和 y 属性
"+=" 或 "+"
- “-=”或“-”
*/
var x;
var y;
var startX = 360;
var endX = 575;
var startY = 760;
var endY = 570;
// other variables, you don't need to change these
var img, spotlight_image;
var spotlight;
function preload()
{
img = loadImage('scene.png');
spotlight_image = loadImage('spotlight.png')
}
function setup()
{
createCanvas(img.width, img.height);
//Initialise the spotlight object
//with properties x, y, endX and endY
x = 360;
y = 760;
endX =575;
endY = 570;
spotlight = {
image: spotlight_image
}
}
function draw()
{
image(img, 0, 0);
// alter the object properties x and y below to animate the spotlight
x += 1;
y +=1;
////////// DO NOT CHANGE ANYTHING BELOW /////////////
//stop the spotlight if it goes off of the screen
spotlight.x = min(spotlight.x, 960);
spotlight.y = min(spotlight.y, 945);
spotlight.x = max(spotlight.x, 0);
spotlight.y = max(spotlight.y, 0);
if (abs(spotlight.endX - spotlight.x) < 50
&& abs(spotlight.endY - spotlight.y) < 50)
{
spotlight.x = spotlight.endX;
spotlight.y = spotlight.endY;
}
var spotlightSize = 180;
blendMode(BLEND);
background(10);
image(spotlight.image, spotlight.x-spotlightSize/2,
spotlight.y-spotlightSize/2, spotlightSize, spotlightSize);
blendMode(DARKEST);
image(img, 0, 0);
////////// DO NOT CHANGE ANYTHING ABOVE /////////////
}
解决方案
x
, y
, endX
,endY
必须是 的属性spotlight
:
function setup()
{
createCanvas(1000, 1000);
spotlight = {
image: spotlight_image,
x: 360,
y: 760,
endX: 575,
endY: 570,
}
}
递增spotlight.x
and spotlight.y
,而不是x
and y
:
function draw()
{
image(img, 0, 0);
// alter the object properties x and y below to animate the spotlight
spotlight.x += 1; // <-----
spotlight.y += 1; // <-----
////////// DO NOT CHANGE ANYTHING BELOW /////////////
//stop the spotlight if it goes off of the screen
spotlight.x = min(spotlight.x, 960);
spotlight.y = min(spotlight.y, 945);
spotlight.x = max(spotlight.x, 0);
spotlight.y = max(spotlight.y, 0);
if (abs(spotlight.endX - spotlight.x) < 50
&& abs(spotlight.endY - spotlight.y) < 50)
{
spotlight.x = spotlight.endX;
spotlight.y = spotlight.endY;
}
var spotlightSize = 180;
blendMode(BLEND);
background(10);
image(spotlight.image, spotlight.x-spotlightSize/2,
spotlight.y-spotlightSize/2, spotlightSize, spotlightSize);
blendMode(DARKEST);
image(img, 0, 0);
////////// DO NOT CHANGE ANYTHING ABOVE /////////////
}
推荐阅读
- python - 导入和命名远程文件
- ios - 使用 UICollectionViewLayout 设置和更改 UICollectionView 单元格的宽度/高度
- javascript - 在 React 中使用 map() 时无法通过 API 调用访问数组数据
- node.js - API Gateway websockets - 函数正在发送两条消息
- apache-kafka - Kafka 如何处理与分区相关的键控消息
- javascript - 如何循环遍历数组
- python - 填写注册页面的“名字”字段
- racket - Racket - 从 2dlist 中添加或删除元素
- node.js - Next.JS:具有承诺的解析器在 SSR 上的 api-routes-server-and-client-test 中不起作用
- cocoa - 使用 NSUndoManager 从异步撤消注册重做操作