使用vue+ivew做2048小游戏
首先先弄页面 废话不多说 上代码
静态页面代码
<template>
<div class="main">
<div class="top">
<Button type="primary" @click="refresh()">重玩</Button>
<span style="font-size: 20px;margin-left: 10px;color: red">分数:{{conunta}}</span>
</div> <div class="jiu">
<div class="grid-cell" id="grid-cell-0-0">
<div class="cell" v-if="a00">{{a00}}</div>
</div>
<div class="grid-cell" id="grid-cell-0-1">
<div class="cell" v-if="a01">{{a01}}</div>
</div>
<div class="grid-cell" id="grid-cell-0-2">
<div class="cell" v-if="a02">{{a02}}</div>
</div>
<div class="grid-cell" id="grid-cell-0-3">
<div class="cell" v-if="a03">{{a03}}</div>
</div> <div class="grid-cell" id="grid-cell-1-0">
<div class="cell" v-if="a10">{{a10}}</div>
</div>
<div class="grid-cell" id="grid-cell-1-1">
<div class="cell" v-if="a11">{{a11}}</div>
</div>
<div class="grid-cell" id="grid-cell-1-2">
<div class="cell" v-if="a12">{{a12}}</div>
</div>
<div class="grid-cell" id="grid-cell-1-3">
<div class="cell" v-if="a13">{{a13}}</div>
</div> <div class="grid-cell" id="grid-cell-2-0">
<div class="cell" v-if="a20">{{a20}}</div>
</div>
<div class="grid-cell" id="grid-cell-2-1">
<div class="cell" v-if="a21">{{a21}}</div>
</div>
<div class="grid-cell" id="grid-cell-2-2">
<div class="cell" v-if="a22">{{a22}}</div>
</div>
<div class="grid-cell" id="grid-cell-2-3">
<div class="cell" v-if="a23">{{a23}}</div>
</div> <div class="grid-cell" id="grid-cell-3-0">
<div class="cell" v-if="a30">{{a30}}</div>
</div>
<div class="grid-cell" id="grid-cell-3-1">
<div class="cell" v-if="a31">{{a31}}</div>
</div>
<div class="grid-cell" id="grid-cell-3-2">
<div class="cell" v-if="a32">{{a32}}</div>
</div>
<div class="grid-cell" id="grid-cell-3-3">
<div class="cell" v-if="a33">{{a33}}</div>
</div>
</div>
</div>
</template>
然后css
.main {
background: white;
margin-top: 200px;
}
.top {
margin: 10px;
}
.jiu {
background: #ecdede;
width: 500px;
height: 500px;
margin: auto;
/* top: 100px; */
padding: 10px;
}
.grid-cell {
width: 100px;
height: 100px;
margin: 10px;
background: #c3bcae;
float: left;
border-radius: 15%;
}
.cell {
line-height: 100px;
background: coral;
border-radius: 15%;
font-size: 50px;
color: white;
font-weight: bold;
}
game.vue
最后核心代码
export default {
name: 'Game',
data() {
return {
arryList: [2,4,8,16,32,64,128,256,512,1024,2048],
timeInterval: true,
a00: "",a01: "",a02: "",a03: "",a10: "",a11: "",a12: "",a13: "",a20: "",a21: "",a22: "",
a23: "",a30: "",a31: "",a32: "",a33: ""
}
},
computed: {
conunta: function() {//记录总分数
var aa=(this.a00==""? 0:parseInt(this.a00))+(this.a01==""? 0:parseInt(this.a01))+(this.a02==""? 0:parseInt(this.a02))+(this.a03==""? 0:parseInt(this.a03))+
(this.a10==""? 0:parseInt(this.a10))+(this.a11==""? 0:parseInt(this.a11))+(this.a12==""? 0:parseInt(this.a12))+(this.a13==""? 0:parseInt(this.a13))+
(this.a20==""? 0:parseInt(this.a20))+(this.a21==""? 0:parseInt(this.a21))+(this.a22==""? 0:parseInt(this.a22))+(this.a23==""? 0:parseInt(this.a23))+
(this.a30==""? 0:parseInt(this.a30))+(this.a31==""? 0:parseInt(this.a31))+(this.a32==""? 0:parseInt(this.a32))+(this.a33==""? 0:parseInt(this.a33))
;
return aa;
}
},
methods: {
generate() {//随机生成一个2或4的格子
let c3=(Math.random()*3).toFixed(0);
let c4=(Math.random()*3).toFixed(0);
let random=Math.random().toFixed(1);
// let b=this.isEnd();
if(this["a"+c3+c4]) {
this.generate();
} else {
this["a"+c3+c4]=this.arryList[random>0.6? 1:0];
}
},
isEnd() {//判断是否存在空的格子
let b=false;
for(let i=0;i<4;i++) {
for(let j=0;j<4;j++) {
if(this["a"+i+j]=="") {
b=true;
}
}
}
return b;
},
refresh() {//刷新重玩
for(let i=0;i<4;i++) {
for(let j=0;j<4;j++) {
this["a"+i+j]="";
}
}
let c1=(Math.random()*3).toFixed(0);
let c2=(Math.random()*3).toFixed(0);
let random=Math.random().toFixed(1);;
this["a"+c1+c2]=this.arryList[random>0.6? 1:0];
this.generate();
},
time() {//做限制 防止快速连击
this.timeInterval=false;
let logintimeOut=setInterval(() => {
this.timeInterval=true;
clearInterval(logintimeOut);
},1000*0.2);
},
reghtUp() {//点击右键事件
let b=false;
if(this.isEnd()) {
for(let i=0;i<4;i++) {
for(let j=2;j>-1;j--) {
for(let k=3;k>j;k--) {//k为落子点坐标
if(this["a"+i+j]) {//如果要跳转的格子为空 那就跳过
if(this["a"+i+k]==""&&this.noBlockHorizontal(i,j,k)) {//如果落子点为空的格子并且中间没障碍物则可落子
this.time();
b=true;
this["a"+i+k]=this["a"+i+j];//格子赋值
this["a"+i+j]="";
} else if(this["a"+i+k]==this["a"+i+j]&&this.noBlockHorizontal(i,j,k)) {
this.time();
b=true;
let a=parseInt(this["a"+i+k])+parseInt(this["a"+i+j]);
this["a"+i+k]=a;
this["a"+i+j]="";
}
}
}
}
}
} else {
this.$Message.warning("游戏结束您的分数是："+this.conunta);
}
},
bottomUp() {
let b=false;
if(this.isEnd()) {
for(let i=0;i<4;i++) {//i为x轴j为y轴
for(let j=2;j>-1;j--) {//从第二排开始
for(let k=3;k>j;k--) {
if(this["a"+j+i]) {
if(this["a"+k+i]==""&&this.toBlockHorizontal(i,j,k)) {//判断
this.time();
b=true;
this["a"+k+i]=this["a"+j+i];
this["a"+j+i]="";
} else if(this["a"+k+i]==this["a"+j+i]&&this.toBlockHorizontal(i,j,k)) {
this.time();
b=true;
let a=parseInt(this["a"+k+i])+parseInt(this["a"+j+i]);
this["a"+k+i]=a;
this["a"+j+i]="";
}
}
}
}
}
} else {
this.$Message.warning("游戏结束您的分数是："+this.conunta);
}
return b;
},
topUp() {
let b=false;
if(this.isEnd()) {
for(let i=0;i<4;i++) {//i为x轴j为y轴
for(let j=1;j<4;j++) {//从第二排开始
for(let k=0;k<j;k++) {
if(this["a"+j+i]) {
if(this["a"+k+i]==""&&this.toBlockHorizontal(i,k,j)) {//判断
this.time();
b=true;
this["a"+k+i]=this["a"+j+i];
this["a"+j+i]="";
} else if(this["a"+k+i]==this["a"+j+i]&&this.toBlockHorizontal(i,k,j)) {
this.time();
b=true;
let a=parseInt(this["a"+k+i])+parseInt(this["a"+j+i]);
this["a"+k+i]=a;
this["a"+j+i]="";
}
}
}
}
}
} else {
this.$Message.warning("游戏结束您的分数是："+this.conunta);
}
return b;
},
leftUp() {
let b=false;
if(this.isEnd()) {
for(let i=0;i<4;i++) {
for(let j=1;j<4;j++) {
for(let k=0;k<j;k++) {
if(this["a"+i+j]) {
if(this["a"+i+k]==""&&this.noBlockHorizontal(i,k,j)) {//判断
this.time();
b=true;
this["a"+i+k]=this["a"+i+j];
this["a"+i+j]="";
} else if(this["a"+i+k]==this["a"+i+j]&&this.noBlockHorizontal(i,k,j)) {
this.time();
b=true;
let a=parseInt(this["a"+i+k])+parseInt(this["a"+i+j]);
this["a"+i+k]=a;
this["a"+i+j]="";
}
}
}
}
}
} else {
this.$Message.warning("游戏结束您的分数是："+this.conunta);
}
return b;
},
monitor(_this) {
window.onkeydown=function(e) {//监听键盘事件
console.log(e.keyCode);
if(_this.timeInterval) {
switch(e.keyCode) {
case 37:
if(_this.leftUp()) {//移动之后新生成一个格子
_this.generate();
}
break;
case 38:
if(_this.topUp()) {
_this.generate();
}
break;
case 39:
if(_this.reghtUp()) {
_this.generate();
}
break;
case 40:
if(_this.bottomUp()) {
_this.generate();
}
break;
}
}
}
},
noBlockHorizontal(row,col1,col2) {//判断x轴中间是否有障碍物
for(var i=col1+1;i<col2;i++)
if(this["a"+row+i])
return false;
return true;
},
toBlockHorizontal(row,col1,col2) {//判断y轴中间是否有障碍物
for(var i=col1+1;i<col2;i++)
if(this["a"+i+row])
return false;
return true;
}
},
mounted() {//初始化随机生成两个格子
let c1=(Math.random()*3).toFixed(0);
let c2=(Math.random()*3).toFixed(0);
let random=Math.random().toFixed(1);;
this["a"+c1+c2]=this.arryList[random>0.6? 1:0];
this.generate();
this.monitor(this);
}
}
使用vue+ivew做2048小游戏的更多相关文章
- 【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容
引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储 首先考虑用二维数组存储所有行数,列数 ...
- C# 开发2048小游戏
这应该是几个月前,闲的手痒,敲了一上午代码搞出来的,随之就把它丢弃了,当时让别人玩过,提过几条更改建议,但是时至今日,我也没有进行过优化和更改(本人只会作案,不会收场,嘎嘎),下面的建议要给代码爱好的 ...
- Swift实战之2048小游戏
上周在图书馆借了一本Swift语言实战入门,入个门玩一玩^_^正好这本书的后面有一个2048小游戏的实例,笔者跟着实战了一把. 差不多一周的时间,到今天,游戏的基本功能已基本实现,细节我已不打算继续完 ...
- 2048小游戏代码解析 C语言版
2048小游戏,也算是风靡一时的益智游戏.其背后实现的逻辑比较简单,代码量不算多,而且趣味性强,适合作为有语言基础的童鞋来加强编程训练.本篇分析2048小游戏的C语言实现代码. 前言 游戏截图: 游 ...
- 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...
- 【2048小游戏】——原生js爬坑之封装行的移动算法&事件
引言:2048小游戏的核心玩法是移动行,包括横行和纵行,玩家可以选择4个方向,然后所有行内的数字就会随着行的移动而向特定的方向移动.这个行的移动是一个需要重复调用的算法,所以这里就要将一行的移动算法封 ...
- .NET手撸2048小游戏
.NET手撸2048小游戏 2048是一款益智小游戏,得益于其规则简单,又和2的倍数有关,因此广为人知,特别是广受程序员的喜爱. 本文将再次使用我自制的"准游戏引擎"FlysEng ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- 如何在CentOS上安装一个2048小游戏
如何在centos上安装一个2048小游戏 最近在学习CentOS系统,就琢磨着玩点什么,然后我看到有人在玩2048小游戏,所有我就在想,为啥不装一个2048小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...
随机推荐
- CAShapLayer的使用1
1.添加橙色圆环 - (CAShapeLayer *)shapeLayer { if (!_shapeLayer) { _shapeLayer = [CAShapeLayer layer]; CGRe ...
- UOJ#465. 【HNOI2019】校园旅行 其他
原文链接www.cnblogs.com/zhouzhendong/p/UOJ465.html 前言 tmd并查集写挂,调到自闭. cly和我写挂了同一个地方. 一下救了两个人感觉挺开心. 题解 首先直 ...
- Tomcat配置https后，并发较大时，频繁超时情况。
tomcat配置ssl后,出现频繁的访问超时情况. 通过脚本(感谢UCloud的技术支持 金晓帆-): netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a i ...
- anaconda 命令集合
0.安装 $ bash ~/Downloads/Anaconda3-5.3.1-MacOSX-x86_64.sh source ~/.bash_profile 1.查看 anaconda 的版本 co ...
- ISP PIPLINE (十五) AF
主流的AF: CDAF, PDAF, laser assist AF(这个只是辅助,在微距或者拍摄纹理不明显的场景下好用). AF的大致原理就是检测图像锐度或者等价于锐度的参数,推动马达实现合焦或者对 ...
- 微信跳转，网页跳转微信app跳转公众号关注页面[转载]
[微信跳转链接]之跳转公众号关注页面如何做到在微信内部在这里插入代码片浏览器打开的webview页面中,跳转到微信公众号的关注页面呢!我们可以通过访问微信提供的URL协议(weixin://)来实现这 ...
- tf.contrib.slim arg_scope
缘由 最近一直在看深度学习的代码,又一次看到了slim.arg_scope()的嵌套使用,具体代码如下: with slim.arg_scope( [slim.conv2d, slim.separab ...
- php一些高级函数方法
PHP高级函数 1.call_user_func (http://php.net/manual/zh/function.call-user-func.php) 2.get_class (http:// ...
- 使用Jacksum对文件夹和文件生成checksum
Jacksum 是一个java开源工具, 用来 给单个文件生成checksum, 也可以给整个文件中所有文件生成checksum,生产的checksum 可以是MD系列,也可sha. 你可以参考 官 ...
- node03
1.express处理post请求 借助body-parse中间件,其实最终我们也不会使用这个 对于get请求,无需中间件,用req.query即可返回相应的数据 但是post我们尝试借助中间件处理 ...