原生JS实现记忆翻牌游戏


Posted in Javascript onJuly 31, 2020

本文实例为大家分享了JS实现记忆翻牌游戏的具体代码,供大家参考,具体内容如下

html代码

<div id="game">
 <!-- div.block*16>div.pic -->
</div>

css代码

* {
 padding: 0;
 margin: 0;
}

#game {
 width: 600px;
 height: 600px;
 margin: 0 auto;
}

.block {
 float: left;
 box-sizing: border-box;
 width: 25%;
 height: 25%;
 border: 2px solid #ddd;
 background-color: #f0f0f0;
}

.block:hover {
 background-color: #2b84d0;
}

.pic {
 width: 100%;
 height: 100%;
 background-repeat: no-repeat;
 background-position: center center;
 transform: scaleX(0);
 transition: transform .2s;
}

.block.on .pic {
 transform: scaleX(1)
}

js代码

var game = {
 el: '',
 level: 0, 
 blocks: 0, 
 gameWidth: 600, 
 gameHeight: 600, 
 dataArr: [],
 judgeArr: [],
 turnNum: 0,
 picNum: 20, 
 maxLevel: 3, // 最高游戏级别
 init: function (options) {
 this.initData(options);
 this.render();
 this.handle();
 },
 initData: function (options) {
 this.options = options;
 this.el = options.el;
 this.level = options.level > this.maxLevel ? this.maxLevel : options.level;
 this.blocks = (this.level * 2) * (this.level * 2);
 this.getdataArr();
 },
 getdataArr: function () {
 var randomArr = this.randomArr(); 
 var halfBlocks = this.blocks / 2;
 var dataArr = [];

 for(var i = 0; i < halfBlocks; i ++) {
  var num = randomArr[i];
  var info = {
  url: './images/' + num + '.png',
  id: num
  }
  dataArr.push(info, info);
 }
 console.log(dataArr);
 this.dataArr = this.shuffle(dataArr);
 },
 randomArr: function () {
 var picNum = this.picNum;
 var arr = [];
 for(var i = 0; i < picNum; i ++) {
  arr.push(i + 1);
 }
 console.log(arr);
 return this.shuffle(arr);
 },
 shuffle: function (arr) {
 return arr.sort(function () {
  return 0.5 - Math.random();
 })
 var length = arr.length - 1;
 for(var i = length ; i >= 0; i --) {
  var randomIndex = Math.floor(Math.random() * (i + 1));
  var temp = arr[randomIndex];
  arr[randomIndex] = arr[i];
  arr[i] = temp;
 }
 return arr;
 },
 render: function () {
 var blocks = this.blocks;
 var gameWidth = this.gameWidth;
 var gameHeight = this.gameHeight;
 var level = this.level;
 var blockWidth = gameWidth / ( level * 2 );
 var blockHeight = gameHeight / ( level * 2 );
 var dataArr = this.dataArr;

 for(var i = 0; i < blocks; i ++) {
  var info = dataArr[i];
  var oBlock = document.createElement('div');
  var oPic = document.createElement('div');
  oPic.style.backgroundImage = 'url(' + info.url + ')';
  oBlock.style.width = blockWidth + 'px';
  oBlock.style.height = blockHeight + 'px';
  oBlock.picid = info.id;
  oPic.setAttribute('class', 'pic');
  oBlock.setAttribute('class', 'block');
  oBlock.appendChild(oPic);
  this.el.appendChild(oBlock);
 
 handle: function () {
 var self = this;
 this.el.onclick = function (e) {
  var dom = e.target;
  var isBlock = dom.classList.contains('block');
  if(isBlock) {
  self.handleBlock(dom);
  }
 }
 },
 handleBlock: function (dom) {
 var picId = dom.picid;
 var judgeArr = this.judgeArr;
 var judgeLength = judgeArr.push({
  id: picId,
  dom: dom
 });
 dom.classList.add('on');

 if(judgeLength === 2) { this.judgePic(); }
 this.judgeWin();
 },
 judgePic: function () {
 var judgeArr = this.judgeArr; 
 var isSamePic = judgeArr[0].id === judgeArr[1].id;
 
 if(isSamePic) {
  this.turnNum += 2;
 } else {
  var picDom1 = judgeArr[0].dom;
  var picDom2 = judgeArr[1].dom;
  setTimeout(function () {
  picDom1.classList.remove('on');
  picDom2.classList.remove('on');
  }, 800)
 }
 judgeArr.length = 0;
 },
 judgeWin: function () {

 if(this.turnNum === this.blocks) {
  setTimeout(function () {
  alert('胜利');
  }, 300)
 }
 }
}

game.init({
 el: document.getElementById('game'),
 level: 2
})

原生JS实现记忆翻牌游戏

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
浅析node.js中close事件
Nov 26 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
js实现跳一跳小游戏
Jul 31 #Javascript
js实现翻牌小游戏
Jul 31 #Javascript
Vue 请求传公共参数的操作
Jul 31 #Javascript
vue2.0 解决抽取公用js的问题
Jul 31 #Javascript
vue实现公共方法抽离
Jul 31 #Javascript
js实现无缝轮播图插件封装
Jul 31 #Javascript
原生js滑动轮播封装
Jul 31 #Javascript
You might like
php 字符转义 注意事项
2009/05/27 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python面向对象类的继承实例详解
2018/06/27 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
商场中秋节活动方案
2014/02/07 职场文书
致裁判员加油稿
2014/02/08 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
大学生毕业评语
2014/12/31 职场文书
大学生党课感想
2015/08/11 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
成人成长感言如何写?
2019/08/16 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
关于JavaScript轮播图的实现
2021/11/20 Javascript
2022年四月新番
2022/03/15 日漫
java开发双人五子棋游戏
2022/05/06 Java/Android