JavaScript 实战-翻牌游戏 - H5和CSS3 (1)

最新推荐文章于 2023-11-10 20:19:13 发布

VIP文章蒾途笑笑生

最新推荐文章于 2023-11-10 20:19:13 发布

阅读量5k

点赞数 4

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/brilliancezhou/article/details/122265387

版权

前言

有段子说学习xxx语言从入门到放弃，当然这只是一句调侃，说明学习的门槛还是存在的，比如底层的C和汇编，难度不小，且需要更多基础知识，有时学起来少许枯燥，有编程天赋的人除外。如果想学得有趣不乏味，语言能简单、容易上手，开发所用的工具也不复杂，那么JavaScript是一个不错的选择。JavaScript 从一款不受待见的“早产”编程语言，逐渐上升开发语言排行榜前列，正可谓时势造英雄，Java也从版本8开始吸取函数式编程语言的优秀特性引入了Lambda表达式。在这一系列文章中，我们使用JavaScript和HTML5、CSS3来实现翻牌小游戏。主要使用盒子模型、Flex布局、Grid布局，CSS伪元素、DOM等。

善其事必先利其器

Alt

任务

界面上有偶数张牌，找到两个相同数字的牌，点击任意两张牌之后，如果牌面数字相同，则表示找到这相同的牌，然后删除这两张牌，继续翻牌，直到翻出所有相同的牌，游戏结束

游戏界面

在这里插入图片描述

游戏界面设计

一、HTML结构设计

第一部分：游戏标题以及时间和点击次数
第二部分：扑克牌

<body>
 		<!-- 游戏标题 -->
    <h1 class="game-title">翻牌游戏</h1>
    <!-- 游戏容器区域 -->
    <div class="game-container">
        <!-- 游戏倒计时和点击次数 -->
        <div class="game-info-container">
            <div class="game-info">
                时间: <span id="timeRemaining" class="time-remaining">100</span>
            </div>
            <div class="game-info">
                点击: <span id="clickCount" class="click-count">0</span>
            </div>
        </div>

			 <!-- 扑克牌部分 -->
        <div class="card" data-number="8" data-turn='back' onclick="handlerClick(this)">
            <!-- 牌的背面 -->
            <div class="card-back card-face">
                <img class="cobweb cobweb-top-left" src="Images/Cobweb.png">
                <img class="cobweb cobweb-top-right" src="Images/Cobweb.png">
                <img class="cobweb cobweb-bottom-left" src="Images/Cobweb.png">
                <img class="cobweb cobweb-bottom-right" src="Images/Cobweb.png">
                <img class="spider" src="Images/Spider.png">
            </div>
            <!-- 牌的前面 -->

最低0.47元/天解锁文章

蒾途笑笑生

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 实战-翻牌游戏 - H5和CSS3 (1)

前言有段子说学习xxx语言从入门到放弃，当然这只是一句调侃，说明学习的门槛还是存在的，比如底层的C和汇编，难度不小，要是不结合系统知识什么东西出来，的确学起来过于枯燥，有编程天赋的人除外。如果想学得有趣不乏味，语言能简单、容易上手，开发所用的工具也不复杂，那么JavaScript是一个不错的选择。JavaScript 从一款不受待见的“早产”编程语言，逐渐上升开发语言排行榜前列，正可谓时势造英雄，Java也从版本8开始吸取函数式编程语言的优秀特性引入了Lambda表达式。在这一系列文章中，我们使用Java
复制链接

扫一扫