使用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小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...
随机推荐
- Redis持久化persistence
一.前言 由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数据保存到磁盘上,当redis重启后,可以从磁盘中恢复数据. R ...
- Linux内核优化
相信做运维的同仁,进行运维环境初建时,必须要考虑到操作系统内核参数的优化问题,本人经历数次的运维环境重建后,决定要自行收集一份比较完善的系统内核参数优化说明文件出来,于是就有了下文,本文当前值是官方 ...
- Excel—文本函数
LEFT(从左开始取文本的函数)就是这个函数可以帮我们取文本,按照从左到右的顺序取 函数语法:=LEFT(要取的文本所在的单元格,从左到右取前几位)这表示的是字符,一个英文字母占一个字符,一个汉子也占 ...
- vue小技巧之偷懒的文件路径——减少不必要的代码
众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import '../../../s ...
- 安装VUE Cli3 框架方法
下面为大家介绍一下怎样安装 VUE Cli3的步骤 官网地址 https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...
- Ubuntu 18.04 系统配置 NPM环境和mysql数据库问题解决
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. 今天我就为大家 使用 Ubun ...
- C#实现 单点登录（SSO）
SSO的基本概念 SSO英文全称Single Sign On(单点登录).SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他应用中用于同 ...
- Android Getting Started
Building Your First App Creating an Android Project 介绍如何Android开发环境,具体是:怎么使用Eclipse工具 Create a Proje ...
- 在deepin上安装YouCompleteMe
详细安装步骤在github上有,https://github.com/Valloric/YouCompleteMe,我这里是自己总结的简化版安装步骤. 步骤1.安装Vundle 首先,clone到本地 ...
- 按模板批量修改Excel文件内容
Sub 按模板修改Excel文件() Dim MoBanWorkBook As Workbook Set MoBanWorkBook = Application.ActiveWorkbook Dim ...