js游戏-首页优化

小游戏

demo

持续更新中...

（2019/8/30）新增扫雷小游戏

 

---

布局优化

1.采用网格+响应式可根据设备尺寸调整每行元素个数

2.用圆角属性来对new,hot,活动显示

3.增加信息多行省略

交互优化

1.增加交互性，可自动生成游戏

代码解析：

内容超出显示省略号

单行：

.game-info {
  overflow: hidden;
  text-overflow: ellipsis;
  
  white-space: nowrap;
}

多行：

.game-info {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;/* 这里来定义几行 */
  -webkit-box-orient: vertical;
  
  word-wrap:break-word;
  word-break:break-all;
}

创建元素：

采用立即执行函数减少变量污染

(function showGames() {
  let Games = document.querySelector('.games')
  games.forEach(element => {
    if (element.photo =='' | element.photo == undefined) {
      element.photo = 'default.png'
    }
    div = document.createElement('div')
    div.className = 'game'
    state = document.createElement('p')
    state.className = 'game-state ' + element.state + ' '
    state.textContent = states[element.state]
    img = document.createElement('img')
    img.className = 'game-photo'
    img.src = 'images/' + element.photo
    title = document.createElement('p')
    title.className = 'game-name'
    title.textContent = element.name
    info = document.createElement('p')
    info.className = 'game-info'
    info.textContent = info.title = element.info
    div.appendChild(state)
    div.appendChild(img)
    div.appendChild(title)
    div.appendChild(info)
    Games.appendChild(div)
  });
})()