JS小游戏-24点（vue+element简单实现）

最新推荐文章于 2024-04-08 17:17:20 发布
最新推荐文章于 2024-04-08 17:17:20 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ndyd_csdn/article/details/108832154
版权

上次下午快下班时闲着没事，想起了小的时候玩用扑克牌玩的一个小游戏--24点。游戏规则很简单，把扑克牌里面的数字和A挑出来，打乱顺序，两人平分这些牌，然后每人出两张牌，两个人抢答，根据这四张牌使用加减乘除和括号，每张牌使用一次，先算出来的人获得4张牌。重复上述过程，直到有一个人输掉所有牌游戏结束。

刚好最近在使前端，就想着用一个页面来实现一下这个小游戏，简单的使用vue、element来完成的。效果图：

这里只是一个人玩的，后面可以做成可以两个人玩的。

代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>24点</title>

		<!-- 引入vue.js -->

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<!-- 引入样式 -->

		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

		<!-- 引入组件库 -->

		<script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>

		<!-- <script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js"></script> -->

	</head>

	<body>

		<div id="app" class="app">

		    <el-container>

				<el-header>

					<h1>24点</h1> 

				</el-header>

				<el-main>

					<div class="main">

						<!-- 计算公式 -->

						<el-card shadow="always">

						      {{ result }}

						</el-card>

						<!-- 随机数字 -->

						<el-row :gutter="20">

						  <el-col :span="12" v-for="num,index in randomNum">

							  <div class="card-sep">

								  <el-card class="card-sep" shadow="always" @click.native="getVal(num,index)">

								    {{ num }}

								  </el-card>

							  </div>

						  </el-col>

						  <!-- <el-col :span="12">

						    <el-card shadow="hover">

						      3

						    </el-card>

						  </el-col>

						</el-row>

						<el-row :gutter="20">

						  <el-col :span="12">

						    <el-card shadow="always">

						      8

						    </el-card>

						  </el-col>

						  <el-col :span="12">

						    <el-card shadow="hover">

						      9

						    </el-card>

						  </el-col> -->

						</el-row>

						<!-- 运算符选择 -->

						<el-row class="h-sep">

						  <el-col :span="4"><el-button type="primary" plain icon="el-icon-plus" @click="add">加</el-button></el-col>

						  <el-col :span="4"><el-button type="primary" plain icon="el-icon-minus" @click='inc'>减</el-button></el-col>

						  <el-col :span="4"><el-button type="primary" plain icon="el-icon-close" @click='mul'>乘</el-button></el-col>

						  <el-col :span="4"><el-button type="primary" plain icon="" @click='div'>/&nbsp;&nbsp;除</el-button></el-col>

						  <el-col :span="4"><el-button type="primary" plain icon="el-icon-arrow-left" @click='left'>括</el-button></el-col>

						  <el-col :span="4"><el-button type="primary" plain icon="el-icon-arrow-right" @click='right'>号</el-button></el-col>

						</el-row>

						<el-row :gutter="20" class="footBtn">

							<el-col :span="4"><el-button type="primary" plain icon="el-icon-refresh-right" @click='clean'>清除</el-button></el-col>

							<el-col :span="4"><el-button type="primary" plain icon="el-icon-success" @click='confirm'>确定</el-button></el-col>

							<el-col :span="4"><el-button type="primary" plain icon="el-icon-refresh" @click='resert'>换题</el-button></el-col>

						</el-row>

					</div>

					

				</el-main>

		    </el-container>

		</div>

		<div id="cas" style="position: absolute;width: 200px;height: 200px; left: 200px; z-index: 99999;"></div>

		<script src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js" type="text/javascript" color="255,0,0" opacity="0.5" count="200" ></script>

	</body>

	<script type="text/javascript">

		var app = new Vue({

			el:'#app', //选择器

			data:{

				msg:'hello',

				randomNum:[],

				result:'',

				tempResult:'',

				flag0:false,

				flag1:false,

				flag2:false,

				flag3:false

			},

			mounted() {

				this.getRandomNum();

			},

			methods:{

				getRandomNum() {

					this.randomNum = [];

					for (var i = 0; i < 4; i++) {

						// 生成1-9的随机数

						this.randomNum.push(Math.floor(Math.random(9)*10+1));

					}

				},

				getVal(num,index) {

					let selNum = num;

					this.result += num;

					switch(index) {

						case 0: 

							this.flag0 = !this.flag0;

							break;

						case 1: 

							this.flag1 = !this.flag1;

							break;

						case 2: 

							this.flag2 = !this.flag2;

							break;

						case 3: 

							this.flag3 = !this.flag3;

							break;

					}

				},

				// 重置flag标识

				resertFlag() {

					this.flag0 = false;

					this.flag1 = false;

					this.flag2 = false;

					this.flag3 = false;

				},

				add() {

					this.result += '+';

				},

				inc() {

					this.result += '-';

				},

				mul() {

					this.result += '*';

				},

				div() {

					this.result += '/';

				},

				left() {

					this.result += '(';

				},

				right() {

					this.result += ')';

				},

				clean() {

					this.result = '';

					this.resertFlag();

				},

				confirm() {

					try{


						var flag = this.flag0 && this.flag1 && this.flag2 && this.flag3;

						console.log('res:',this.result);

						if (flag) {

							// 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现

							this.tempResult = eval(this.result);

							if (this.tempResult === 24) {

								this.$message.success('计算正确！');

								// this.$message({

								//   showClose: true,

								//   message: '正确',

								//   type: 'success'

								// });

								this.result = '';

								this.getRandomNum();

							} else{

								this.$message.error('计算错误！');

								this.result = '';

								this.resertFlag();

							}

						} 

						else {

							this.$message.error('每个数字仅可使用1次！');

						}

						

					}

					catch(err) {

						this.$message.error('输入有误！');

						this.result = '';

					}

					

				},

				resert() {

					this.getRandomNum();

					this.resertFlag();

					this.result = '';

				}

			},

			

		}); 

		

	</script>

	

	<style type="text/css">



		html, body, #app{

			text-align: center;

		    height:100%;

		    margin:0;

		    padding:0;

		}

		.el-container {

			height: 100%;

		}

		.main {

			width: 40%;

			margin-left: 30%;

		}

		.el-row {

			margin-top: 2.5rem;

		}

		.el-card__body{

			height: 3.75rem;

			font-size: xx-large;

			line-height: 3.75rem;

		}

		.footBtn{

			margin-left: 0 !important;

		}

		.card-sep{

			margin-bottom: 1.25rem;

		}

		.h-sep {

			margin-top: 1.375rem;

		}

		

	</style>

</html>

 

small-white
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现24点游戏源码(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 97
JavaScript实现24点游戏源码(附完整源码)
html 计算24点游戏,0048 JavaScript编程实现算24点游戏
weixin_36081299的博客
06-02 1040
原标题：0048 JavaScript编程实现算24点游戏上节课在网页上使用Java实现了根据输入日期计算星座的程序。这节课来做一个算24点游戏，主要是练习使用Java来控制网页元素。程序设计思路在第1章的教程里面，学习过如何编写算法来计算给出4个1到13之间的数字来求出所有的算出24点的算法。这节课就不做算法了，来在网页上实现这个游戏。游戏规则是这样的：网页加载后，显示4个随机数，范围是从1到1...
vue做游戏vue游戏引擎vue小游戏开发
代上老码的专栏
04-08 1442
Vue.js 是一个构建用户界面的渐进式JavaScript框架，它同样可以用于游戏开发。
VUE 三目运算 // element ui 菜单栏组件 // css穿透
qq_43503450的博客
10-21 575
前端小总结 VUE 三目运算 // element ui 菜单栏组件 // css穿透
设置el-card的css
jiang396的专栏
10-26 1202
其实在el-card说明文档里面有， <el-card shadow="always" :body-style="{ padding: '20px 20px 0px 20px' }"> :body-style="{ padding: '20px 20px 0px 20px'}" 注意body前面有一个 ：
一分钟带你体验html+vue+element-ui的丝滑
热门推荐
Java Pro
06-20 19万+
技术栈 html 网页，你指定知道 vue 尤尤开发的前端框架 element 外卖团队的前端ui 引入css 在你的网页的<title>标签下添加 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 引入js 在html下面，<body>里加入 <!-- 开发环境版本，包含了有帮助的命令行警告 --&
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
基于Vue+Vue-router+Vuex+Element-ui+Axios商城
06-27
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。
mall-manage-system:vue-cli 3.0 + element-ui + vue-router + axios + Vuex + Mock + echarts实现电商管理系统后台
03-11
vue-cli 3.0 + element-ui + vue-router + axios + Vuex + Mock + echarts 2，测试账号地址 访问地址：待建设 账号：admin密码：admin 账号：xiaoxiao密码：xiaoxiao 因为菜单是根据不同用户权限动态生成的，所以...
基于SpringBoot+MyBatis-Plus+Vue+element ui的前后端分离的影院选座购票系统源码.zip
最新发布
05-08
基于SpringBoot+MyBatis-Plus+Vue+element ui的前后端分离的影院选座购票系统源码.zip个人经导师指导并认可通过的高分毕业设计项目，评审分98分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习...
JavaScript算24点小游戏
12-13
js实现的算24点小游戏,效果图可以移步http://blog.csdn.net/qq_36326947/article/details/78792634
js版24点游戏
08-31
javascript编写的网页版游戏， 80后都玩过的24点游戏， 4个牌加减乘除算出24， 1.电脑随机生成4张能算出24的牌，你去算，算不出来可以电脑求解 2.你随便弄4张牌电脑帮你算
基于JS实现计算24点算法代码实例解析
10-15
主要介绍了基于JS实现计算24点算法代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
经验总结之一个月学习Web前端开发（html+css+js+vue3+element plus + echarts）
Comin的博客
12-30 2371
作为一名写了十多年代码， 在前端、后端之间不断反复横跳的码畜，虽然对于前端的MFC， QT, 各种游戏引擎（HGE, GB, Cocos2D等）的GUI等都有所涉猎，但是对于Web前端却一直没有触及，尽管对于H5很看好（想学），却也一直没有行动。直到最近，终于利用工作机会花了差不多一个月学习、实战了一把。这里说明一下，我之前对Web前端开发可以说是0基础。Html标签，css样式可能都只认识一两个，对VUE也只是知道有这么个框架而已。 大致情况是这样的，公司的游戏项目还处于前端Demo验证阶段，我后端
vue js游戏，抗疫小游戏，抗疫的汤圆，仅以此小游戏献给所有为抗击疫情做出贡献的人
Python代码大全
01-03 223
各位朋友新年快乐，相信大家现在都已经到家了吧，我在这给大家隔空来个云拜年，祝大家新的一年里心想事成，万事如意。我也是昨天刚到家，这几天又是忙离职，又是忙搬家的，回老家之后马上就接着来写文章了，就为了能在春节前发出来。虽然很累，但是也很开心，毕竟能回家过年，要说今年差一点就回不了家了，具体大家都懂，如今能在疫情肆虐的时期安全回家，离不开每一位抗疫人员的坚持和努力，也离不开各位的坚持和配合，所以这个小游戏就送给你们，希望大家能够喜欢，也希望里面用到的知识能够帮到大家。
前端VUE框架+element-ui构建界面
u014084915的博客
01-07 1553
（1）element组件使用，element组件网址：https://element.eleme.cn/#/zh-CN/component/form element组件网址查看按钮代码，在vue默认界面中写入按钮代码， 默认按钮采用js代码式跳转，主要按钮采用路由声明式跳转。 （2）前端第一步：写静态界面，第二步：写js，jquery，按钮点击事件js代码式js写法如下： （3）终端运行界面的代码是什么，如何配置实现点击运行，显示效果如下图所示： ...
【记录如何用vue+element ui搭建一个页面】
daisy_juhua的博客
11-11 499
记录如何用vue+element ui搭建一个页面
Vue + Element做个小页面~
`or 1 or 不正经の泡泡
03-27 8394
文章目录前言项目结构MarkDown编辑器消息模块消息导航内容代码（消息）设置模块总结 前言 直接看效果，干啥慢慢猜~ 博文在掘金社区同步更新~ 项目结构 这个的话可以看到分了一些组件嘛。然后总体还是vue+elementui 后面活下来了再用uniapp做移动端嘛。 MarkDown编辑器 这个是咱们比较主要的功能嘛。 也是用了meavon这个开源的Markdown组件嘛。 然后是文章上传嘛，这里有个弹窗嘛。 代码如下 <template> <div id="main"&g
vite+vue3+js+vue-router+pinia+axios+element-plus
09-02
Vite是一个用于快速构建现代化的Web项目的构建工具，它专注于开发阶段的快速热重载，并使用ES模块作为原生的开发模式。Vue3是Vue.js的最新版本，它在性能、开发体验和可维护性上都有所提升。 针对你提到的具体的库和框架： - Vue Router是Vue.js官方的路由管理器，用于实现页面之间的导航和路由控制。你可以通过npm安装vue-router，并在项目中进行配置和使用。 - Pinia是Vue.js的状态管理库，它提供了一种简单而强大的方式来管理应用程序的状态。你可以集成Pinia到你的Vue项目中，以便更好地组织和共享你的应用程序状态。 - Axios是一个基于Promise的HTTP客户端，用于通过网络发送异步请求。你可以使用Axios来处理与服务器的通信，并获取数据来更新你的Vue应用程序。 - Element Plus是一套基于Vue3的组件库，包含了丰富的UI组件，可以帮助你快速搭建漂亮的用户界面。你可以在项目中安装和使用Element Plus来实现各种交互效果和用户界面。 如果你想使用Vite、Vue3和以上提到的库和框架来创建一个项目，你可以按照以下步骤进行： 1. 安装Vite：通过npm全局安装Vite，然后使用Vite命令初始化一个新的项目。 2. 配置Vite：根据你的项目需求，在Vite的配置文件中添加Vue Router、Pinia、Axios和Element Plus的相关配置。 3. 安装和配置Vue Router：通过npm安装Vue Router，并在项目中配置和使用Vue Router来管理应用程序的路由。 4. 集成Pinia：通过npm安装Pinia，并在项目中引入和配置Pinia，以便在应用程序中使用Pinia来管理状态。 5. 使用Axios：通过npm安装Axios，并在项目中引入和配置Axios，以便进行网络请求和数据获取。 6. 引入Element Plus：通过npm安装Element Plus，并在项目中按需引入和使用Element Plus的组件，以搭建漂亮的用户界面。 希望以上信息对你有帮助，祝你在使用Vite、Vue3和这些库和框架时取得成功！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite-vue-ts精简模版集成pinia+svg+router+@src](https://download.csdn.net/download/ldy889/85018930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vite+vue3+ts+vue-router+pinia+axios+element-plus](https://blog.csdn.net/zy_080400/article/details/127125359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值