This is supposed to generate 4 shapes from a DOM that aree positioned differently across the screen, and move across the screen when prompted.
I'm having issue making the boundaryChecker function work. I've been trying for ages to figure what to do, but am stumped. I know that I have to call by value and not reference for the dx and dy values since they're objects, but I am just unsure how to execute that. If anyone can help and provide code/pseudocode or even just advice I'd appreciate it.
Ultimately it needs to reach the end, and switch directions, so it is bouncing across the screen.
Code example:
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>
