原生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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
关于vue面试题汇总
Mar 20 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
实习求职信
2013/12/01 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python