网页版《2048游戏》教程 - 构建页面
浏览数：31 /
时间：2015年06月09日
1. 游戏标题
《2048》游戏的标题包含游戏名称、开始新游戏的按钮和游戏分数等三项内容。
创建游戏页面index.html：
<!DOCTYPE html> <html > <head > < meta charset= "UTF-8"> < title>2048</title > < link rel= "stylesheet" type ="text/css" href= "2048.css"> </head > <body > < header> < h1> 2048</ h1> < a href= "javascript:newgame();" id= "newgamebutton">New Game</a > < p> score: < span id= "score">0</span ></p> </ header> </body > </html >
创建样式文件2048.css：
- 设置游戏标题样式
header {
display : block;
margin : 0 auto ;
width : 100%;
text-align : center;
}
- 设置游戏名称样式
header h1 {
font-family : Arial;
font-size : 40px;
font-weight : bold;
}
- 设置游戏按钮样式
header #newgamebutton {
display : block;
margin : 20px auto ;
width : 100px;
padding : 10px 10px ;
background-color : #8f7a66;
font-family : Arial;
color : white;
border-radius : 10px;
text-decoration : none;
}
- 设置游戏按钮鼠标悬浮样式
header #newgamebutton:hover {
background-color : #9f8b77;
}
- 设置游戏分数样式
header p {
font-family : Arial;
font-size : 25px;
margin : 20px auto ;
}
2. 游戏主体
《2048》游戏的主体包含16个方块。
编辑游戏页面index.html：
<div id ="grid-container"> < div class= "grid-cell" id ="grid-cell-0-0"></ div> < div class= "grid-cell" id ="grid-cell-0-1"></ div> < div class= "grid-cell" id ="grid-cell-0-2"></ div> < div class= "grid-cell" id ="grid-cell-0-3"></ div> < div class= "grid-cell" id ="grid-cell-1-0"></ div> < div class= "grid-cell" id ="grid-cell-1-1"></ div> < div class= "grid-cell" id ="grid-cell-1-2"></ div> < div class= "grid-cell" id ="grid-cell-1-3"></ div> < div class= "grid-cell" id ="grid-cell-2-0"></ div> < div class= "grid-cell" id ="grid-cell-2-1"></ div> < div class= "grid-cell" id ="grid-cell-2-2"></ div> < div class= "grid-cell" id ="grid-cell-2-3"></ div> < div class= "grid-cell" id ="grid-cell-3-0"></ div> < div class= "grid-cell" id ="grid-cell-3-1"></ div> < div class= "grid-cell" id ="grid-cell-3-2"></ div> < div class= "grid-cell" id ="grid-cell-3-3"></ div> </div >
编辑样式文件2048.css：
- 设置16个方块的主体方块样式
#grid-container {
width : 460px;
height : 460px;
padding : 20px;
margin : 50px auto ;
background-color : #bbada0;
border-radius : 10px;
position : relative;
}
- 设置16个方块的样式
.grid-cell {
width : 100px;
height : 100px;
border-radius : 6px;
background-color : #ccc0b3;
position : absolute;
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
