Answer the question
In order to leave comments, you need to log in
Collision of two objects on canvas?
There are two tanks (objects) that I can move inside my canvas with the keys, when they approach each other, you need to not let them pass through each other, but just push back 5px, help?)
Code:
init();
function init() {
audio = new Audio("audio.mp3");
// audio.play();
tank = new Tank(100, 100, 60, 85, "killer.svg");
enemyTank = new Tank(60, 60, 85, 75, "tanchik.png");
myGame = new MyGame();
myGame.startGame();
}
function MyGame() {
var self = this;
self.canvas = document.getElementById("myCanvas");
self.context = self.canvas.getContext("2d");
self.key = false;
self.randomDirection = false;
self.startGame = function() {
setInterval(self.updateGameArea, 1);
setInterval(enemyTank.getRandomDirection, 1000);
window.addEventListener('keydown', function (e) {
self.key = e.keyCode;
});
window.addEventListener('keyup', function (e) {
self.key = false;
});
}
self.updateGameArea = function() {
self.clear();
if (self.key == 37) {
tank.moveLeft();
}
if (self.key == 38) {
tank.moveUp();
}
if (self.key == 39) {
tank.moveRight();
}
if (self.key == 40) {
tank.moveDown();
}
if(self.key == 32) {
tank.bullets.push(new Bullet(tank.angle, tank.x, tank.y, tank.width, tank.height));
self.key = false;
}
tank.drawTank();
enemyTank.drawRandomly();
for (i = 0; i < tank.bullets.length; i++) {
tank.bullets[i].drawBullet();
}
}
self.drawRotatedImage = function(image, x, y, angle, width, height) {
TO_RADIANS = Math.PI/180;
myGame.context.save();
myGame.context.translate(x, y);
myGame.context.rotate(angle * TO_RADIANS);
myGame.context.drawImage(image, -(width/2), -(height/2), width, height);
myGame.context.restore();
}
self.clear = function() {
self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
}
}
function Tank(x, y, width, height, src) {
var self = this;
self.x = x;
self.y = y;
self.width = width;
self.height = height;
self.img = new Image();
self.img.src = src;
self.bullets = [];
self.angle = 0;
self.randomMovement = self.moveLeft;
self.moveRight = function() {
self.angle = 90;
if(self.canMove()) {
self.x++;
}
}
self.moveLeft = function() {
self.angle = -90;
if (self.canMove()) {
self.x--;
}
}
self.moveUp = function() {
self.angle = 0;
if (self.canMove()) {
self.y--;
}
}
self.moveDown = function() {
self.angle = 180;
if (self.canMove()) {
self.y++;
}
}
self.checkBoundaries = function() {
if (self.x > self.width/2 &&
self.x < myGame.canvas.width-self.width/2 &&
self.y > self.height/2 &&
self.y < myGame.canvas.height-self.height/2
) {
return true;
}
if (self.x <= self.width/2) {
self.x+=5;
}
if (self.x >= myGame.canvas.width - self.width/2) {
self.x-=5;
}
if (self.y <= self.height/2) {
self.y+=5;
}
if (self.y >= myGame.canvas.height - self.height/2) {
self.y-=5;
}
return false;
}
this.canMove = function() {
if (self.x > self.width/2 &&
self.x < myGame.canvas.width - self.width/2 &&
self.y > self.height/2 &&
self.y < myGame.canvas.height - self.height/2) {
return true;
}
if (self.x >= myGame.canvas.width - self.width/2) {
self.x-=5;
}
if (self.x <= self.width/2) {
self.x+=5;
}
if (self.y >= myGame.canvas.height - self.height/2) {
self.y-=5;
}
if (self.y <= self.height/2) {
self.y+=5;
}
}
self.drawTank = function() {
myGame.drawRotatedImage(self.img, self.x, self.y, self.angle, self.width, self.height);
}
self.getRandomDirection = function() {
movements = [self.moveRight, self.moveLeft, self.moveDown, self.moveUp];
self.randomMovement = movements[Math.floor(Math.random() * movements.length)];
}
self.drawRandomly = function() {
self.randomMovement();
myGame.drawRotatedImage(self.img, self.x, self.y, self.angle, self.width, self.height);
}
}
function Bullet(direction, x, y, tank_width, tank_height) {
var self = this;
self.img = new Image();
self.img.src = "tank_bullet.png";
self.direction = direction;
self.tank_width = tank_width;
self.tank_height = tank_height;
self.width = 50;
self.height = 20;
self.angle = 0;
self.current_movement = self.moveDown;
if (self.direction == 0) {
self.x = x;
self.y = y - self.tank_height/2 - 15;
} else if (self.direction == 90) {
self.x = x + self.tank_width/2 + 15;
self.y = y;
} else if (self.direction == -90) {
self.x = x - self.tank_width/2 - 15;
self.y = y;
} else if (self.direction == 180) {
self.x =x;
self.y = y + self.tank_height/2 + 15;
}
self.moveUp = function() {
self.y-=3;
self.angle=-90;
}
self.moveLeft = function() {
self.x-=3;
self.angle=180;
}
self.moveRight = function() {
self.x+=3;
self.angle=0;
}
self.moveDown = function() {
self.y+=3;
self.angle=90;
}
self.drawBullet = function() {
if (self.direction == 0) {
self.moveUp();
}
if (self.direction == 90) {
self.moveRight();
}
if (self.direction == -90) {
self.moveLeft();
}
if (self.direction == 180) {
self.moveDown();
}
myGame.drawRotatedImage(self.img, self.x, self.y, self.angle, self.width, self.height);
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question