ユーザーがクリックしたときにテキストがサイクリングを停止するにはどうすればよいですか？

ユーザーが画面をクリックしたときにランダムに生成されるテキストがあります。すべてが動き、色などで動作しますが、単語を変更する配列を常に循環します。ユーザーがクリックして配列を循環せずにその単語を画面に表示するたびに、ランダムに単語を選択するにはどうすればよいですか？コードは次のとおりです。ユーザーがクリックしたときにテキストがサイクリングを停止するにはどうすればよいですか？

<html> 
<head> 
<script> 
var canvas; 
var context; 
var texts = []; 
var timer; 

function init() { 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext("2d"); 
    resizeCanvas(); 
    window.addEventListener('resize', resizeCanvas, false); 
    window.addEventListener('orientationchange', resizeCanvas, false); 

    canvas.onclick = function(event) { 
     handleClick(event.clientX, event.clientY); 
    } 

    var timer = setInterval(resizeCanvas, 30); 
} 

function Text(x,y,textColor) { 
     this.x = x; 
     this.y = y; 
     this.textColor = textColor; 

     this.vx = Math.random() * 30 - 15; 
     this.vy = Math.random() * 30 - 15; 
     this.time = 300; 
} 

function handleClick(x,y) { 
     var colors = [[255,0,0],[255,255,0],[0,0,255]]; 
     var textColor = colors[Math.floor(Math.random()*colors.length)]; 
     texts.push(new Text(x,y,textColor)); 
     for (var i=0; i<texts.length; i++) { 
      drawText(texts[i]); 
     } 
} 

function timeToFade(time) { 
    if(time > 100) { 
     return 1; 
    } 
    else { 
     return time/100; 
    } 
} 

function drawText(text) { 
    context.font = "bold 60px Verdana"; 
    var textSayings = ['Cool!', 'Nice!', 'Awesome!', 'Wow!', 'Whoa!', 'Super!', 'Woohoo!', 'Yay!', 'Yeah!'] 
    var whichText = textSayings[Math.floor(Math.random()*textSayings.length)]; 

    var c = text.textColor 
    context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (text.time/100) + ')'; 
    context.fillText(whichText,text.x,text.y); 
} 

function resizeCanvas() { 
    canvas.width = window.innerWidth-20; 
    canvas.height = window.innerHeight-20; 
    fillBackgroundColor(); 
    for (var i=0; i<texts.length; i++) { 
     var te = texts[i]; 
     drawText(te); 

     if (te.x + te.vx > canvas.width || te.x + te.vx < 0) 
      te.vx = -te.vx 
     if (te.y + te.vy > canvas.height || te.y + te.vy < 0) 
      te.vy = -te.vy 
     if (te.time === 0) { 
      texts.splice(i,1); 
     } 

     te.time -= 3; 
     te.x += te.vx; 
     te.y += te.vy; 
    } 
} 

function fillBackgroundColor() { 
    context.globalCompositeOperation = 'source-over'; 
    context.fillStyle = 'rgba(0, 0, 0, 1)'; 
    context.fillRect(0,0,canvas.width,canvas.height); 
    context.globalCompositeOperation = 'lighter'; 
} 

window.onload = init; 
</script> 
</head> 
<body> 
    <canvas id="canvas" width="500" height="500"></canvas> 
</body> 
</html>

出典

2016-12-11 George

描画機能からワードピッキングロジックを移動する必要があります。ループに入る前に単語を選んでその単語を描画機能に渡すだけで、実際には何かを描画することになります。

あなたはこのような何かを行うことができます：私はTextクラスにwordプロパティを追加

var canvas; 
 
var context; 
 
var texts = []; 
 
var timer; 
 
var textSayings = ['Cool!', 'Nice!', 'Awesome!', 'Wow!', 'Whoa!', 'Super!', 'Woohoo!', 'Yay!', 'Yeah!'] 
 

 
function init() { 
 
    canvas = document.getElementById('canvas'); 
 
    context = canvas.getContext("2d"); 
 
    resizeCanvas(); 
 
    window.addEventListener('resize', resizeCanvas, false); 
 
    window.addEventListener('orientationchange', resizeCanvas, false); 
 

 
    canvas.onclick = function(event) { 
 
    handleClick(event.clientX, event.clientY); 
 
    } 
 

 
    var timer = setInterval(resizeCanvas, 30); 
 
} 
 

 
function Text(x, y, textColor, word) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.word = word; 
 
    this.textColor = textColor; 
 

 
    this.vx = Math.random() * 30 - 15; 
 
    this.vy = Math.random() * 30 - 15; 
 
    this.time = 300; 
 
} 
 

 
function handleClick(x, y) { 
 
    var colors = [ 
 
    [255, 0, 0], 
 
    [255, 255, 0], 
 
    [0, 0, 255] 
 
    ]; 
 
    var textColor = colors[Math.floor(Math.random() * colors.length)]; 
 
    texts.push(new Text(
 
    x, 
 
    y, 
 
    textColor, 
 
    pickWord() 
 
)); 
 
    for (var i = 0; i < texts.length; i++) { 
 
    drawText(texts[i]); 
 
    } 
 
} 
 

 
function timeToFade(time) { 
 
    if (time > 100) { 
 
    return 1; 
 
    } else { 
 
    return time/100; 
 
    } 
 
} 
 

 
function pickWord() { 
 
    return textSayings[Math.floor(Math.random() * textSayings.length)]; 
 
} 
 

 
function drawText(text) { 
 
    context.font = "bold 60px Verdana"; 
 

 
    var c = text.textColor 
 
    context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (text.time/100) + ')'; 
 
    context.fillText(text.word, text.x, text.y); 
 
} 
 

 
function resizeCanvas() { 
 
    canvas.width = window.innerWidth - 20; 
 
    canvas.height = window.innerHeight - 20; 
 
    fillBackgroundColor(); 
 
    for (var i = 0; i < texts.length; i++) { 
 
    var te = texts[i]; 
 
    drawText(te); 
 

 
    if (te.x + te.vx > canvas.width || te.x + te.vx < 0) 
 
     te.vx = -te.vx 
 
    if (te.y + te.vy > canvas.height || te.y + te.vy < 0) 
 
     te.vy = -te.vy 
 
    if (te.time === 0) { 
 
     texts.splice(i, 1); 
 
    } 
 

 
    te.time -= 3; 
 
    te.x += te.vx; 
 
    te.y += te.vy; 
 
    } 
 
} 
 

 
function fillBackgroundColor() { 
 
    context.globalCompositeOperation = 'source-over'; 
 
    context.fillStyle = 'rgba(0, 0, 0, 1)'; 
 
    context.fillRect(0, 0, canvas.width, canvas.height); 
 
    context.globalCompositeOperation = 'lighter'; 
 
} 
 

 
window.onload = init; 
 
init();

<canvas id="canvas" width="500" height="500"></canvas>

注意、およびグローバルリストから単語を選択しpickWord機能を。

出典

2016-12-11 00:13:54 paulgv

これは素晴らしい動作です、ありがとうございます！ – George

ユーザーがクリックしたときにテキストがサイクリングを停止するにはどうすればよいですか？

答えて

関連する問題