【发布时间】：2018-08-20 21:01:23
【问题描述】：
这应该从 DOM 生成 4 个形状，它们在屏幕上的位置不同，并在出现提示时在屏幕上移动。
我在使边界检查器功能正常工作时遇到问题。我一直在努力想知道该怎么做，但我很难过。我知道我必须按值调用而不是引用 dx 和 dy 值，因为它们是对象，但我只是不确定如何执行它。如果有人可以提供帮助并提供代码/伪代码甚至只是建议，我将不胜感激。
最终它需要到达终点，并切换方向，所以它在屏幕上弹跳。
代码示例：
function getElement(elementName) { //This is like getElementById()
var element = document.getElementById(elementName);
return element;
}
function drawShape(canvasID) { //creates the shapes
var canvas = getElement(canvasID);
var ctx = canvas.getContext('2d');
if (canvasID == "CANVAS1") {
ctx.rect(25, 25, 100, 100);
ctx.fillStyle = "red";
ctx.fill();
} else if (canvasID == "CANVAS2") {
ctx.rect(25, 25, 100, 100);
ctx.fillStyle = "blue";
ctx.fill();
} else if (canvasID == "CANVAS3") {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fill();
} else if (canvasID == "CANVAS4") {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "yellow";
ctx.fill();
}
}
function setNewPosition(objID, dx, dy) { //neew shape position
var obj = getElement(objID);
//boundaryCheck(objID);
var newleft = parseInt(obj.style.left) + dx;
var newtop = parseInt(obj.style.top) + dy;
obj.style.left = newleft.toString() + 'px';
obj.style.top = newtop.toString() + 'px';
}
function shape(objID, canvasID, dx, dy, delay) {
var thisShape = this;
this.objID = objID;
this.dx = dx;
this.dy = dy;
this.speedX = 0;
this.speedY = 0;
thisShape.draw = function() {
drawShape(canvasID);
}
thisShape.move = function() {
setNewPosition(objID, dx, dy);
setTimeout(thisShape.move, delay);
}
}
function drawObj(id) { //starts the process to visually show the shapes
document.shapeObj[id].draw();
}
function moveObj(id) { //starts process to move the shapes. Goes infinitely at the moment
document.shapeObj[id].move();
}
//A type of boundary checker. This is where im stuck. Anything helps.
/*function boundaryCheck(objID,canvasID,dx,dy){
var elm = getElement(objID);
var left = parseInt(elm.style.left);
var top = parseInt(elm.style.top);
if(left > 400 || left < 0){
dx *= -1;
}
if(top >4 00 || top < 0){
dy *= -1;
}
left +=dx;
top +=dy;
} */<html>
<head>
<script type="text/javascript" src="jstest2.js"></script>
<script type="text/javascript">
// run function when document is loaded
function start() {
//load DOM objects here
document.shapeObj = {};
//Creating the shapes in the DOM -T
document.shapeObj["SHAPE1"] = new shape("SHAPE1", "CANVAS1", 1, 1, 10);
document.shapeObj["SHAPE2"] = new shape("SHAPE2", "CANVAS2", 1, 1, 10);
document.shapeObj["SHAPE3"] = new shape("SHAPE3", "CANVAS3", 1, 1, 10);
document.shapeObj["SHAPE4"] = new shape("SHAPE4", "CANVAS4", 1, 1, 10);
}
</script>
</head>
<title> Shape Assignment</title>
<body onload="start()">
<!-- These are the button div id's that call the drawObj Function - T -->
<div id="buttons">
Draw
<input value="Draw Shape 1" type="button" onclick="drawObj('SHAPE1')">
<input value="Draw Shape 2" type="button" onclick="drawObj('SHAPE2')">
<input value="Draw Shape 3" type="button" onclick="drawObj('SHAPE3')">
<input value="Draw Shape 4" type="button" onclick="drawObj('SHAPE4')">
<br>
<button onclick="moveObj('SHAPE1')">Move Shape 1</button>
<button onclick="moveObj('SHAPE2')">Move Shape 2</button>
<button onclick="moveObj('SHAPE3')">Move Shape 3</button>
<button onclick="moveObj('SHAPE4')">Move Shape 4</button>
<br>
</div>
<div id="SHAPE1" style="position: absolute; top: 40px; left: 30px;">
<canvas id="CANVAS1" width="400" height="400"></canvas>
</div>
<div id="SHAPE2" style="position: absolute; top: 160px; left: 320px;">
<canvas id="CANVAS2" width="400" height="400"></canvas>
</div>
<div id="SHAPE3" style="position: absolute; top: 30px; left: 380px;">
<canvas id="CANVAS3" width="400" height="400"></canvas>
</div>
<div id="SHAPE4" style="position: absolute; top: 350px; left: 20px;">
<canvas id="CANVAS4" width="400" height="400"></canvas>
</div>
</body>
</html>【问题讨论】：
-
请用您的代码在代码编辑器中正常工作的情况下编辑此问题，以便更清楚地了解您想要实现的目标，谢谢！
-
它应该可以正常工作。我做了所有的麻烦点cmets。我会再试一次并查看代码。编辑：对我来说很好。不要忘记可能它的 HTML 上的 src 名称。不知道为什么它不适用于其他人。
-
我遇到的问题是，当我运行代码并移动形状时，形状会永远移动。我知道我需要实现一个边界来防止他们越过他们的画布，但是所有的尝试都失败了。我不确定如何更改 dx 和 dy 的值，但显然我现在拥有的并没有实现边界。
-
好的，我已经检查过了并添加了一个示例，以便更好地理解问题。
-
哦，好吧。谢谢。然后我会去掉非 sn-ped 部分，这样更容易阅读！欣赏它。
标签： javascript html shapes boundary