这应该从DOM中生成4个形状，这些形状在屏幕上的位置不同，并在出现提示时在屏幕上移动。
我遇到了使boundaryChecker功能正常工作的问题。我一直在努力想要做什么，但我很难过。我知道我必须通过值调用而不是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>
答案 0 :(得分：1)
您忘记更新左侧和顶部样式的值，然后它的工作原理如下：
var left = parseInt(elm.style.left);
var top = parseInt(elm.style.top);
if (left > 100 || left < 0) {
dx = 0, left = 100;
elm.style.left = left + 'px'
}
if (top > 100 || top < 0) {
dy = 0, top = 100
elm.style.top = top + 'px'
}
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, dx, dy);
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, dx, dy) {
var elm = getElement(objID);
var left = parseInt(elm.style.left);
var top = parseInt(elm.style.top);
if (left > 100 || left < 0) {
dx = 0, left = 100;
elm.style.left = left + 'px'
}
if (top > 100 || top < 0) {
dy = 0, top = 100
elm.style.top = top + 'px'
}
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>