实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克
1.先上达到网页效果图（简易版德州扑克）
网页分为发牌区和牌池，上面为发牌区，下面是牌池区
2. 代码实现
2.1 HTML和JS代码
`
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:cornflowerblue">
<div class="pool">
</div>
<div style="margin-top: 45px;" class="dealer card"></div>
<script>
function sendCard(){
var randomNum = _.random(1,13)
$('.pool').append(`<div class="card f${ randomNum }"></div>`)
}
$('.dealer').click(sendCard)
</script>
</body>
`
2.2 CSS代码
1：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2：<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>
3：<link rel="stylesheet" href="styles.css">
1是JQuery，2为Underscore，3为link本地自写CSS
下面是自写CSS（style.css）
`body {
background-color: cornflowerblue;
}
.card {
height: 175px;
width: 125px;
background-image: url('./cards/back.png');
background-size: 100% 100%;
margin: 3px;
}
.pool {
display: flex;
border-style: dashed;
border-color: aliceblue;
border-width: 2px;
width: 655px;
height: 181px;
}
.f1 {
background-image: url('./cards/f1.png');
}
.f2 {
background-image: url("./cards/f2.png");
}
.f3 {
background-image: url("./cards/f3.png");
}
.f4 {
background-image: url("./cards/f4.png");
}
.f5 {
background-image: url("./cards/f5.png");
}
.f6 {
background-image: url("./cards/f6.png");
}
.f7 {
background-image: url("./cards/f7.png");
}
.f8 {
background-image: url("./cards/f8.png");
}
.f9 {
background-image: url("./cards/f9.png");
}
.f10 {
background-image: url("./cards/f10.png");
}
.f11 {
background-image: url("./cards/f11.png");
}
.f12 {
background-image: url("./cards/f12.png");
}
.f13 {
background-image: url("./cards/f13.png");
}
`
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS的更多相关文章
- 用CSS实现蒙德里安名画|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现项目:用CSS实现蒙德里安名画 1.首先,献上代码和效果图 1.1代码: <head> <style> .centerframe{ display: flex; heigh ...
- Android学习之路——简易版微信为例（二）
1 概述 从这篇博文开始,正式进入简易版微信的开发.深入学习前,想谈谈个人对Android程序开发一些理解,不一定正确,只是自己的一点想法.Android程序开发不像我们在大学时候写C控制台程序那样, ...
- .NET CORE学习笔记系列(2)——依赖注入[4]: 创建一个简易版的DI框架[上篇]
原文https://www.cnblogs.com/artech/p/net-core-di-04.html 本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章从 ...
- Android学习之路——简易版微信为例（三）
最近好久没有更新博文,一则是因为公司最近比较忙,另外自己在Android学习过程和简易版微信的开发过程中碰到了一些绊脚石,所以最近一直在学习充电中.下面来列举一下自己所走过的弯路: (1)本来打算前端 ...
- Android学习之路——简易版微信为例（一）
这是“Android学习之路”系列文章的开篇,可能会让大家有些失望——这篇文章中我们不介绍简易版微信的实现(不过不是标题党哦,我会在后续博文中一步步实现这个应用程序的).这里主要是和广大园友们聊聊一个 ...
- 前端学习 node 快速入门 系列 —— 简易版 Apache
其他章节请看: 前端学习 node 快速入门 系列 简易版 Apache 我们用 node 来实现一个简易版的 Apache:提供静态资源访问的能力. 实现 直接上代码. - demo - stati ...
- 德州扑克AI WEB版
继续之前的德州扑克话题,上次的DOS界面确实没法看,我女朋友说这是什么鬼.哈哈,估计只有自己能玩了 这两天重构了一下界面,基于web服务器和浏览器来交互. 服务器和客户端之间用websocket通信, ...
- Dubbo入门到精通学习笔记（九）：简易版支付系统介绍、部署（单节点）
文章目录 部署(单节点) 一.前期准备 二.对部署环境进行规划 创建数据库 调整公共配置文件 应用部署前期准备 部署服务 部署 Web 应用 部署定时任务 一. 工程结构 第三方支付系统架构 pay- ...
- 贪吃蛇（简易版）Leslie5205912著
# include <stdio.h># include <string.h># include <windows.h># include <stdlib.h ...
随机推荐
- 听说特斯拉花了4个月研发出新ERP，然后很多人都疯了
欢迎关注微信公众号:sap_gui (ERP咨询顾问之家) 最近这件事儿在SAP圈里炒的挺火的,最主要是因为这几个关键词: 放弃SAP.4个月.自研ERP: 这则新闻一出来,很多人都兴高采烈,都要疯了 ...
- 大白话详解大数据hive知识点，老刘真的很用心(3)
前言:老刘不敢说写的有多好,但敢保证尽量用大白话把自己复习的内容详细解释出来,拒绝资料上的生搬硬套,做到有自己的了解! 1. hive知识点(3) 从这篇文章开始决定进行一些改变,老刘在博客上主要分享 ...
- Vue必须必须要注意的几个细节
1.每次执行完,尽量npm run dev 一次,有时候又缓存问题 2.安装sass 一.使用save会在package.json中自动添加.因为sass-loader依赖于node-sass npm ...
- Swift3.0学习之基础部分
1.常量和变量 常量和变量把一个名字(比如 maximumNumberOfLoginAttempts 或者 welcomeMessage )和一个指定类型的值(比如数字 10 或者字符串 " ...
- Tensorflow环境配置&安装
Tensorflow环境配置&安装 明知故犯,是不想有遗憾. 背景:Tensorflow 环境配置和安装. 一.安装 Anaconda 二.建立.激活.安装.验证.使用 Tensorflow ...
- vs2010新特性
下面列出了一些新的功能:1.代码编辑器新的代码编辑器使代码更易于阅读.可以通过按 CTRL 并滚动鼠标轮放大文本.此外,单击 Visual C# 或 Visual Basic 中的符号时该符号的所有实 ...
- Centos7.3 离线环境下修改时间
运行以下命令 1.tzselect --命令确定时区 2.timedatectl set-timezone Asia/Shanghai --设置系统时区为上海 3.timedatectl set-n ...
- Kibana查询语言（KQL）
一.前言 现在大多数的公司都会使用ELK组合来对日志数据的收集.存储和提供查询服务,这里就不介绍什么是ELK了,只介绍一些EKL中的查询,也就是K(kibana). 查询数据库,如果是MySQL,那么 ...
- 数据接口请求异常：parsererror
问题一:直接拿别人的文件放在本地打开 如下图 原因:这是提示"交叉源请求仅支持协议方案:HTTP.数据.Chrome.Chrome扩展.HTTPS." 也就是你不能用本地文件打开, ...
- 当会打王者荣耀的AI学会踢足球，一不小心拿下世界冠军！
难得的元旦小假期,没有什么比得上在慵懒的冬日艳阳下放松自己,拿起手机,叫上了许久未一起作战的小伙伴,到王者荣耀中激战了一番,仿佛又回到了当年那个年轻的自己. 厉害不,毕竟当年DD也是王者五十星的水平, ...