js实现考验眼力找出相同表情的小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现考验眼力找出相同表情的小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,500&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html {
    	-moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      overflow-x: hidden;
      overflow-y: scroll;
      color:#fff;
    }
    
    div, img, svg, canvas, video, text {
    	position: absolute;
    }
    
    body, #container {
    	width:100%;
    	height:100%;
    	background: #000;
    	font-family: 'Oswald', sans-serif;
    	font-weight: 500;
    	letter-spacing: -0.75px;
    
    }
    
    #container {
    	max-width: 1024px;
    	max-height: 960px;
    	left:50%;
    	transform:translate(-50%);
    }
    
    .fs {
    	width:1024px;
    	height:560px;
    }
    </style>
</head>

<body>
    <div id="container" style="opacity:0;">
        <div id="game" class="fs">
            <div id="hintBtn">Hint</div>
            <div class="foundTxt"></div>
            <div class="timeTxt">30:00</div>
            <div class="timePlus">+3 sec</div>
            <div id="btnArea">
                <div id="b1" class="btn"></div>
            </div>
            <div class="end">
                <div class="endTxt"></div>
                <div id="replayBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
          <rect width="240" height="240" fill="none"/>
          <path fill="#fff" d="M120,50V10L70,60l50,50V70c33.11,0,60,26.9,60,60c0,33.11-26.89,60-60,60c-33.1,0-60-26.89-60-60H40 c0,44.2,35.8,80,80,80s80-35.8,80-80S164.2,50,120,50z"/>
        </svg>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        var cw, ch, ratio = 0.546875,
            game = document.getElementById('game'),
        		btnArea = document.getElementById('btnArea'),
        		hintBtn = document.getElementById('hintBtn'),
        		replayBtn = document.getElementById('replayBtn'),
        		timeLimit = 30 *1000, // in millisec
        		timeLeft,
        		timeInt,
        		lastBtn,
        		hint,
        		msTilHint,
            matched = false,
        		art = ['😄','🤣','🙂','🙃','😉','😇','😍','🤥','😘','😚','😛','😜','😋','🤗','🤔','🤐','😶','🤑','😏','🙄','😳','😬','😴','🤕','🤠','🤧','😢','😵','😎','🤓','😡','🤢','😭','😫','😠'],
        		found = 0;
        
        
        // Make 16 btn <divs>
        for (var i=1; i<=16; i++){ 
        		var b;
        		if (i==1) b = document.getElementById('b1');
        		else {
        			b = document.getElementById('b1').cloneNode(true);
        			b.id = 'b'+(i);
        			btnArea.appendChild(b);
        		}
        		b.onclick = b.ontouchend = btnClick;
        }
        
        
        // Initial states...
        new TimelineMax({onStart:populate})
        		.set(game, 			  {userSelect:'none', background:'radial-gradient(#333, #000 120%)'})
        		.set('.btn',		  {width:90, height:90, borderRadius:'50%', border:'3px solid transparent', textAlign:'center', fontSize:72, lineHeight:'86px', cursor:'pointer'})
        		.set(hintBtn,		  {right:30, bottom:30, width:75, fontSize:25, textAlign:'center', cursor:'pointer', autoAlpha:0})
        		.set('.foundTxt',	{left:0, top:30, width:1024, fontSize:35, textAlign:'center', textContent:'\u627e\u51fa\u4e24\u4e2a\u76f8\u540c\u7684\u8868\u60c5...', fontWeight:300, letterSpacing:0.25})
        		.set('.timeTxt',	{left:30, top:20, fontSize:50})
        		.set('.timePlus',	{left:58, top:75, fontSize:25, alpha:0})
        		.set('.end',		  {width:'100%', height:'100%', background:'rgba(255,255,255,0.1)', autoAlpha:0})
        		.set('.endTxt',		{textAlign:'center', top:257, width:1024, fontSize:25, fontWeight:300})
        		.set(replayBtn,		{left:400, top:275, scale:0.6, transformOrigin:'120px 130px', cursor:'pointer'})
        		.to('#container', 0.2, {alpha:1, ease:Power2.easeIn}, 0)
        
        
        hintBtn.onclick = hintBtn.ontouchend = function(e){
        		if (e.type=='touchend') hintBtn.onclick = undefined;
        		TweenMax.set(hintBtn, {textContent:hint, fontSize:35})
        }
        
        
        function populate() {
        		
        		lastBtn = undefined;
            matched = false;
        		msTilHint = 5000;
        		TweenMax.set(hintBtn, {autoAlpha:0, textContent:"Hint?", fontSize:25});
        		TweenMax.staggerFromTo('.btn', 0.3, {scale:0.2, alpha:0, rotation:1}, {rotation:0, alpha:1, scale:1, ease:Back.easeOut.config(4), stagger:{ grid:[4,4], from:"center", amount:0.2} });
        
        		var btns = [];		
        
            for (var i=0; i<15; i++) makeNewNum();
        		
        		function makeNewNum(){
        			var n = art[Math.ceil(rand(0, art.length-1))], valExists = false;
        			for (var i=0; i<btns.length; i++) if (n==btns[i]) valExists = true;
        			(.........完整代码请登录后点击上方下载按钮下载查看