У меня есть изображение монеты coin.png
Я хотел бы появиться, а затем угаснуть вверх по верхней части холста, а затем исчезнуть, но должен быть в состоянии постоянно появляться случайно с таким же поведением, но im not sure как сделать это с моим текущим набором вверх, например, я использую свой холст таким образомFade coin in and out javascript canvas
function writeMessage(canvas, message,x,y) {
var terminal = canvas.getContext('2d');
ClearCanvas();
terminal.font = "20px Comic Sans MS";
terminal.fillStyle = "rgb(0,255,1)";
terminal.textAlign = "center";
terminal.fillText(message, x, y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById("terminalCanvas");
var terminal = canvas.getContext("2d");
terminal.fillStyle = "#000000";
terminal.fillRect(0,0,canvas.width,canvas.height);
terminal.font = "20px Comic Sans MS";
terminal.fillStyle = "rgb(0,255,1)";
terminal.textAlign = "center";
terminal.fillText("Coding Idle Terminal", canvas.width/2, canvas.height/2);
$('#terminalCanvas').click(function(evt){
WriteToCanvas();
function WriteToCanvas(){
if(Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 0){
var rand = Math.floor(Math.random() * 122) + 1;
var tag = htmltags[rand];
Game.Player.money += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.exp += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.clicksTotal += Game.Player.clickIncrement + + (Game.Player.clickIncrement * Game.Player.codingGods/100);
var mousePos = getMousePos(canvas,evt);
var message = tag;
writeMessage(canvas, message,mousePos.x,mousePos.y);
}else if(Game.Terminal.CSSSupport == 1 && Game.Terminal.JavascriptSupport == 0){
var tagList = htmltags.concat(csstags);
var tagListLength = tagList.length;
var rand = Math.floor(Math.random() * tagListLength) + 1;
var tagg = tagList[rand];
Game.Player.money += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.exp += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.clicksTotal += Game.Player.clickIncrement + + (Game.Player.clickIncrement * Game.Player.codingGods/100);
var mousePos = getMousePos(canvas,evt);
var message = tagg;
writeMessage(canvas, message,mousePos.x,mousePos.y);
}else if(Game.Terminal.JavascriptSupport == 1 && Game.Terminal.PHPSupport == 0){
var t1 = csstags.concat(javascripttags);
var tagList = htmltags.concat(t1);
var tagListLength = tagList.length;
var rand = Math.floor(Math.random() * tagListLength) + 1;
var tagg = tagList[rand];
Game.Player.money += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.exp += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.clicksTotal += Game.Player.clickIncrement + + (Game.Player.clickIncrement * Game.Player.codingGods/100);
var mousePos = getMousePos(canvas,evt);
var message = tagg;
writeMessage(canvas, message,mousePos.x,mousePos.y);
}else if(Game.Terminal.PHPSupport == 1){
var t1 = csstags.concat(javascripttags);
var t2 = t1.concat(t1);
var tagList = htmltags.concat(t2);
var tagListLength = tagList.length;
var rand = Math.floor(Math.random() * tagListLength) + 1;
var tagg = tagList[rand];
Game.Player.money += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.exp += Game.Player.clickIncrement + (Game.Player.clickIncrement * Game.Player.codingGods/100);
Game.Player.clicksTotal += Game.Player.clickIncrement + + (Game.Player.clickIncrement * Game.Player.codingGods/100);
var mousePos = getMousePos(canvas,evt);
var message = tagg;
writeMessage(canvas, message,mousePos.x,mousePos.y);
}
}
});
function ClearCanvas(){
terminal.clearRect(0,0,canvas.width,canvas.height);
terminal.fillStyle = "#000000";
terminal.fillRect(0,0,canvas.width,canvas.height);
}
Теперь я предпочел бы иметь отдельную функцию, я могу назвать, пожалуй
function coinRandom(){
var number = Math.floor(Math.random() * 100) + 1;
if(number == 56){
//Draw coin to screen and other stuff
Game.Player.relics += 1;
}else{
//Do nothing
}
}
Самая большая часть функции она должна получить mousePos.x и mousePos.y и сделать монету там, а затем оттуда исчезать torwards в верхней части холста