用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工程 首先解释下什么 ...
随机推荐
- Mac里用终端ssh远程连接Centos服务器
在mac终端下输入 ssh -l root *.*.*.* 就可以远程连接Centos服务器了,端口没变还是:22 如果改变端口用下面方法输入: ssh -p 448(你改变的端口) -l root( ...
- 04.CSS动画示例-->烟花
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取，window.event与时间函数参数的event是同一个 事件对象
判断事件触发的元素: var tag = window.event.target || window.event.srcElement; if (tag.tagName.toLowerC ...
- 如何登陆FTP服务器下载文件
原文:https://jingyan.baidu.com/article/f25ef254134bef482c1b82c2.html 方法/步骤1 1 第一种介绍的方法是从计算机(我的电脑)上登陆 ...
- MUI框架-11-MUI前端 +php后台接入百度文字识别API
MUI框架-11-MUI前端 +php后台接入百度文字识别API 这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以 这里使用的是 php 来介绍,已经解决所有问题,因为 ...
- svn提示out of date的解决方法
步骤1. team–>update 步骤2. team–>Show Tree Conflict–>标记"冲突已解决" 步骤3. team–>commit
- ExpressRoute 常见问题
什么是 ExpressRoute? ExpressRoute 是一项 Azure 服务,允许在 Microsoft 数据中心与本地环境或共同租用设施中的基础结构之间创建专用连接. ExpressRou ...
- C# winfrom Datagridview控件下拉菜单
拖拽一个datagridview放在界面,编辑列把下来菜单那列ColumnType设置成DataGridViewComboBoxColumn 然后在数据一栏的Items可以写下来菜单的内容也可以后台代 ...
- 《SQL必知必会》知识点汇总
select CustomerNo from dbo.Customers; 通配符的使用 select *from dbo.Customers; select CustomerNo from dbo. ...
- redis-day1
1 Redis 概述 REmote DIctionary Server(Redis)是一个基于key-value键值对的持久化数据库存储系统.redis和大名鼎鼎的Memcached缓存服务软件很像, ...