Js 简单实现翻牌小游戏

最新推荐文章于 2024-02-19 08:45:39 发布
最新推荐文章于 2024-02-19 08:45:39 发布
阅读量4.6k 收藏 18
点赞数 6
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/siebo/article/details/122555049
版权

1.简介

非常简单的一个网络消消乐翻牌小游戏的实现，代码量较少，不过遇到的bug和自行开发的步骤十分有纪念意义。

2.核心代码块

生成随机数列，确定图片随机分布

function getImgIndex(is){
				var index = parseInt(Math.random()*8)+1;
				if(is[index] < 2){
					is[index]++;
				} else {
					index = getImgIndex(is);
				}
				return index;
			}

通过window.onload函数定义8个背景图片随机分布

window.onload = function(){
				//规则：五个背景图，每张图出现两次，随机分配到16个div中
				var ele = document.getElementById("parent");
				
				var imgs = [1,2,3,4,5,6,7,8]; 				
				
				var is = [0,0,0,0,0,0,0,0,0];
				
				for(var i = 0; i < 16; i++){
					var index = getImgIndex(is);
					console.info(index);
					ele.innerHTML += "<div id='k"+i+"' class='kid' "
						+"οnclick='oclick(this.id,"+index+");'></div>";	
						//通过字符串拼接方式，将H5代码发送给网页执行			
				}
			}

点击图片事件
oclick函数中利用f存储上个图片的index,；利用id2存储上个图片的id
再进行以下操作比较

function oclick(id,index)
			{   
				if(find[index]<2)
				{
			    if(f==0){
			    find[index]++;
				look(id,index);
				f=index;
				id2=id;
				}
				else
				{
					if(f==index&&id!=id2)
					{   
						find[index]++;
						look(id,index);
						f=0;
						id2=0;
						marked++;
					}
					else
					{   
						find[f]=0;
						look(id,index);
						look(id2,f);
						clearStyle(id);
						clearStyle(id2);
						f=0;
						id2=0;
					}
				}
				}
				if(marked==8)
				{
					alert("恭喜完成");
				}
			}

图片操作函数

function look(id,index){
				var ele = document.getElementById(id);
				ele.style="background-image: url("+index+".gif);";
			}
			function clearStyle(id){
				setTimeout(function(){
						var ele = document.getElementById(id);
						ele.style="";
					}, 200);
			}

重置页面函数

function re(){
				window.location.reload();
			}

页面的设计

	<body>
		<div id="parent" class="par"></div>
			<input type="button" name="b1" id="b1" value="再van♂一次" onclick="re();"/>
	</body>

3.已知bug 说明（已解决）

1.点击图片本身两次导致匹配成功
解决方式：加入id判断是否为自身比较

f==index&&id!=id2

2.已匹配的图片再次点击会消除
解决方式：加入find[]数组统计图片点击次数，超过两次不再比较

if(find[index]<2)

4.全文代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 父子网页界面设计 */
		   .kid{
		   	width: 100px;
		   	height: 100px;
		   	background-color: #aaffff;
		   	border: 1px solid black;
		   	margin: 10px;
		   	float: left;
		   }
		   .par{
		   	width: 1000px;
		   	padding: 10px;
		   	border: 1px solid black;
		   	float: left;
		   }
		</style>
		<script>
		     var f=0;
			 var id2=0;
			 var find = [0,0,0,0,0,0,0,0,0];
			 var marked=0;
			window.onload = function(){
				//规则：五个背景图，每张图出现两次，随机分配到16个div中
				var ele = document.getElementById("parent");
				
				var imgs = [1,2,3,4,5,6,7,8]; 				
				
				var is = [0,0,0,0,0,0,0,0,0];
				
				for(var i = 0; i < 16; i++){
					var index = getImgIndex(is);
					console.info(index);
					ele.innerHTML += "<div id='k"+i+"' class='kid' "
						+"οnclick='oclick(this.id,"+index+");'></div>";				
				}
			}
			function getImgIndex(is){
				var index = parseInt(Math.random()*8)+1;
				if(is[index] < 2){
					is[index]++;
				} else {
					index = getImgIndex(is);
				}
				return index;
			}
			function oclick(id,index)
			{   
				if(find[index]<2)
				{
			    if(f==0){
			    find[index]++;
				look(id,index);
				f=index;
				id2=id;
				}
				else
				{
					if(f==index&&id!=id2)
					{   
						find[index]++;
						look(id,index);
						f=0;
						id2=0;
						marked++;
					}
					else
					{   
						find[f]=0;
						look(id,index);
						look(id2,f);
						clearStyle(id);
						clearStyle(id2);
						f=0;
						id2=0;
					}
				}
				}
				if(marked==8)
				{
					alert("恭喜完成");
				}
			}
			function look(id,index){
				var ele = document.getElementById(id);
				ele.style="background-image: url("+index+".gif);";
			}
			function clearStyle(id){
				setTimeout(function(){
						var ele = document.getElementById(id);
						ele.style="";
					}, 200);
			}
			function re(){
				window.location.reload();
			}
		</script>
	</head>
	<body>
		<div id="parent" class="par"></div>
			<input type="button" name="b1" id="b1" value="再van♂一次" onclick="re();"/>
	</body>
</html>

注意：使用需修改图片地址url

实现效果

在这里插入图片描述
------by 啊哈在下

啊哈在下
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
100行代码教你写个卡牌翻翻乐小游戏
denglouhen的博客
09-22 2424
卡牌翻翻乐这种小游戏相信大家都玩过，一组卡牌随机翻面平铺在面前，用户点击卡牌翻转，两两配对消除卡牌，游戏的玩法主要是通过玩家自己对卡牌位置的记忆，快速匹配出相同的卡牌予以消除。那么我们自己来写一个这个小游戏，大致的思路会是什么呢？首先我们先找来卡牌素材，这里取的是12张生肖图案【图片来源于网络侵删】。那么我们就一共要展示24张卡片，布局上我们就按6x4的格子摆放吧。那么接下来主要工作分为：1、打乱顺序随机摆放卡牌2、卡牌翻转动画3、卡牌翻转后的匹配规则，如果未匹配，两张牌自行翻转回去；
数字动态翻牌器
Kepler_明的博客
12-02 2082
数字动态翻牌器 最近项目里使用到了数字翻牌器，于是自己写了一个，动态的翻牌器 第一步创建一个组件页面，NumberCount.vue 思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码 <template> <div class="chartNum"> <div class="box-item"> <li :class="{ 'nu
JS和HTML和JAVAScript写简单的翻牌游戏小游戏 .html
06-10
JS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JAVAScript写简单的翻牌游戏小游戏 .htmlJS和HTML和JA
javascript做的翻牌游戏
10-06
javascript做的翻牌游戏,对书写javascript的自定义函数很有帮助
开心消消乐、纯前端实现开心消消乐、开心消消乐代码、HTML+JS实现开心消消乐
李程程的博客
11-07 4788
开心消消乐、纯前端实现开心消消乐、开心消消乐代码、HTML+JS实现开心消消乐 这款游戏在画面上展示了很多可爱的小动物方块，交换两个小动物的位置即可消除相应的方块。同时在游戏中会随机产生道具，会给游戏增加一定的乐趣。这款游戏是基于HTML5开发的，下载游戏源码还可以学到最前沿的HTML5技术。 点击下载代码 ......
16宫格的翻牌消除游戏、纯前端实现16宫格的翻牌消除游戏
李程程的博客
11-07 3025
16宫格的翻牌消除游戏、纯前端实现16宫格的翻牌消除游戏 纯前端实现16宫格翻牌消除游戏代码，这个游戏大家应该非常熟悉，它是一个16宫格的翻牌消除游戏，点击卡片后，如果两张卡片形状相同，则同时被消除。这个游戏应用主要用jQuery来控制卡片的状态，又利用了HTML5的sessionStorage来存储翻牌记录，一遍两张相同时消除。 点击下载代码 ......
H5响应式网页翻牌小游戏代码.zip
07-11
body {   margin: 0;   padding: 0; } .tile {   display: block;   float: left;   border-radius: 5%;   overflow: hidden;   position: relative;   cursor: pointer; } .tile:nth-of-type(4n 1) {   clear: left; } .tile:after {   content: '';   display: block;   width: 100%;   height: 100%;   border-radius: 5%;   position: absolute;   /*left:0; top:0;*/   bottom: 0;   right: 0;   transition: transform 0.2s; } 这是一款支持PC端跟手机端的HTML5响应式网页翻牌小游戏代码。电脑手机都可以玩的网页小游戏源码。
js翻牌3d消消乐小游戏
ICode联盟
09-06 373
下载地址很有特效的消消乐小游戏js代码，3d效果的翻牌两个图案相同则成功，代码音效。 dd:
数字翻牌效果JS实现，高端大气的数字翻拍效果实现
04-28
包含展示所需要的js文件，打开文件或部署到开发工具或服务器中访问页面即可
js实现翻牌小游戏
10-15
主要为大家详细介绍了js实现翻牌小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
数字定时翻牌效果js代码
06-04
实现数字翻牌效果，可以定时进行翻牌，效果如即时比分，翻动自然的js代码，在项目中有用到过.
js时钟翻牌效果实现代码分享
12-29
先给大家上运行效果图，看看是不是特别棒！ 这一张是小编抓拍时钟翻牌时的效果图： 为大家分享的JavaScript时钟翻牌效果代码如下 <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Create an Animated Flip Down Clock</title> <link rel=stylesheet type=text/css href=style.css /> </head> <body> <div id=wrapper> <div id=
基于javascript实现的 小游戏神经衰弱翻牌游戏
最新发布
06-13
【标题】"基于JavaScript实现的‘神经衰弱’翻牌游戏"是一款利用纯JavaScript语言开发的在线休闲小游戏，旨在锻炼玩家的记忆力和反应能力。这种游戏通常由一定数量的卡牌组成，每张卡牌背后都有一个特定的图案，玩家...
基于javascript实现句子翻牌网页版小游戏
10-22
主要介绍了基于javascript实现句子翻牌网页版小游戏的相关资料,需要的朋友可以参考下
实现翻牌器翻转特效——原生html,css,js以及原生ajax请求数据
m0_72929120的博客
09-01 660
【代码】实现翻牌器翻转特效——原生html,css,js以及原生ajax请求数据。
时钟翻牌器(支持JS/Vue/React)
ZERO的博客
03-27 700
时钟翻牌器(支持JS/Vue/React)
干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)
weixin_46837985的博客
02-17 1755
大家应该在很多网页中看到了数字翻牌的效果吧，比如倒计时、数字增长等。相信很多人都已经自己独立实现过了，我也在网上看了一些demo，发现HTML结构大多比较复杂，用了4个并列的标签来放置前...
vue 大屏datav数字翻牌器
wodexinhaoleng01的博客
02-19 853
官方网站：源码：
JS实现数字翻牌效果
热门推荐
默存
07-27 1万+
JS实现数字变化翻牌效果 一、效果图如下： 二、代码如下： 注意：需要引入JQuery.js。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字翻牌器</title> <script s...
js实现记忆翻牌小游戏
05-24
好的，我可以给你提供一个简单的记忆翻牌小游戏的实现，使用JavaScript和HTML/CSS。 HTML部分： ```html <!DOCTYPE html> 记忆翻牌小游戏 记忆翻牌小游戏 <div class="card" data-value="1"></...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值