JavaScript nhấp nháy hoạt ảnh mắt

Question

Tôi hiện đang cố gắng tìm hiểu JavaScript và thử nhiều thứ, nhưng hiện tại, phần mềm JS của tôi vẫn rất hạn chế. Tôi đã tạo một trò chơi nhỏ, nơi có một hộp có đầu thỏ xuất hiện ngẫu nhiên và người dùng phải nhấp vào chúng nhanh nhất có thể.

Vì vậy, tôi đã tạo các chú thỏ với một hoạt ảnh theo khoảng thời gian nơi chú thỏ đóng và mở mắt trong vòng 2 giây một lần. Bây giờ tôi cảm thấy ngớ ngẩn, nhưng tôi không thể xoay xở để có được hoạt hình như tôi muốn. Bây giờ chú thỏ chỉ nhắm mắt mỗi 2 giây và sau đó mở chúng lại sau mỗi 2 giây. Tuy nhiên, tôi muốn nó chỉ chớp mắt, có nghĩa là mắt phải được đóng lại ngay lập tức và sau đó mở ra một lần nữa, để con thỏ nhấp nháy sau mỗi 2 giây. Và sau đó tôi cũng muốn nó ngẫu nhiên đôi khi nhấp nháy chỉ một lần và đôi khi nhấp nháy hai lần. Không chắc chắn nếu điều này là hella dễ dàng và tôi chỉ mù từ giờ mã hóa công cụ và học những điều mới, nhưng có vẻ như tôi có thể cần sự giúp đỡ của bạn ở đây.

Here is a fiddle toàn bộ mọi thứ như hiện tại.

Bạn có thể xem mã hoàn chỉnh đã được sử dụng bên trong fiddle. Tôi không muốn đăng toàn bộ trang web ở đây trong phần mã, nhưng những phần tôi tin là quan tâm đến hoạt ảnh của tôi.

Đây là mã js cho đôi mắt nhấp nháy:

var eyeleft = document.getElementById("eyeleft"); 
var eyeright = document.getElementById("eyeright"); 

window.onload = setInterval(function() { 
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft'); 
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright'); 
    }, 2000); 

Tiếp HTML

<div id="shape" class="game-shapes"> 
    <div class="ears left"></div> 
    <div class="ears right"></div> 
    <div id="eyeleft" class="eyeleft"></div> 
    <div id="eyeright" class="eyeright"></div> 
    <div id="mouth"> 
     <div id="tooth"></div> 
     <div id="tongue"></div> 
    </div> 
</div> 

Và bây giờ CSS

.game-shapes { 
    height: 80px; 
    width: 80px; 
    cursor: pointer; 
    opacity: 0; 
    position: relative; 
    transition: opacity ease-in-out .2s; 
} 
.game-shapes div { 
    position: absolute; 
} 
.eyeleft, 
.eyeright { 
    background: #000; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    top: 30px; 
} 
.eyeleft { 
    left: 4px; 
} 
.eyeright { 
    right: 4px; 
} 
.eyeleft:before, 
.eyeleft:after, 
.eyeright:before, 
.eyeright:after { 
    content: ''; 
    background: #fff; 
    width: 7px; 
    height: 7px; 
    top: 4px; 
    left: 4px; 
    border-radius: 50%; 
    position: absolute; 
    z-index: 5; 
} 
.eyeleft:after, 
.eyeright:after { 
    width: 4px; 
    height: 4px; 
    top: 10px; 
    left: 10px; 
} 
.closedeyeleft, 
.closedeyeright { 
    background: transparent none repeat scroll 0 0; 
    border-color: #000; 
    border-radius: 5px; 
    border-style: solid; 
    border-width: 4px 4px 0; 
    height: 4px; 
    top: 35px; 
    width: 12px; 
} 
.closedeyeleft { 
    left: 3px; 
} 
.closedeyeright { 
    right: 3px; 
} 

Answer 1

Cảm ơn cho một câu hỏi cũng như hình thành với nhiều chi tiết!

Đây là giải pháp tiềm năng để cung cấp cả nhấp nháy nhanh cũng như nhấp nháy thứ hai ngẫu nhiên.

//made blink a named function to improve readability a bit 
var blink = function(isSecondBlink) { 
    //got rid of the ternary expressions since we're always doing 
    //open eyes -> close eyes -> delay -> open eyes 

    //close both eyes 
    eyeleft.className = "closedeyeleft"; 
    eyeright.className = "closedeyeright"; 

    //let's reopen those eyes after a brief delay to make a nice blink animation 
    //as it happens, humans take ~250ms to blink, so let's use a number close to there 
    setTimeout(function() { 
     eyeleft.className = "eyeleft"; 
     eyeright.className = "eyeright"; 
    }, 200); 

    if (isSecondBlink) { return; } //prevents us from blinking 3+ times 

    //This provides a 40% chance of blinking twice, adjust as needed 
    var blinkAgain = Math.random() <= 0.4; 

    //if we need to blink again, go ahead and do it in 300ms 
    if (blinkAgain) { 
    setTimeout(function() { blink(true); }, 300); 
    } 
} 

//go ahead and blink every 2 seconds 
window.onload = setInterval(blink, 2000); 

Answer 2

Có rất nhiều cách để làm điều này và đây là của tôi - chỉ cần thêm thời gian chờ trong khoảng thời gian của bạn để khoảng thời gian thực hiện hành động nhấp nháy hoàn chỉnh.

Demo

var blink = function(){ 
    //close your eyes little bunny 
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft'); 
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright'); 
    setTimeout(function(){ 
    //open them again 
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft'); 
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright'); 
    }, 100); 
}; 

setInterval(blink, 2000); 

Answer 3

Đây là jsfiddle Đây là cách tôi sẽ làm điều đó vì vậy nó sẽ được thực sự ngẫu nhiên nhưng trông vẫn ok

https://jsfiddle.net/y390jcx8/3/

window.onload= startFunc(); 

function startFunc(){ 
    var timer = Math.round(Math.random() * 2000) 
    setInterval(function(){ 
    timer = Math.round(Math.random() * 2000) 


    setTimeout(function(){ 
     console.log(timer) 
       eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft'); 
       eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright'); 
      setTimeout(function(){ 
      eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft'); 
      eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright'); 
      }, 100); 

    },timer) 

    },1000) 

    } 

Vì vậy, ngẫu nhiên cuộc gọi gần, và mở chúng sau 100 một lần nữa