How do I do Collisions in my JavaScript Game Code Below?
- by Henry
I'm trying to figure out how would I add collision detection to my code so that when the "Man" character touches the "RedHouse" the RedHouse disappears? Thanks. By the way, I'm new to how things are done on this site, so thus, if there is anything else needed or so, let me know.
<title>HMan</title>
<body style="background:#808080;">
<br>
<canvas id="canvasBg" width="800px" height="500px"style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>
<canvas id="canvasRedHouse" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>
<canvas id="canvasEnemy" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>
<canvas id="canvasEnemy2" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>
<canvas id="canvasMan" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>
<script>
var isPlaying = false;
var requestAnimframe = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var canvasRedHouse = document.getElementById('canvasRedHouse');
var ctxRedHouse = canvasRedHouse.getContext('2d');
var House1; House1 = new RedHouse();
var canvasMan = document.getElementById('canvasMan');
var ctxMan = canvasMan.getContext('2d');
var Man1; Man1 = new Man();
var imgSprite = new Image();
imgSprite.src = 'SpritesI.png';
imgSprite.addEventListener('load',init,false);
function init() {
drawBg();
startLoop();
document.addEventListener('keydown',checkKeyDown,false);
document.addEventListener('keyup',checkKeyUp,false);
}
function drawBg() {
var SpriteSourceX = 0;
var SpriteSourceY = 0;
var drawManOnScreenX = 0;
var drawManOnScreenY = 0;
ctxBg.drawImage(imgSprite,SpriteSourceX,SpriteSourceY,800,500,drawManOnScreenX,
drawManOnScreenY,800,500);
}
function clearctxBg() {
ctxBg.clearRect(0,0,800,500);
}
function Man() {
this.SpriteSourceX = 10;
this.SpriteSourceY = 540;
this.width = 40;
this.height = 115;
this.DrawManOnScreenX = 100;
this.DrawManOnScreenY = 260;
this.speed = 10;
this.actualFrame = 1;
this.speed = 2;
this.isUpKey = false;
this.isRightKey = false;
this.isDownKey = false;
this.isLeftKey = false;
}
Man.prototype.draw = function () {
clearCtxMan();
this.updateCoors();
this.checkDirection();
ctxMan.drawImage(imgSprite,this.SpriteSourceX,this.SpriteSourceY+this.height*
this.actualFrame,
this.width,this.height,this.DrawManOnScreenX,this.DrawManOnScreenY,
this.width,this.height);
}
Man.prototype.updateCoors = function(){
this.leftX = this.DrawManOnScreenX;
this.rightX = this.DrawManOnScreenX + this.width;
this.topY = this.DrawManOnScreenY;
this.bottomY = this.DrawManOnScreenY + this.height;
}
Man.prototype.checkDirection = function () {
if (this.isUpKey && this.topY > 240) {
this.DrawManOnScreenY -= this.speed;
}
if (this.isRightKey && this.rightX < 800) {
this.DrawManOnScreenX += this.speed;
}
if (this.isDownKey && this.bottomY < 500) {
this.DrawManOnScreenY += this.speed;
}
if (this.isLeftKey && this.leftX > 0) {
this.DrawManOnScreenX -= this.speed;
}
if (this.isRightKey && this.rightX < 800) {
if (this.actualFrame > 0) {
this.actualFrame = 0;
}
else {
this.actualFrame++;
}
}
if (this.isLeftKey) {
if (this.actualFrame > 2) {
this.actualFrame = 2;
}
function checkKeyDown(var keyID = e.keyCode || e.which;
if (keyID === 38) {
Man1.isUpKey = true;
e.preventDefault();
}
if (keyID === 39 ) {
Man1.isRightKey = true;
e.preventDefault();
}
if (keyID === 40 ) {
Man1.isDownKey = true;
e.preventDefault();
}
if (keyID === 37 ) {
Man1.isLeftKey = true;
e.preventDefault();
}
}
function checkKeyUp(e) {
var keyID = e.keyCode || e.which;
if (keyID === 38 || keyID === 87) {
Man1.isUpKey = false;
e.preventDefault();
}
if (keyID === 39 || keyID === 68) {
Man1.isRightKey = false;
e.preventDefault();
}
if (keyID === 40 || keyID === 83) {
Man1.isDownKey = false;
e.preventDefault();
}
if (keyID === 37 || keyID === 65) {
Man1.isLeftKey = false;
e.preventDefault();
}
}
function clearCtxMan() {
ctxMan.clearRect(0,0,800,500);
}
function RedHouse() {
this.srcX = 135;
this.srcY = 525;
this.width = 265;
this.height = 245;
this.drawX = 480;
this.drawY = 85;
}
RedHouse.prototype.draw = function () {
clearCtxRedHouse();
ctxRedHouse.drawImage(imgSprite,this.srcX,this.srcY,
this.width,this.height,this.drawX,this.drawY,this.width,this.height);
};
function clearCtxRedHouse() {
ctxRedHouse.clearRect(0,0,800,500);
}
function loop() {
if (isPlaying === true){
Man1.draw();
House1.draw();
requestAnimframe(loop);
}
}
function startLoop(){
isPlaying = true;
loop();
}
function stopLoop(){
isPlaying = false;
}
</script>
<style>
.top{
position: absolute;
top: 4px;
left: 10px;
color:black;
}
.top2{
position: absolute;
top: 60px;
left: 10px;
color:black;
}
</style>
<div class="top">
<p><font face="arial" color="black" size="4"><b>HGame</b><font/><p/>
<p><font face="arial" color="black" size="3">
My Game Here
<font/><p/>
</div>
<div class="top2">
<p><font face="arial" color="black" size="3">
It will start now
<font/><p/>
</div>
