jQuery_jquery를 사용하여 구현한 주사위 던지기 게임의 애니메이션 효과-JS 튜토리얼-php.cn

구현 원리: 주사위를 던진 후 jQuery의 animate() 함수를 통해 주사위의 변위를 변경하고 중간에 지연 효과를 추가하며 마지막으로 주사위의 배경이 변경되면 애니메이션이 중지됩니다. 무작위로 생성된 포인트에 도달하여 굴린 포인트 수가 표시됩니다. 실제로 애니메이션 프로세스는 서로 다른 그림의 여러 프레임을 추가하는 것입니다(플래시 애니메이션 비디오의 프레임과 동일). 프레임이 많을수록 효과가 더 좋아집니다. 그런 다음 프레임별로 실행하면 애니메이션 효과가 형성됩니다.
1. 준비
주사위 재료를 준비해야 합니다. 이번 예시에서는 주사위 6개를 가공해야 합니다. -6점)과 중간 전환 효과(모션 블러 처리)가 적용된 사진을 같은 사진 위에 배치하여 dice.png로 저장하고 주사위 배경 이미지로 사용합니다.
jQuery 라이브러리를 로드하는 것이 필요합니다.

코드 복사 코드는 다음과 같습니다.

그런 다음 HTML 페이지 본문에 다음 코드를 추가합니다. 여기서 #dice는 주사위를 배치하는 데 사용되고 #result는 프롬프트를 표시하는 데 사용됩니다. 정보.

코드 복사 코드는 다음과 같습니다.

위의 주사위를 직접 클릭해주세요!

2. CSS 코드
배경을 사용하여 dice.png 이미지를 .dice에 로드합니다. 그런 다음 여러 스타일을 사용하여 다양한 배경 위치 값을 통해 다양한 주사위 포인트 수치와 전환 효과 그림을 배치했습니다. 전환 효과 이미지에 간단한 흐림 처리를 수행했습니다. CSS3를 사용하여 이미지의 흐림 효과를 처리할 수도 있습니다. 나중에 언급할 반복 클릭을 방지하기 위해 #dice_mask가 사용된다는 점에 유의하세요.

코드 복사 코드는 다음과 같습니다.

.wrap{width:90px height:90px; :120px 자동 30px 자동; 위치:상대적} 
.dice{width:90px; height:90px; background:url(dice.png) no-repeat;} 
.dice_1{배경-위치:-5px - 4px} 
.dice_2{배경-위치:-5px -107px} 
.dice_3{배경-위치:-5px -212px} 
.dice_4{배경-위치:-5px -317px} 
 .dice_5{ 배경 위치:-5px -427px} 
.dice_6{배경 위치:-5px -535px} 
.dice_t{배경 위치:-5px -651px} 
.dice_s{배경- 위치:- 5px -763px} 
.dice_e{배경-위치:-5px -876px} 
p#result{text-align:center; 글꼴 크기:16px} 
p#result 범위{font -중량: 굵게:#f30; 여백:6px} 
#dice_mask{width:90px; 높이:90px; 위치:절대값: 0; 0; z -index:999} 

3. jQuery 코드
주사위를 클릭할 때 먼저 주사위 스타일을 미리 설정하고(마지막 애니메이션 이후 스타일을 지움) 변경합니다. 색상 반복 클릭을 방지하기 위해 투명한 #dice_mask 를 사용하여 주사위를 덮고, 1~6 사이의 난수를 생성합니다. 그런 다음 animate() 함수를 사용하여 주사위의 변위를 변경하고 주사위의 클래스를 변경하여 주사위를 만듭니다. 일시적인 흐릿한 배경 이미지가 나타난 후 약간의 지연이 발생하고 애니메이션이 끝나면 주사위의 클래스 스타일이 dice_x에 배치됩니다.

코드 복사 코드는 다음과 같습니다.

$(function(){ 
    var dice = $("#dice"); 
    dice.click(function(){ 
        dice.attr("class","dice"); //清除上次动画后的点数 
        dice.css("cursor","default"); 
        $(".wrap").append("< ;/div>");//加遮罩 
        var num = Math.floor(Math.random()*6 1);//产生随机数1-6 
        dice.animate({왼쪽: ' 2px'}, 100,function(){ 
            dice.addClass("dice_t") 
        }).delay(200).animate({top:'-2px'},100,function() { 
            dice.removeClass("dice_t").addClass("dice_s") 
        }).delay(200).animate({opacity: 'show'},600,function(){ 
 dice.removeClass("dice_s").addClass("dice_e"); 
        }).delay(100).animate({left:'-2px',top:'2px'},100,function(){ 
            dice.removeClass("dice_e").addClass("dice_" num) 
           $("#result").html("您掷得点数是" num "            dice.css('cursor','pointer'); 
            $("#dice_mask").remove();//移除遮罩 
        }); 
 }); 
});

JQuery는 one(), live(),bind(),on()等这些函数에서行不可，所以我想了个办法，当点击color子后开始动画时，用一个andcolor子大小一样的透ming遮罩层将color子遮住，使得动画运行中不可连续重复点击color子，当动画运行完成后，再将遮罩层移除，这样color子就可以重新被点击了.
以上掷画效果就是模拟了flash的帧动画，通过时间轴来播放逐帧运行，而运사용jQuery는 可以代替flash完成这样的动画效果，虽然效果没有flash炫.本文的掷画效果是为下期文章做铺垫，下期文章我将给大家介绍结합jQuery、HTML、CSS、PHP、MySQL 의 결합성 技术文章及实例代码, 讲解掷color子抽奖游戏,可以控控掷出color子点数的概率，也是一个趣味游戏。