用JavaScript编写简单斗地主效果Es6
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.all {
width: 100%;
height: 1000px;
} .all>div:first-child {
width: 50%;
height: 200px;
display: flex;
margin: 0 auto;
justify-content: space-between;
align-items: center;
} .all>div:nth-child(2) {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 1000px;
} .all>div:nth-child(3) {
width: 100%;
height: 400px;
/* display: flex;
align-items: center;
justify-content: center; */
} #star {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
} #play1 {
width: 250px;
display: flex;
justify-content: space-between;
align-items: center;
} #play1>:last-child {
width: 110px;
} #play2 {
width: 250px;
display: flex;
justify-content: space-between;
align-items: center;
} #play2>:first-child {
width: 110px;
} #play3 {
height: 310px;
} #play3>:last-child {
height: 110px;
width: 100%;
display: flex;
justify-content: center; } #wanjia3 {
width: 100%;
display: flex;
justify-content: center;
} #play1>div:first-child {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
} #play2>div:last-child {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
} #play3>div:last-child>p {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head> <body>
<div class="all">
<div id="play"> </div>
<div>
<div id="play1">
<div>玩家一</div>
<div id="wanjia1"> </div>
</div>
<div id="star">
<input type="button" value="开始">
</div>
<div id="play2">
<div id="wanjia2"> </div>
<div>玩家二</div>
</div>
</div> <div id="play3">
<div id="wanjia3"> </div>
<div>
<p>玩家三</p>
</div>
</div> </div> <script>
let play = document.getElementById('play');
let play1 = document.getElementById('wanjia1');
let play2 = document.getElementById('wanjia2');
let play3 = document.getElementById('wanjia3');
let star = document.getElementById('star');
let arr = [];//创建数组
for (let i = 3; i < 18; i++) {
if (i < 16) {
for (let j = 1; j < 5; j++) {
arr.push(`./images/${i}_${j}.jpg`);//吧图片放入数组中
}
} else {
arr.push(`./images/${i}_1.jpg`)
}
}
star.onclick = function () {//开始按钮被点击时
for (let i = 0; i < arr.length; i++) {//遍历出数组
let num = fn(0, 53);//随机数
let item = arr[i];//item 空数组，将arr[i]放入
arr[i] = arr[num];
arr[num] = item;
} let image1 = arr.slice(0, 17);//截取数组
let image2 = arr.slice(17, 34);
let image3 = arr.slice(34, 51);
let image4 = arr.slice(51, 54);
image1.sort(paixu);
image2.sort(paixu);
image3.sort(paixu);
image4.sort(paixu);
play1.innerHTML = '';//清空
for (let a of image1) {
play1.innerHTML += `<img src="${a}" alt="">`//添加数组
play1.lastElementChild.style.marginTop = '-110px'
}
play2.innerHTML = '';
for (let a1 of image2) {
play2.innerHTML += `<img src="${a1}" alt="">`
play2.lastElementChild.style.marginTop = '-110px'
}
play3.innerHTML = '';
for (let a2 of image3) {
play3.innerHTML += `<img src="${a2}" alt="">`
play3.lastElementChild.style.marginLeft = '-70px'
}
play.innerHTML = '';
for (let a3 of image4) {
play.innerHTML += `<img src="${a3}" alt="">`
} } function paixu(al, bl) {
let ra = al.slice(9, al.lastIndexOf('.'));
let rb = bl.slice(9, bl.lastIndexOf('.')); let arr1 = ra.split('_');
let arr2 = rb.split('_');
// console.log(arr1, arr2)
if (parseInt(arr1[0]) < parseInt(arr2[0])) {
return 1;
} else if (parseInt(arr1[0]) > parseInt(arr2[0])) {
return -1;
}else{
if(arr1[1]<arr2[1]){
return 1;
}else if(arr1[1]>arr2[1]){
return -1;
}else{
return 0;
}
} } //随机数函数
function fn(min, max) {
if (!max) {//当max没有值时
max = min;
min = 0;
}
return parseInt(Math.random() * (max - min + 1) + min);
} </script>
</body> </html>
用JavaScript编写简单斗地主效果Es6的更多相关文章
- HTML 和 JavaScript 编写简单的 404 界面
编写简单的 404 界面,也可以用来做 500 报错界面,还会飘东西,特别好,蛮漂亮的! <!DOCTYPE html> <html> <head> <met ...
- JavaScript编写简单的抽奖程序
1.需求说明 某公司年终抽奖,需要有如下功能 1)可以根据实际情况设置到场人数的最大值 2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上 3)在界面里显示全部奖项获奖人编号 4 ...
- 学习笔记之javascript编写简单计算器
感觉自己的的实力真的是有待提高,在编写计算器的过程中,出现了各种各样的问题,暴露了自己的基础不扎实,逻辑思维能力不够,学得知识不能运用到自己的demo中区.先介绍一些这个这个计算器的整体思路.大致 ...
- JS实现简单斗地主效果
let play = document.querySelectorAll(".play"); let dizhupai = document.getElementById(&quo ...
- 用javascript编写地区表单ES6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript编写简单的增加与减少元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用javascript编写简单银行取钱存钱流程（函数）
const readline = require('readline-sync')//引用readline-sync let arr = [[], []]; //登陆 let add = functi ...
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
- 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程
原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...
随机推荐
- js笔记 -- toString() 和String()
将一个值转换成一个字符串有两种方法,一是使用toString()方法,二是使用转型函数String().下面是一些需要注意的问题: 1,大多值都有toString()方法,因为toString是Obj ...
- SVN - Checksum mismatch while updating
Go to the folder with the file causing problems Execute command svn update --set-depth empty (note: ...
- centos虚拟机网卡配置
连接模式为NAT
- Css3中拖拽效果的实例(带有注释~欢迎指教)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Python进阶内容（一）--- 高阶函数 High order function
0. 问题 # 本文将围绕这段代码进行Python中高阶函数相关内容的讲解 # 文中所有代码的兼容性要求为:Python 3.6,IPython 6.1.0 def addspam(fn): def ...
- C#模拟HTTP POST 请求
GET请求: /// <summary> /// 获取accessToken /// </summary> /// <param name="corpid&qu ...
- ProxySQL读写分离
我们首先看一下自己的环境: MHA已经搭建: master: slave: slave: MHA manager在172.16.16.34,配置文件如下: [root@localhost bin]# ...
- sql 2000 无法连接远程数据库 sqlserver不存在或访问被拒绝、不能打开到主机的连接，在端口1433：连接失败等 解决方案
问题: sql 2000 无法连接远程数据库 sqlserver不存在或访问被拒绝 telnet 127.0.0.1 1433 提示:不能打开到主机的连接,在端口1433:连接失败 解决方案: ...
- 变换CALayer锚点实现模拟时钟的动画
变换CALayer锚点实现模拟时钟的动画 变换锚点得需要一点理论知识,看下图就能明白:). https://developer.apple.com/library/ios/documentation/ ...
- [翻译] CHAnimation
CHAnimation https://github.com/cyndibaby905/CHAnimation How it looks CHAnimation is a project used t ...