使用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小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...
随机推荐
- 星环大数据安全组件Guardian与hadoop自带的安全组件区别
在进行讲解之前,先带大家学习下hadoop关于hdfs自己的安全如何实现的--------------------------- 名词: ACL-访问控制列表(Access Control List, ...
- 腾讯AI开放平台的使用
一.腾讯AI开放平台 https://ai.qq.com/ 二.腾讯AI平台支持的功能 三.签名机制 1.计算步骤 用于计算签名的参数在不同接口之间会有差异,但算法过程固定如下4个步骤. 1.将< ...
- Cookies的使用之购物车的实现
Cookies的使用之购物车实现 最近学习了JSON对象之后,发现Cookies的使用更加的灵活方便了.ps:JSON不是JS.可以这么理解,JSON 是 JS 对象的字符串表示法,它使用文本表示一个 ...
- java时间处理，获取当前时间的小时，天，本周周几，本周周一的日期，本月一号的日期
1.时间转时间戳 public static long strToTimestamp(String dateTimeStr) throws Exception { Timestamp time = T ...
- 南京邮电大学//bugkuCTF部分writeup
WEB 1.签到题 nctf{flag_admiaanaaaaaaaaaaa} 右键查看源代码或按f12即可. 2.这题不是web nctf{photo_can_also_hid3_msg} 下载图片 ...
- 学习随笔:Vue.js与Django交互以及Ajax和axios
1. Vue.js地址 Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg:会保持和npm发布的最新的版 ...
- SQL功能分类
DDL 数据定义语言:创建表 ,库,列 DML 数据操作语言:用来操作数据库中的记录 DQL 数据查询语言 :用来查询数据 DCL 数据控制语言:定义访问权限和安全级别 —————————————— ...
- [R]R语言的module工程化
很遗憾,这还是一个挖坑的问题,解决方案并不是很确定. 需求是,大多数的语言都提供import包或module的功能,避免全部代码写到一个文件中,方便管理与维护. 如常用的database模块,每次写R ...
- 菜鸟安卓学习路——更强大的滚动控件--RecycleView
- php解析ini，conf文件
/** * 解析conf文件,类似ini文件 * @param string $strFileName 文件名 * @param boolean $boolParseVal 解析值为数组,多 * @a ...