Home >WeChat Applet >WeChat Development >2048 game developed by WeChat
2048 game developed by WeChat
- Y2JOriginal
- 2017-05-08 11:04:263108browse
In this WeChat mini program development tutorial, we will introduce how to use WeChat mini program to develop 2048 mini games.
This article is mainly divided into two parts, the main part of the mini program and the mini game page part
1. The main part of the mini program
The main part of a mini program consists of three files The composition must be placed in the root directory of the project, as follows:
1. Mini program logic
App({
onLaunch: function() {
// Do something initial when launch. },
onShow: function() { // Do something when show. },
onHide: function() { // Do something when hide. },
globalData: 'I am global data'})
2. Mini program public settings
Mainly register one page, that is, the 2048 game homepage
{
"pages":[
"pages/index/index"
],
"window":{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"#1AAD16",
"navigationBarTitleText":"2048游戏",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light" },
"networkTimeout": {
"request": 10000,
"downloadFile": 10000 },
"debug": false
}
2. Mini game page part
The 2048 game mini program page is mainly composed of the following files.
1. Page structure
The page structure code is as follows
<view class="container">
<view class="game-body">
<loading hidden="{{hidden}}">
加载中... </loading>
<view class="heading">
<text class="title">2048</text>
<view class="scores-container">
<view class="score-container">{{score}}</view>
<view class="best-container">{{highscore}}</view>
</view>
</view>
<view class="above-game">
<text class="game-intro">你能拿到2048吗？</text>
<text class="restart-button" bindtap="restart">新游戏</text>
</view>
<view class="game-container">
<view class="game-message game-{{over ? (win ? 'won' : 'over') : ''}}">
<text class="over-msg">{{overMsg}}</text>
<view class="lower">
<!-- <text class="keep-playing-button">继续</text> -->
<text class="retry-button" bindtap="restart">再试一次</text>
</view>
</view>
<view class="grid-container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
<view wx:for="{{grids}}" wx:for-index="rowIdx" wx:for-item="row" class="grid-row">
<view wx:for="{{row}}" wx:for-index="colIdx" wx:for-item="cell" class="grid-cell">
<view class="tile tile-{{cell.value}}">
<view wx:if="{{cell}}" class="tile-inner">
{{cell.value}} </view>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="game-explanation">
<view class="important">如何开始：</view> 手指上下左右滑动
</view> --></view></view>2. Style sheet
The style code is as follows
.container {
margin: 0;
padding: 20px 0;
background: #faf8ef;
color: #776e65;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 18px;
}.heading:after {
content: "";
display: block;
clear: both;
}.title {
font-size: 80px;
font-weight: bold;
margin: 0;
display: block;
float: left;
}.scores-container {
float: right;
text-align: right;
}.score-container, .best-container {
position: relative;
display: inline-block;
background: #bbada0;
padding: 15px 25px;
font-size: 25px;
height: 25px;
line-height: 47px;
font-weight: bold;
border-radius: 3px;
color: white;
text-align: center;
margin: 8px 0 0 8px;
}.score-container:after, .best-container:after {
position: absolute;
width: 100%;
top: 10px;
left: 0;
text-transform: uppercase;
font-size: 13px;
line-height: 13px;
text-align: center;
color: #eee4da;
}.score-container .score-addition, .best-container .score-addition {
position: absolute;
right: 30px;
color: red;
font-size: 25px;
line-height: 25px;
font-weight: bold;
color: rgba(119, 110, 101, 0.9);
z-index: 100;
}.score-container:after {
content: "Score";
}.best-container:after {
content: "Best";
}p {
margin-top: 0;
margin-bottom: 10px;
line-height: 1.65;
}a {
color: #776e65;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}strong.important {
text-transform: uppercase;
}hr {
border: none;
border-bottom: 1px solid #d8d4d0;
margin-top: 20px;
margin-bottom: 30px;
}.game-container {
margin-top: 40px;
position: relative;
padding: 15px;
cursor: default;
-webkit-touch-callout: none;
-ms-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
touch-action: none;
background: #bbada0;
border-radius: 6px;
width: 500px;
height: 500px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}.game-container .game-message { /*display: none;*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(238, 228, 218, 0.5);
z-index: 100;
text-align: center;
}.game-container .game-message p {
font-size: 60px;
font-weight: bold;
height: 60px;
line-height: 60px;
margin-top: 222px;
}.game-container .game-message .lower {
display: block;
margin-top: 59px;
}.game-container .game-message a {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
margin-left: 9px;
}.game-container .game-message .keep-playing-button {
display: none;
}.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2;
}.game-container .game-message.game-won .keep-playing-button {
display: inline-block;
}.game-container .game-message.game-won, .game-container .game-message.game-over {
display: block;
}.grid-container {
position: absolute;
z-index: 1;
}.grid-row {
margin-bottom: 15px;
}.grid-row:last-child {
margin-bottom: 0;
}.grid-row:after {
content: "";
display: block;
clear: both;
}.grid-cell {
width: 106.25px;
height: 106.25px;
margin-right: 15px;
float: left;
border-radius: 3px;
background: rgba(238, 228, 218, 0.35);
}.grid-cell:last-child {
margin-right: 0;
}.tile-container {
position: absolute;
z-index: 2;
}.tile, .tile .tile-inner {
width: 107px;
height: 107px;
line-height: 107px;
}.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 121px);
-moz-transform: translate(0px, 121px);
-ms-transform: translate(0px, 121px);
transform: translate(0px, 121px);
}.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 242px);
-moz-transform: translate(0px, 242px);
-ms-transform: translate(0px, 242px);
transform: translate(0px, 242px);
}.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 363px);
-moz-transform: translate(0px, 363px);
-ms-transform: translate(0px, 363px);
transform: translate(0px, 363px);
}.tile.tile-position-2-1 {
-webkit-transform: translate(121px, 0px);
-moz-transform: translate(121px, 0px);
-ms-transform: translate(121px, 0px);
transform: translate(121px, 0px);
}.tile.tile-position-2-2 {
-webkit-transform: translate(121px, 121px);
-moz-transform: translate(121px, 121px);
-ms-transform: translate(121px, 121px);
transform: translate(121px, 121px);
}.tile.tile-position-2-3 {
-webkit-transform: translate(121px, 242px);
-moz-transform: translate(121px, 242px);
-ms-transform: translate(121px, 242px);
transform: translate(121px, 242px);
}.tile.tile-position-2-4 {
-webkit-transform: translate(121px, 363px);
-moz-transform: translate(121px, 363px);
-ms-transform: translate(121px, 363px);
transform: translate(121px, 363px);
}.tile.tile-position-3-1 {
-webkit-transform: translate(242px, 0px);
-moz-transform: translate(242px, 0px);
-ms-transform: translate(242px, 0px);
transform: translate(242px, 0px);
}.tile.tile-position-3-2 {
-webkit-transform: translate(242px, 121px);
-moz-transform: translate(242px, 121px);
-ms-transform: translate(242px, 121px);
transform: translate(242px, 121px);
}.tile.tile-position-3-3 {
-webkit-transform: translate(242px, 242px);
-moz-transform: translate(242px, 242px);
-ms-transform: translate(242px, 242px);
transform: translate(242px, 242px);
}.tile.tile-position-3-4 {
-webkit-transform: translate(242px, 363px);
-moz-transform: translate(242px, 363px);
-ms-transform: translate(242px, 363px);
transform: translate(242px, 363px);
}.tile.tile-position-4-1 {
-webkit-transform: translate(363px, 0px);
-moz-transform: translate(363px, 0px);
-ms-transform: translate(363px, 0px);
transform: translate(363px, 0px);
}.tile.tile-position-4-2 {
-webkit-transform: translate(363px, 121px);
-moz-transform: translate(363px, 121px);
-ms-transform: translate(363px, 121px);
transform: translate(363px, 121px);
}.tile.tile-position-4-3 {
-webkit-transform: translate(363px, 242px);
-moz-transform: translate(363px, 242px);
-ms-transform: translate(363px, 242px);
transform: translate(363px, 242px);
}.tile.tile-position-4-4 {
-webkit-transform: translate(363px, 363px);
-moz-transform: translate(363px, 363px);
-ms-transform: translate(363px, 363px);
transform: translate(363px, 363px);
}.tile {
position: absolute;
-webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out;
transition: 100ms ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
}.tile .tile-inner {
border-radius: 3px;
background: #eee4da;
text-align: center;
font-weight: bold;
z-index: 10;
font-size: 55px;
}.tile.tile-2 .tile-inner {
background: #eee4da;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
}.tile.tile-4 .tile-inner {
background: #ede0c8;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
}.tile.tile-8 .tile-inner {
color: #f9f6f2;
background: #f2b179;
}.tile.tile-16 .tile-inner {
color: #f9f6f2;
background: #f59563;
}.tile.tile-32 .tile-inner {
color: #f9f6f2;
background: #f67c5f;
}.tile.tile-64 .tile-inner {
color: #f9f6f2;
background: #f65e3b;
}.tile.tile-128 .tile-inner {
color: #f9f6f2;
background: #edcf72;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px;
}@media screen and (max-width:520px) {
.tile.tile-128 .tile-inner {
font-size: 25px;
}}
.tile.tile-256 .tile-inner {
color: #f9f6f2;
background: #edcc61;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
font-size: 45px;
}@media screen and (max-width:520px) {
.tile.tile-256 .tile-inner {
font-size: 25px;
}}
.tile.tile-512 .tile-inner {
color: #f9f6f2;
background: #edc850;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
font-size: 45px;
}@media screen and (max-width:520px) {
.tile.tile-512 .tile-inner {
font-size: 25px;
}}
.tile.tile-1024 .tile-inner {
color: #f9f6f2;
background: #edc53f;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
font-size: 35px;
}@media screen and (max-width:520px) {
.tile.tile-1024 .tile-inner {
font-size: 15px;
}}
.tile.tile-2048 .tile-inner {
color: #f9f6f2;
background: #edc22e;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
font-size: 35px;
}@media screen and (max-width:520px) {
.tile.tile-2048 .tile-inner {
font-size: 15px;
}}
.tile.tile-super .tile-inner {
color: #f9f6f2;
background: #3c3a32;
font-size: 30px;
}@media screen and (max-width:520px) {
.tile.tile-super .tile-inner {
font-size: 10px;
}}
.tile-merged .tile-inner {
z-index: 20;
}.above-game:after {
content: "";
display: block;
clear: both;
}.game-intro {
float: left;
line-height: 42px;
margin-bottom: 0;
}.restart-button {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
display: block;
text-align: center;
float: right;
}.game-explanation {
margin-top: 50px;
}@media screen and (max-width:520px) {
html, body {
font-size: 15px;
}
body {
margin: 20px 0;
padding: 0 20px;
}
.title {
font-size: 27px;
margin-top: 15px;
} /*.container {
width: 280px;
margin: 0 auto;
}*/
.score-container, .best-container {
margin-top: 0;
padding: 15px 10px;
min-width: 40px;
}
.heading {
margin-bottom: 10px;
}
.game-intro {
width: 55%;
display: block;
box-sizing: border-box;
line-height: 1.65;
}
.restart-button {
width: 42%;
padding: 0;
display: block;
box-sizing: border-box;
margin-top: 2px;
}
.game-container {
margin-top: 17px;
position: relative;
padding: 10px;
cursor: default;
-webkit-touch-callout: none;
-ms-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
touch-action: none;
background: #bbada0;
border-radius: 6px;
width: 280px;
height: 280px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.game-container .game-message {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(238, 228, 218, 0.5);
z-index: 100;
text-align: center;
}
.game-container .game-message .over-msg {
display: block;
font-size: 30px;
font-weight: bold;
height: 30px;
line-height: 30px; /*margin-top: 222px;*/
margin-top: 59px;
}
.game-container .game-message .lower {
display: block;
margin-top: 59px;
}
.game-container .game-message .retry-button {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
margin-left: 9px;
}
.game-container .game-message .keep-playing-button {
display: none;
}
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2;
}
.game-container .game-message.game-won .keep-playing-button {
display: inline-block;
}
.game-container .game-message.game-won, .game-container .game-message.game-over {
display: block;
}
.grid-container {
position: absolute;
z-index: 1;
}
.grid-row {
margin-bottom: 10px;
}
.grid-row:last-child {
margin-bottom: 0;
}
.grid-row:after {
content: "";
display: block;
clear: both;
}
.grid-cell {
width: 57.5px;
height: 57.5px;
margin-right: 10px;
float: left;
border-radius: 3px;
background: rgba(238, 228, 218, 0.35);
}
.grid-cell:last-child {
margin-right: 0;
}
.tile, .tile .tile-inner {
width: 58px;
height: 58px;
line-height: 58px;
}
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 67px);
-moz-transform: translate(0px, 67px);
-ms-transform: translate(0px, 67px);
transform: translate(0px, 67px);
}
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 135px);
-moz-transform: translate(0px, 135px);
-ms-transform: translate(0px, 135px);
transform: translate(0px, 135px);
}
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 202px);
-moz-transform: translate(0px, 202px);
-ms-transform: translate(0px, 202px);
transform: translate(0px, 202px);
}
.tile.tile-position-2-1 {
-webkit-transform: translate(67px, 0px);
-moz-transform: translate(67px, 0px);
-ms-transform: translate(67px, 0px);
transform: translate(67px, 0px);
}
.tile.tile-position-2-2 {
-webkit-transform: translate(67px, 67px);
-moz-transform: translate(67px, 67px);
-ms-transform: translate(67px, 67px);
transform: translate(67px, 67px);
}
.tile.tile-position-2-3 {
-webkit-transform: translate(67px, 135px);
-moz-transform: translate(67px, 135px);
-ms-transform: translate(67px, 135px);
transform: translate(67px, 135px);
}
.tile.tile-position-2-4 {
-webkit-transform: translate(67px, 202px);
-moz-transform: translate(67px, 202px);
-ms-transform: translate(67px, 202px);
transform: translate(67px, 202px);
}
.tile.tile-position-3-1 {
-webkit-transform: translate(135px, 0px);
-moz-transform: translate(135px, 0px);
-ms-transform: translate(135px, 0px);
transform: translate(135px, 0px);
}
.tile.tile-position-3-2 {
-webkit-transform: translate(135px, 67px);
-moz-transform: translate(135px, 67px);
-ms-transform: translate(135px, 67px);
transform: translate(135px, 67px);
}
.tile.tile-position-3-3 {
-webkit-transform: translate(135px, 135px);
-moz-transform: translate(135px, 135px);
-ms-transform: translate(135px, 135px);
transform: translate(135px, 135px);
}
.tile.tile-position-3-4 {
-webkit-transform: translate(135px, 202px);
-moz-transform: translate(135px, 202px);
-ms-transform: translate(135px, 202px);
transform: translate(135px, 202px);
}
.tile.tile-position-4-1 {
-webkit-transform: translate(202px, 0px);
-moz-transform: translate(202px, 0px);
-ms-transform: translate(202px, 0px);
transform: translate(202px, 0px);
}
.tile.tile-position-4-2 {
-webkit-transform: translate(202px, 67px);
-moz-transform: translate(202px, 67px);
-ms-transform: translate(202px, 67px);
transform: translate(202px, 67px);
}
.tile.tile-position-4-3 {
-webkit-transform: translate(202px, 135px);
-moz-transform: translate(202px, 135px);
-ms-transform: translate(202px, 135px);
transform: translate(202px, 135px);
}
.tile.tile-position-4-4 {
-webkit-transform: translate(202px, 202px);
-moz-transform: translate(202px, 202px);
-ms-transform: translate(202px, 202px);
transform: translate(202px, 202px);
}
.tile .tile-inner {
font-size: 35px;
}
.game-message p {
font-size: 30px !important;
height: 30px !important;
line-height: 30px !important;
margin-top: 90px !important;
}
.game-message .lower {
margin-top: 30px !important;
}}3. Page logic processing
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
});
},
onShow: function() { // 页面展示 },
onHide: function() { // 页面隐藏 },
onUnload: function() { // 页面关闭 }, // 更新视图数据
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);In addition, citationSome js files of the original Web version of the 2048 game.
Includes
Game management game_manager.js
Grid management grid.js
Local storage management local_storage_manager.js
Tile management tile.js
3. Program renderings
[Related recommendations]
1.WeChat public account Platform source code download
2.Alizi order system source code
The above is the detailed content of 2048 game developed by WeChat. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of sandbox key steps for WeChat payment developmentNext article：Detailed explanation of sandbox key steps for WeChat payment development
Related articles
See more- Detailed explanation and simple usage of WeChat mini program textarea
- PHP WeChat public account development (2) Baidu BAE construction and database use
- php WeChat public account development (3) php implements simple WeChat text communication
- php WeChat public account development (4) php implements custom keyword reply
- PHP version of WeChat store calling api sample code