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

最新推荐文章于 2022-08-09 09:29:11 发布
最新推荐文章于 2022-08-09 09:29:11 发布
阅读量1.2k 收藏 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>

 

JavaScript实现24点游戏源码(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 191
JavaScript实现24点游戏源码(附完整源码)
24点扑克牌游戏（js和Jquery实现）
12-21
24点扑克牌游戏（js和Jquery实现）............................................
js版24点游戏
08-31
javascript编写的网页版游戏， 80后都玩过的24点游戏， 4个牌加减乘除算出24， 1.电脑随机生成4张能算出24的牌，你去算，算不出来可以电脑求解 2.你随便弄4张牌电脑帮你算
Javascript实现24点游戏
qq_38829316的博客
03-04 1583
Javascript实现24点游戏 你有 4 张写有 1 到 9 数字的牌。你需要判断是否能通过 *，/，+，-，(，) 的运算得到 24 注意: 1.除法运算符 / 表示实数除法，而不是整数除法。例如 4 / (1 - 2/3) = 12 ； 2. 每个运算符对两个数进行运算。特别是我们不能用 - 作为一元运算符。例如，[1, 1, 1, 1] 作为输入时，表达式 -1 - 1 - 1 - ...
JS实现24点游戏
weixin_34161064的博客
11-06 1392
游戏逻辑：拿一副牌，抽去大小王后，剩下1～10和JQK这些张牌。任意抽取4张牌(称为牌组)，用加、减、乘、除把牌面上的数算成24。每张牌必须用且只能用一次。实现思路：先定义四张牌的数据结构，代码函数dataWarp：{ r: number, // 扑克牌代表的数字 m: string // 运算的表达式（最后过滤出r === 24的时候，获取运算的方法） }复制代码假设只要两张牌，...
JavaScript算24点小游戏
12-13
js实现的算24点小游戏,效果图可以移步http://blog.csdn.net/qq_36326947/article/details/78792634
基于vue+Element+nodejs+mongoDB的企业官网及后台系统设计与实现.doc
09-07
"基于vue+Element+nodejs+mongoDB的企业官网及后台系统设计与实现" 一、Vue框架概述 * Vue是一款基于MVVM（Model-View-ViewModel）架构的前端框架，由尤雨溪（Evan You）创建，于2014年首次发布。 * Vue框架的优点...
毕业设计-游戏资讯系统（Vue+Node）
最新发布
05-04
毕业设计——游戏资讯系统（Vue+Node） # Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台 ## 一、 入门 1. 项目介绍 1. 工具安装和环境搭建(nodejs,npm,mongodb) 1. 初始化项目 ## 二、 管理后台 1. ...
HTML+VUE.js抽卡小游戏
05-27
在这个"HTML+Vue.js抽卡小游戏"中，我们将探讨如何利用这两者来创建一个交互式的抽卡游戏。 首先，HTML作为页面的基本骨架，用于定义页面的结构和内容。在抽卡游戏中，HTML将被用来创建游戏界面，包括卡片的布局、...
经验总结之一个月学习Web前端开发（html+css+js+vue3+element plus + echarts）
Comin的博客
12-30 2524
作为一名写了十多年代码， 在前端、后端之间不断反复横跳的码畜，虽然对于前端的MFC， QT, 各种游戏引擎（HGE, GB, Cocos2D等）的GUI等都有所涉猎，但是对于Web前端却一直没有触及，尽管对于H5很看好（想学），却也一直没有行动。直到最近，终于利用工作机会花了差不多一个月学习、实战了一把。这里说明一下，我之前对Web前端开发可以说是0基础。Html标签，css样式可能都只认识一两个，对VUE也只是知道有这么个框架而已。 大致情况是这样的，公司的游戏项目还处于前端Demo验证阶段，我后端
vue3+elment-plus 前端小游戏，文明进度全部代码
07-24
游戏使用VUE3.0 + Element-Plus 文明总共有10个等级，升级建筑、农业、商业、科技、文化，会提升人口、食物、黄金的数量，同时科技和文化影响文明的进程，欢迎大家体验，代码比较粗糙，也很简单，没有封装组件，有...
基于JS实现计算24点算法代码实例解析
10-15
主要介绍了基于JS实现计算24点算法代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js小游戏，使用easeljs制作的小游戏
02-20
围住神经猫源码，课程资源，学习学习，提供给大家学习，一个小小的js案例。。。可以看看源码学习学习哦！
无聊用 javascript 写了一个 24 点算法
jhkwei的专栏
11-09 367
function result(a,b, op){ if(op == '+'){ return a + b; } if(op == '-'){ return a - b; } if(op == '*'){ return a * b; } if(op == '/'){ return a / b; } } function arrayCopy(a) { var b = []; for(var i...
24点游戏 VUE
沙雕JavaScripter的博客
08-09 945
24点游戏 VUE
html 计算24点游戏,0048 JavaScript编程实现算24点游戏
weixin_36081299的博客
06-02 1110
原标题：0048 JavaScript编程实现算24点游戏上节课在网页上使用Java实现了根据输入日期计算星座的程序。这节课来做一个算24点游戏，主要是练习使用Java来控制网页元素。程序设计思路在第1章的教程里面，学习过如何编写算法来计算给出4个1到13之间的数字来求出所有的算出24点的算法。这节课就不做算法了，来在网页上实现这个游戏。游戏规则是这样的：网页加载后，显示4个随机数，范围是从1到1...
使用Vue开发1个24点小应用
丰年留客的专栏
04-05 1834
非前端人员尝试使用vue编写简单小应用。
Vue + Element做个小页面~
`or 1 or 不正经の泡泡
03-27 8438
文章目录前言项目结构MarkDown编辑器消息模块消息导航内容代码（消息）设置模块总结 前言 直接看效果，干啥慢慢猜~ 博文在掘金社区同步更新~ 项目结构 这个的话可以看到分了一些组件嘛。然后总体还是vue+elementui 后面活下来了再用uniapp做移动端嘛。 MarkDown编辑器 这个是咱们比较主要的功能嘛。 也是用了meavon这个开源的Markdown组件嘛。 然后是文章上传嘛，这里有个弹窗嘛。 代码如下 <template> <div id="main"&g
24点游戏
dtrder的博客
10-04 761
常见游戏规则： 从扑克中每次取出4张牌。使用加减乘除，第一个能得出24者为赢。（其中，J代表11，Q代表12，K代表13，A代表1），按照要求编程解决24点游戏。 基本要求： 随机生成4个代表扑克牌牌面的数字字母，程序自动列出所有可能算出24的表达式，用擅长的语言（C/C++/Java或其他均可）实现程序解决问题。 1.程序风格良好(使用自定义注释模板) 2.列出表达式无重复。 思路： 24点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值