У меня есть простая игра на основе холста, где мне нужно собрать объект и избежать другого. Мне нужно изменить анимацию игрового элемента, пока он сталкивается с объектом, который нужно собрать.
Сейчас я могу изменить его изображение, когда они сталкиваются, но как мне вернуть его обратно, когда это не так?
<script>
var gametime = 1;
var myGamePiece;
var myObstacles = [];
var toCollect = [];
var score=0;
var timeleft=[];
var showscore=[];
function startGame() {
showscore = new component("30px", "Consolas", "black", 300, 40, "text");
timeleft = new component("30px", "Consolas", "black", 5, 40, "tex");
myGamePiece = new component(20,30, "https://cdn1.iconfinder.com/data/icons/human-standing-postures-and-poses/244/human-013-512.png", 220, 120,"image");
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
document.getElementById("canvascontainer").appendChild(this.canvas);
this.canvas.style.cursor = "none";
this.context = this.canvas.getContext("2d");
this.pause= false;
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousemove', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
},
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 (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else if (this.type == "tex") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else 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;
this.hitBottom();
}
this.hitBottom = function() {
var rightlimit = myGameArea.canvas.width - this.width;
var bottomlimit=myGameArea.canvas.height- this.height;
if (this.x > rightlimit) {
this.x = rightlimit;
}
else if (this.x < 0) {
this.x = 0;
}
else if (this.y < 0) {
this.y = 0;
}
else if (this.y > bottomlimit) {
this.y = bottomlimit;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
var x, y,z;
var ss=-4;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myObstacles[i].y -= 900;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(4)) {
ap=Math.floor(Math.random() * (460 - 20) + 20)
z =myGameArea.canvas.width-ap;
y = myGameArea.canvas.height ;
toCollect.push(new component(20, 20, "https://i.pinimg.com/originals/d0/04/28/d00428efa0bf27b9edd37eac32dfd2c1.png", z, y,"image"));
}
for (i = 0; i < toCollect.length; i += 1) {
toCollect[i].y +=-3
toCollect[i].update();}
if (myGameArea.frameNo == 1 || everyinterval(10)) {
gap= Math.floor(Math.random() * (450 - 30) + 30)
x = myGameArea.canvas.width- gap;
y = myGameArea.canvas.height ;
myObstacles.push(new component(10, 20, "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRfO8UyiQrsia2lPOLAlUYYi-x8PHJEF8b3V4Wg1dF0z4JDSkkW", x, y,"image"));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].y += -3;
myObstacles[i].update(); }
for (i = 0; i < toCollect.length; i += 1) {
if (myGamePiece.crashWith(toCollect[i])) {
score++;
myGamePiece.image.src="smiley.gif";
}
}
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
основной код будет
for (i = 0; i < toCollect.length; i += 1) {
if (myGamePiece.crashWith(toCollect[i])) {
score++;
myGamePiece.image.src="smiley.gif";
}
}