考验记忆力的翻牌小游戏

考验记忆力的翻牌小游戏,主要运用到 setTimeout ,在匹配失败后反转牌面。使用index参数记录翻开第一张牌的索引,与第二张翻开牌对比。

<html>
<head>
    <title>翻牌游戏</title>
	<script>
        var ctx;
        var bkcolor = "rgb(211, 33, 204)";
        var frontcolor = "rgb(31, 232, 131)";
        var mapcolor = "rgb(129, 63, 195)";
        var cwidth = 100;
        var cheight = 150;
        var margin =20;
        var rad = 40;
        var pstime=0;
        var position=[];
        var deck=[];
        var index=[];
        var match=0;
        var clk=0;
		var tid;
        //获得 position
        function pos(){
            var i;
            var j;
            for(i=10;i<400;i=i+cwidth+margin){
                for(j=10;j<400;j=j+cheight+margin){
                    position.push([i,j]);
                }
            }
        }
        //牌定义
        function Card(cx,cy,n){
            this.cx = cx;
            this.cy = cy;
            this.checked = false;
            this.msg = n;
            this.draw = drawcard;
            this.isdelete = false;
        }
        function drawcard(){
            if(this.checked==false && this.isdelete==false){
                ctx.fillStyle = bkcolor;
                ctx.fillRect(this.cx,this.cy,cwidth,cheight);
  
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以给你提供一个简单的记忆翻牌小游戏的实现,使用JavaScript和HTML/CSS。 HTML部分: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>记忆翻牌小游戏</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>记忆翻牌小游戏</h1> <div class="game"> <div class="cards"> <div class="card" data-value="1"></div> <div class="card" data-value="2"></div> <div class="card" data-value="3"></div> <div class="card" data-value="4"></div> <div class="card" data-value="1"></div> <div class="card" data-value="2"></div> <div class="card" data-value="3"></div> <div class="card" data-value="4"></div> </div> <button class="start-btn">开始游戏</button> </div> <script src="script.js"></script> </body> </html> ``` CSS部分: ```css .game { margin: 0 auto; text-align: center; } .cards { display: flex; flex-wrap: wrap; justify-content: center; } .card { width: 100px; height: 100px; margin: 10px; background-color: #ccc; border-radius: 5px; cursor: pointer; font-size: 50px; display: flex; justify-content: center; align-items: center; color: #fff; font-family: Arial, sans-serif; transition: all 0.2s ease-in-out; transform-style: preserve-3d; backface-visibility: hidden; } .card.flipped { transform: rotateY(180deg); } .start-btn { margin-top: 20px; padding: 10px 20px; font-size: 20px; background-color: #3498db; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: all 0.2s ease-in-out; } .start-btn:hover { background-color: #2980b9; } ``` JavaScript部分: ```javascript const cards = document.querySelectorAll('.card'); const startBtn = document.querySelector('.start-btn'); let firstCard, secondCard; let hasFlippedCard = false; let lockBoard = false; let score = 0; function flipCard() { if (lockBoard) return; if (this === firstCard) return; this.classList.add('flipped'); if (!hasFlippedCard) { hasFlippedCard = true; firstCard = this; return; } secondCard = this; checkForMatch(); } function checkForMatch() { let isMatch = firstCard.dataset.value === secondCard.dataset.value; isMatch ? disableCards() : unflipCards(); } function disableCards() { firstCard.removeEventListener('click', flipCard); secondCard.removeEventListener('click', flipCard); resetBoard(); score++; if (score === cards.length / 2) { endGame(); } } function unflipCards() { lockBoard = true; setTimeout(() => { firstCard.classList.remove('flipped'); secondCard.classList.remove('flipped'); resetBoard(); }, 1000); } function resetBoard() { [hasFlippedCard, lockBoard] = [false, false]; [firstCard, secondCard] = [null, null]; } function shuffle() { cards.forEach(card => { let randomPos = Math.floor(Math.random() * cards.length); card.style.order = randomPos; }); } function startGame() { shuffle(); cards.forEach(card => { card.classList.add('flipped'); setTimeout(() => { card.classList.remove('flipped'); card.addEventListener('click', flipCard); }, 2000); }); } function endGame() { document.querySelector('.game').innerHTML = '<h1>恭喜你通关了!</h1>'; } startBtn.addEventListener('click', startGame); ``` 这个小游戏的实现思路是:先将卡片随机打乱顺序并翻过来,等待一段时间后再翻回去,等待玩家开始游戏。当玩家点击一张卡片时,如果已经有一张卡片被翻开,则比较两张卡片是否匹配,如果匹配则禁用这两张卡片,如果不匹配则翻回去。当所有的卡片都被禁用后,游戏结束。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值