小游戏
持续更新中...
(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)
});
})()