软件工程第一次作业--2048小游戏修改

2048小游戏

 

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020/
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	完成一个小程序,上传代码,完成一篇博文
作业源代码	https://github.com/maojiangyu/ruanjian
姓名	毛江宇
学号	31801134
院系	浙大城市学院计算机系

 项目描述：本项目由https://github.com/natee/wxapp-2048上的微信小程序改编而成，加入了攻略界面与个人用户界面。

 开发工具：微信开发者工具

 

项目页面展示

  

 

全局配置

JSON文件（app.json）

      {
        "pagePath": "pages/mine/mine",
        "text": "攻略",
        "iconPath": "./assets/book.jpg",
        "selectedIconPath": "./assets/book.jpg"
      },
      {
        "pagePath": "pages/xinxi/xinxi",
        "text": "个人信息",
        "iconPath": "./assets/people.jpg",
        "selectedIconPath": "./assets/people.jpg"
      }

新增页面代码

攻略页面（mine)

wxml文件

<!--pages/mine.wxml-->               
  <view>                        
  <navigator open-type="navigate" wx:for="{{gonglve}}" wx:key="key">
        <text class="change1">{{item.title}}</text>
        <image src="{{item.imgurl}}" ></image>
        <text>地址：{{item.url}}</text>
    </navigator>
  </view>

js文件

// pages/mine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    gonglve:[
      {
        imgurl:"/assets/捕获.PNG",
        title:"玩2048的高分小技巧",
        url:"https://www.bilibili.com/video/BV1nx411y7ZS?from=search&seid=17722150496495118303"
      },
      {
        imgurl:"/assets/1.PNG",
        title:"【2048技巧】如何做到6分钟快速合成2048？",
        url:"https://www.bilibili.com/video/BV1at411g7b5?from=search&seid=17722150496495118303"
      },
      {
        imgurl:"/assets/2.PNG",
        title:"2048入门攻略",
        url:"https://www.bilibili.com/video/BV1bs41167bj?from=search&seid=5294426435676967206"
      },
      {
        imgurl:"/assets/3.PNG",
        title:"手残党的逆袭！2048新手教程",
        url:"https://www.bilibili.com/video/BV1Tx411T7RG?from=search&seid=5294426435676967206"
      },
      
    ]
  },

wxss文件

.change1{
  color: red;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  letter-spacing: normal;
  }

个人页面

wxml文件

<!--pages/xinxi/xinxi.wxml-->
<view class="mine-wrapper">
  <view class="avatar-wrapper">
    <view>
      <view class="avatar">
        <image style="border-radius:50%;" src="{{'/assets/people.jpg'}}"></image>
      </view>
      <view class="text">
        <text wx:if="{{userinfo.nickName}}">{{userinfo.nickName}}</text>
        <text wx:else bindtap="toLogin">注册 / 登录</text>
      </view>
    </view>
  </view>
  <view class="list-wrapper">
    <view class="alllists">
      <block wx:for="{{menuitems}}" wx:key="menu_for">
        <navigator url="{{item.url}}" class="lists">
        <view class='content'>
          <view class="listimg">
            <image src="{{item.icon}}"></image>
          </view>
          <view class="listtext">{{item.text}}</view>
          <view class="listicon">{{item.tips}}</view>
          <view class="arrows">
            <image src="{{item.arrows}}"></image>
          </view>
        </view>
        </navigator>
      </block>
    </view>
  </view>
</view>

js文件

data: {
    menuitems: [
      { text: '个人资料', url: '#', icon: '/assets/ren.jpg', tips: '', arrows: '/images/user/arrows.png' },
      { text: '邀请好友', url: '#', icon: '/assets/yaoqing.jpg', tips: '', arrows: '/images/user/arrows.png' },
    ]
  },

wxss文件

/* pages/xinxi/xinxi.wxss */
.avatar-wrapper {
  background: #1b82d1;
  padding: 25px 0;
}
 
.avatar-wrapper .avatar {
  margin: 0 auto;
  text-align: center;
}
 
.avatar-wrapper .avatar image {
  width: 100px;
  height: 100px;
}
 
.avatar-wrapper .text {
  text-align: center;
  color: #fff;
}
 
.listimg image {
  margin-right: 5px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
 
.content{
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}
 
/*分割线样式*/
.divLine{
 background: #E0E3DA;
 width: 100%;
 height: 5rpx;
}
 
.arrows image {
  vertical-align: middle;
  width: 15px;
  height: 15px;
  margin-left: 500rpx;
}

收获总结

尝试从来没有使用过的语言来第一次修改在他人代码基础上的小程序，虽然不断搜索学习的过程是痛苦，但是看到自己亲手制作页面的时候，内心的满足感油然而生。通过本次小程序的制作让我真切的体会到程序开发的困难和复杂程度，今后的学习之路还很艰辛，我应不断的激励自己学习，从而完善自己所制作的小程序。