使用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小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...
随机推荐
- unity3d优化-代码篇（不定期更新）
1.Update 大多数情况是需要在update中处理很多逻辑的,然而unity3d底层是c/c++编写,逻辑层是c#,通过monobehaviour挂载于对象中,实现一些unity3d接口的重载. ...
- 【JavaScript】$.extend使用心得及源码研究
最近写多了js的面向对象编程,用$.extend写继承写得很顺手.但是在使用过程中发现有几个问题. 1.深拷贝 $.extend默认是浅拷贝,这意味着在继承复杂对象时,对象中内嵌的对象无法被拷贝到. ...
- Android进阶：二、从源码角度看透 HandlerThread 和 IntentService 本质
上篇文章我们讲日志的存储策略的时候用到了HandlerThread,它适合处理"多而小的任务"的耗时任务的时候,避免产生太多线程影响性能,那这个HandlerThread的原理到底 ...
- twig模板的进一步学习以及在symfony当中的使用
首先,twig可以理解为用于输出html代码的,虽然用PHP等其他语言也可以输出,但是twig更为简洁高效,同时twig模板被编译成原生的php类缓存起来,所以才会这么快, 其实twig跟php类差不 ...
- python3控制语句---选择结构语句
python中的控制语句主要有if.if--else.if--slif--else.pass语句.其实python的控制语句与其他语言的控制语句工作原理基本一样.控制语句可以分为选择结构语句和循环结构 ...
- ajax 文件下载
作为一个后端开发人员,使用java 生成文件,提供前端下载,这个问题倒不大,可是让我们自己去下载文件的时候,这个问题就大了,对不起,我只对前端一知半解,并不精通,谢谢!! 需求如下:前端检索数据,后台 ...
- javascript js原生ajax post请求 实例
HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...
- php位运算
php位运算 /** * 位运算 */ echo "<pre>"; $aa = $a&$b; //按位与,相同位都为1时为1,其他都为0; echo " ...
- dedecms 后台可以上传mp4，但无法选择
原文链接 找到 /include/dialog/select_media.php 找到rmvb,在其后面加 “|mp4” 即可. 1
- 读取Excel文件存储在实体类中
1.Maven文件 <!--读取Excel的架包--> <dependency> <groupId>org.apache.poi</groupId> & ...