How do I do Collisions in my JavaScript Game Code Below?
Posted
by
Henry
on Game Development
See other posts from Game Development
or by Henry
Published on 2012-07-03T03:01:05Z
Indexed on
2012/07/03
3:25 UTC
Read the original article
Hit count: 416
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>
© Game Development or respective owner
