Taylor Styles Taylor Styles - 6 months ago 19
Javascript Question

<canvas> javascript for when touching another object

I'm making a website for my digital assessment for school & need a hand with my javascript game which is being coded inside the

<canvas>
element. So pretty much I've got this little drone being controlled by the "forward", "left" , "right" & "back" buttons to move the drone around, since my background is a flat 2d image with walls on it I've made 100% transparent boxes and placed them over the wall areas to mimic the walls being there.

I just can't find any help with the IF statement where the drone touches the invisible box it puts it back to 43X 110Y... the code is below if you think you can help!! :)

(MyGamePiece is the drone, myHitBox is the invisible image.)

<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myBackground;
var myHitBox;
var myHitBox1;
var myHitBox2;
var myHitBox3;
var myHitBox4;
var myHitBox5;

function startGame() {
myGamePiece = new component(50, 50, "img/forward.gif", 43, 110, "image");
myHitBox = new component(275, 20, "img/hitbox.png", 250, 169, "image");
myHitBox1 = new component(30, 100, "img/hitbox.png", 250, 170, "image");
myHitBox2 = new component(280, 25, "img/hitbox.png", 0, 80, "image");
myHitBox3 = new component(30, 100, "img/hitbox.png", 120, 80, "image");
myHitBox4 = new component(145, 25, "img/hitbox.png", 375, 80, "image");
myHitBox5 = new component(30, 100, "img/hitbox.png", 375, 0, "image");
myBackground = new component(650, 270, "img/MAP.jpg", 0, 0, "image");
myGameArea.start();
}


var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 650;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}

function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}

function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
myHitBox.newPos();
myHitBox.update();
myHitBox1.newPos();
myHitBox1.update();
myHitBox2.newPos();
myHitBox2.update();
myHitBox3.newPos();
myHitBox3.update();
myHitBox4.newPos();
myHitBox4.update();
myHitBox5.newPos();
myHitBox5.update();
}

function move(dir1) {
if (dir1 == "down") {myGamePiece.speedY = 5; myGamePiece.image.src = "img/forward.gif";}
else if (dir1 == "up") {myGamePiece.speedY = -5; myGamePiece.image.src = "img/back.gif";}
else if (dir1 == "right") {myGamePiece.speedX = 5; myGamePiece.image.src = "img/right.gif";}
else if (dir1 == "left") {myGamePiece.speedX = -5; myGamePiece.image.src = "img/left.gif";}
}


function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
<button onmousedown="move('up')" onmouseup="clearmove()" ontouchstart="move('up')">UP</button><br><br>
<button onmousedown="move('left')" onmouseup="clearmove()" ontouchstart="move('left')">LEFT</button>
<button onmousedown="move('right')" onmouseup="clearmove()" ontouchstart="move('right')">RIGHT</button><br><br>
<button onmousedown="move('down')" onmouseup="clearmove()" ontouchstart="move('down')">DOWN</button>
</div>

DBS DBS
Answer

The alternative solution I mentioned in the comments, as you were interested:

If you have a complex background, you can create a simple map equivalent.

E.g. This background: Actual background

Would use this simple layout map: Layout map

Then have a second invisible canvas where you run something along these lines:

(Rough outline, will need to be edited to work for you)

var x = <drone X position>;
var y = <drone Y position>;
var colour = secondCanvasContext.getImageData(x, y, 1, 1).data; 
if(colour[0] == 0 && colour[1] == 0 && colour[2] == 0){
    // Your drone is on a black background, so it's not hitting a wall
}
Comments