如何在特定時間後閃爍圖像對象幾秒鐘？

隨着電（這裏用onclick在畫布上）我做槳更長的時間幾秒鐘它再次變得小了。在某些遊戲中，您會看到幾秒鐘後長槳開始閃爍，然後再次達到正常大小。你是怎樣做的？如何在特定時間後閃爍圖像對象幾秒鐘？

這是我的JavaScript代碼：

var canvas = document.getElementById("mijnCanvas"); 
var mijnObject = canvas.getContext("2d"); 

var afbeelding = new Image(); 
var balkX = (canvas.width/2)-50; 
var balkY = canvas.height-40; 

var balX = canvas.width/2; 
var balY = canvas.height-50; 
var radius = 10; 
var balNaarX = 5; 
var balNaarY = 5; 

function makenBalkKort() { 
    mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height); 
} 
afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Kort.png"; 

function makenBal() { 
    mijnObject.beginPath(); 
    var mijnBalGradient = mijnObject.createRadialGradient(balX, balY, 0, balX, balY, 8); 
    mijnBalGradient.addColorStop(0, "black"); 
    mijnBalGradient.addColorStop(1, "white"); 
    mijnObject.fillStyle = mijnBalGradient; 
    mijnObject.strokeStyle = ("black"); 
    mijnObject.arc(balX, balY, radius, 0, 2*Math.PI, false); 
    mijnObject.fill(); 
    mijnObject.stroke(); 
    mijnObject.closePath(); 
} 

function tekenenObjecten() { 
    mijnObject.clearRect(0, 0, canvas.width, canvas.height); 
    makenBal(); 
    makenBalkKort(); 

    setTimeout(function() { 
     if(balX+balNaarX > canvas.width-radius || balX+balNaarX < radius) { 
      balNaarX = -balNaarX; 
     } 
     if(balY+balNaarY < radius) { 
      balNaarY = -balNaarY; 
     } 
     else if(balY+balNaarY > balkY-radius) { 
      if(balX > balkX && balX < balkX + afbeelding.width) { 
       balNaarY = -balNaarY; 
      } 
      else { 
       alert("Game over"); 
      } 
     } 
     balX += balNaarX; 
     balY += balNaarY; 
    }, 1000); 
} 
setInterval(tekenenObjecten, 20); 

window.addEventListener("keydown", function LinksOfRechts() { 
    mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height); 
    var balkNaarX = 10; 
    var code = event.which || event.keyCode; 
    if(code == 37) { 
     if(balkX > 0) { 
      balkX -= balkNaarX; 
     } 
    } 
    else if(code == 39) { 
     if(balkX < canvas.width-afbeelding.width) { 
      balkX += balkNaarX; 
     } 
    } 
    mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height); 
}); 

canvas.addEventListener("click", function balkLangMaken() { 
    mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height); 
    afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Lang.png"; 
    setTimeout(function() { 
     mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height); 
     afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Kort.png"; 
    }, 3000); 
});

這是我的HTML代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>BrickSmasher</title> 
<style> 
    canvas { 
     position: relative; 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
    } 
</style> 
</head> 

<body> 
    <canvas id="mijnCanvas" width="500" height="500" style="border: 1px solid black"></canvas> 
    <script src="BrickSmasher.js"></script> 
</body> 
</html>

以下是圖像：

BrickSmasher_Balk_Kort

BrickSmasher_Balk_Lang

來源

2016-04-23 KevinN

您可以使用運行短閃爍動畫循環

開始用這些變量：

// the x,y of the flickering paddle 
var flickerX=50; 
var flickerY=50; 
// the starting time of the flickering animation 
var flickerStart=0; 
// how long the flickering will continue (2000ms==2seconds) 
var flickerDuration=2000; 
// a flag indicating if the paddle currently [shows|doesn't show] 
var flickerIsOn=true; 
// the next time at which the flicker will reverse (show <--> noShow) 
var nextTime=0;

然後在動畫循環，你...

等待一段時間。會自動發送當前時間戳，您可以使用該時間戳來計算是否已經過了短時間。
計算新的短隨機的「忽悠」的持續時間。
翻轉的flickerIsOn指示所述槳[顯示|不顯示。
如果flickerIsOn標誌爲true，則drawImage槳。如果flickerIsOn標誌爲假，那麼clearRect槳區。
如果動畫的持續時間還沒有過去，請求另一個動畫循環。如果閃爍動畫已完成，請重新繪製小槳。

這裏的註釋代碼和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
$('#flicker').prop('disabled',true); 
 
var flickerX=50; 
 
var flickerY=50; 
 
var flickerStart=0; 
 
var flickerDuration=2000; 
 
var flickerIsOn=true; 
 
var nextTime=0; 
 
var paddle=new Image(); 
 
paddle.onload=start; 
 
paddle.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/paddle.png"; 
 
var paddleSmall=new Image(); 
 
paddleSmall.onload=start; 
 
paddleSmall.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/paddleSmall.png"; 
 
var imgCount=2; 
 
function start(){ 
 
    if(!--imgCount){return;} 
 
    ctx.drawImage(paddle,flickerX,flickerY); 
 
    $('#flicker').on('click',function(){ 
 
     startFlicker(flickerX,flickerY); 
 
    }); 
 
    $('#flicker').prop('disabled',false); 
 
} 
 
// 
 
function startFlicker(){ 
 
    flickerStart=performance.now(); 
 
    flickIsOn=true; 
 
    nextTime=0; 
 
    requestAnimationFrame(flickerPaddle); 
 
} 
 
// 
 
function flickerPaddle(time){ 
 
    // wait 
 
    if(time<nextTime){requestAnimationFrame(flickerPaddle);return;} 
 
    // calculate a short random duration 
 
    nextTime=time+(50+Math.random()*150); 
 
    // flip the flicker flag 
 
    flickerIsOn=!flickerIsOn; 
 
    // if flickerIsOn, draw the paddle 
 
    if(flickerIsOn){ 
 
     ctx.drawImage(paddle,flickerX,flickerY); 
 
    }else{ 
 
     ctx.clearRect(flickerX,flickerY,paddle.width,paddle.height); 
 
    } 
 
    // continue animating until flickerDuration is reached 
 
    if(time-flickerStart<flickerDuration){ 
 
     requestAnimationFrame(flickerPaddle); 
 
    }else{ 
 
     ctx.clearRect(flickerX,flickerY,paddle.width,paddle.height); 
 
     ctx.drawImage(paddleSmall,flickerX,flickerY); 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id=flicker>Flicker randomly for 2 seconds</button><br> 
 
<canvas id="canvas" width=300 height=300></canvas>

來源

2016-04-23 18:29:46 markE

謝謝您的答覆。這看起來非常令人印象深刻，我想要的是正確的。唯一的問題是，我不熟悉jQuery，我對jQuery一無所知。如果沒有太多要求，你可以用Javascript代碼發送同樣的東西。如果你這樣做，我會永遠感謝你。 – KevinN

@KevinN **關於jQuery：** jQuery僅適用於演示按鈕，您的應用根本不需要按鈕。你只需要'startFlicker'和'flickerPaddle'功能。 ;-) – markE

我想感謝你的幫助。這段代碼將幫助我進一步研究我的迷你遊戲。 – KevinN

如何在特定時間後閃爍圖像對象幾秒鐘？

回答

相關問題