2048小程序代码c语言,微信小程序版2048

今天代码君教大家做一款2048游戏，用微信小程序来做，话不多说，先上效果图

2048.gif

game.png

2048的实现

一、2048.js

var app = getApp();

var Grid = require('./grid.js');

var Tile = require('./tile.js');

var GameManager = require('./game_manager.js');

var config = {

data: {

hidden: false,

// 游戏数据可以通过参数控制

grids: [],

over: false,

win: false,

score: 0,

highscore: 0,

overMsg: '游戏结束'

},

onLoad: function() {

this.GameManager = new GameManager(4);

this.setData({

grids: this.GameManager.setup(),

highscore: wx.getStorageSync('highscore') || 0

});

},

onReady: function() {

var that = this;

// 页面渲染完毕隐藏loading

that.setData({

hidden: true

});

},

// 更新视图数据

updateView: function(data) {

// 游戏结束

if(data.over){

data.overMsg = '游戏结束';

}

// 获胜

if(data.win){

data.overMsg = '恭喜';

}

this.setData(data);

},

// 重新开始

restart: function() {

this.updateView({

grids: this.GameManager.restart(),

over: false,

won: false,

score: 0

});

},

touchStartClienX: 0,

touchStartClientY: 0,

touchEndClientX: 0,

touchEndClientY: 0,

isMultiple: false, // 多手指操作

touchStart: function(events) {

// 多指操作

this.isMultiple = events.touches.length > 1;

if (this.isMultiple) {

return;

}

var touch = events.touches[0];

this.touchStartClientX = touch.clientX;

this.touchStartClientY = touch.clientY;

},

touchMove: function(events) {

var touch = events.touches[0];

this.touchEndClientX = touch.clientX;

this.touchEndClientY = touch.clientY;

},

touchEnd: function(events) {

if (this.isMultiple) {

return;

}

var dx = this.touchEndClientX - this.touchStartClientX;

var absDx = Math.abs(dx);

var dy = this.touchEndClientY - this.touchStartClientY;

var absDy = Math.abs(dy);

if (Math.max(absDx, absDy) > 10) {

var direction = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);

var data = this.GameManager.move(direction) || {

grids: this.data.grids,

over: this.data.over,

won: this.data.won,

score: this.data.score

};

var highscore = wx.getStorageSync('highscore') || 0;

if(data.score > highscore){

wx.setStorageSync('highscore', data.score);

}

this.updateView({

grids: data.grids,

over: data.over,

won: data.won,

score: data.score,

highscore: Math.max(highscore, data.score)

});

}

}

};

Page(config);

二、2048.wxml

加载中...

2048

{{score}}

{{highscore}}

你能拿到2048吗？

新游戏

{{overMsg}}

再试一次

{{cell.value}}

这里就先放上部分代码，wxss样式以及执行的js代码太多就不放上来了，想要全部源码的，关注公众号《代码集中营》回复2048获取源码

总结

这就是一款小游戏，读者可以拿来做练习用，导入项目就可以跑起来，玩着自己做的小游戏，会非常有成就感的~