java记忆翻牌,原生JS实现记忆翻牌游戏
本文实例为大家分享了JS实现记忆翻牌游戏的具体代码,供大家参考,具体内容如下
html代码
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
})
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。
原文链接:https://blog.csdn.net/weixin_45959525/article/details/105907697
java记忆翻牌,原生JS实现记忆翻牌游戏相关推荐
- 五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏 效果图 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15 ...
- 原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏 贪吃蛇游戏(原生JavaScript) 贪吃蛇游戏思路分析 游戏思想: 面向对象的思想 三个js文件分别代表三个对象 三个对象相互独立,在HTML中控制全局 使用面向对象思想的 ...
- html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块 先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
- 记忆翻牌游戏代码html,原生JS实现记忆翻牌游戏
本文实例为大家分享了JS实现记忆翻牌游戏的具体代码,供大家参考,具体内容如下 html代码 css代码 * { padding: 0; margin: 0; } #game { width: 600p ...
- 微信通讯录java实现_原生JS实现微信通讯录
最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的实现一次.想必工作中大家 ...
- eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...
- html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
功能模块 先看下现在做完的效果: 代码详解 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = f ...
- 如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名 停止 幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
- 图片五子棋PHP接口,原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15, ...
- 原生JS实现2048小游戏
前几天玩了一款2048微信小程序,结果脑子一抽,想到了为什么不能自己用JS写一个 于是,下面这个玩意儿就诞生了... 实现思路大概是这样的,首先使用table表格完成页面布局,其次使用JS实现数字动态 ...
最新文章
- ftp服务器需要ssl证书吗,ftp+ssl证书安全认证
- Scrapy+Scrapy-redis+Scrapyd+Gerapy 分布式爬虫框架整合
- U盘无法安装win10提示Your PC/Device needs to be repaired
- 用 Flutter 开发真的NX
- Apress Pro Android 2
- 前端学习(1708):前端系列javascript之问题解答
- Safengine Android so加密
- KEIL4.12中添加ULINK2的支持
- (118)System Verilog 父类与子类对象复制(copy函数)详解
- 计算机二级C选择题精华
- JavaScript的Date对象使用(1)
- CSS中单位rem的使用说明
- VS2017编译libcef 2623_20181107完成
- excel合并工作簿
- 微博热搜榜html源码,几行代码完成微博热搜榜爬虫
- erlang io:format io_lib:format
- 【JavaWeb - 网页编程】三 jQuery 类库
- Storm集成HBase、JDBC、Kafka、Hive测试
- Leetcode刷题笔记 714. 买卖股票的最佳时机含手续费
- 遥控车钥匙算法之KeeLoq