使用 JavaScript 实现一个消消乐游戏

示例地址

https://jsfiddle.net/7fm1px5d/https://jsfiddle.net/7fm1px5d/

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>xiaoxiaole</title><style>*{box-sizing: border-box;}.box{width:400px;height:400px;background:red;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-200px;}.box-item{float: left;width:100px;height:100px;background:#ccc;text-align:center;line-height:100px;border:1px solid #fff;}.box-item:hover{background: black;color: #fff;}</style>
</head>
<body><div id="box" class="box"></div> <script>function getRandomStrList (){const STR_LIST = ['A','B','C','D','E','F','G','H','A','B','C','D','E','F','G','H'];let grid_list = [];let index = 0;while(STR_LIST.length){let random_index = Math.floor(Math.random()*STR_LIST.length);let random_str = STR_LIST.splice(random_index,1)[0];grid_list[index] = random_str;index++;}return grid_list;}function createBoxCardItem(GRID_LIST){const box = document.getElementById('box');let first_click_item = null;let second_click_item = null;GRID_LIST.forEach((value,i)=>{let box_item = document.createElement('div');box_item.className = 'box-item';box_item.dataset.index = i;box_item.id = 'box-item-'+i;box.appendChild(box_item);})let resolved_count = 0;box.addEventListener('click',(e)=>{let box_item = e.target;if(box_item.dataset.index === undefined){return;}if(box_item.dataset.resolved){return;}if(box_item){if(first_click_item && box_item.dataset.index == first_click_item.index){return;}if(second_click_item && box_item.dataset.index ==second_click_item.index){return;}if(!first_click_item){first_click_item ={value: GRID_LIST[ box_item.dataset.index],index:box_item.dataset.index}document.getElementById('box-item-'+first_click_item.index).innerText = first_click_item.value;}else if(!second_click_item){second_click_item = {value: GRID_LIST[ box_item.dataset.index],index:box_item.dataset.index}document.getElementById('box-item-'+second_click_item.index).innerText = second_click_item.value;if(first_click_item && second_click_item &&  first_click_item.value === second_click_item.value){document.getElementById('box-item-'+first_click_item.index).dataset.resolved = 1;document.getElementById('box-item-'+second_click_item.index).dataset.resolved = 1;resolved_count+=2;first_click_item = null;second_click_item = null;if(resolved_count === GRID_LIST.length){alert('Congratulations! You win!');}return;}  }else if(first_click_item && second_click_item){document.getElementById('box-item-'+first_click_item.index).innerText = '';document.getElementById('box-item-'+second_click_item.index).innerText = '';first_click_item = null;second_click_item = null;return;}}});}createBoxCardItem(getRandomStrList())</script>
</body>
</html>

使用 JavaScript 实现一个消消乐游戏相关推荐

基于原生JavaScript实现的消消乐小游戏
前言一直对小游戏挺感兴趣的,也尝试着做过一些小游戏,实现游戏是一个不错的提高代码基础水平的方式,因此这次挑战了一个较为困难的小游戏:消消乐. 如果仅仅是从消除方面来制作一个静态的消消乐(只有消除和补 ...
【小游戏合集】之用Python自己开发一个闯关小游戏——开心消消乐
导语: 今天这期小游戏是最适合小伙伴们一同挑战的精美手游,其因画面精美.上手简单.休闲有趣.有惊喜有挑战而获得广大玩家的喜爱...这款小游戏没错就是开心消消乐,相信大家都不陌生,其曾在 2015 年获 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
点亮LED的个人空间 JavaScript 正文 JavaScript成语消消乐
一预览二开发步骤基本面向过程的思想.没有面向对象的部分. 准备好成语库.db.js 选出每一关的成语. 对成语进行乱序. 初始化表格的同时,将单个字放到每个单元格的按钮上展示. 对tbody进 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
【图片消消乐】单机游戏-微信小程序项目开发入门
这是一个微信小程序项目,是类似开心消消乐的休闲小游戏,老少皆宜,游戏互动里面的图片是用的任何图片素材,根据自己的需求更换图片即可.想要做游戏不知道怎么做,建议从这个小程序入手,花时间研究学习,很快就拥 ...
猜猜乐游戏php源码,C/C++百行代码实现热门游戏消消乐功能的示例代码
游戏设计首先我们需要使用第三方框架,这里我使用的是sfml,不会使用sfml在我的上几篇文章当中-扫雷(上)有详细的开发环境搭建介绍首先准备图片资源一张背景图片,一张宝石图片窗口初始化加载图片 ...
android飞翔的小鸟游戏素材包_开心消消乐×愤怒的小鸟：为开心而战
手机里总有那么一些游戏,是你一旦不小心打开,就完全停不下来的.在这份"一直玩一直爽游戏清单"里,绝对少不了开心消消乐和愤怒的小鸟的身影. 神奇的是,在2020的夏天,它们合体了!在 ...
疯狂动物消消乐html5游戏在线玩,疯狂动物消消乐免费
疯狂动物消消乐免费版这是一个移动端休闲益智手游,疯狂动物消消乐免费版主打消除了玩法,在疯狂动物消消乐免费版游戏当中玩家要经过种种形式移动游戏当中元素来到达相同种类消除了成功的目的. 游戏介绍疯狂动物 ...
java开心消消乐代码_Vue实现开心消消乐游戏算法
摘要:这篇Vue栏目下的"Vue实现开心消消乐游戏算法",介绍的技术点是"开心消消乐.Vue.开心.游戏.算法.实现",希望对大家开发技术学习和问题解决有帮助. ...

使用 JavaScript 实现一个消消乐游戏

使用 JavaScript 实现一个消消乐游戏相关推荐

最新文章

热门文章