码迷,mamicode.com
首页 > Web开发 > 详细

网页版《2048游戏》教程 - 构建页面

时间:2014-07-09 11:25:41      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:游戏   javascript   game   网页游戏   2048   

1.     游戏标题
《2048》游戏的标题包含游戏名称、开始新游戏的按钮和游戏分数等三项内容。

bubuko.com,布布扣

创建游戏页面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个方块。

bubuko.com,布布扣

编辑游戏页面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;
}

网页版《2048游戏》教程 - 构建页面,布布扣,bubuko.com

网页版《2048游戏》教程 - 构建页面

标签:游戏   javascript   game   网页游戏   2048   

原文地址:http://blog.csdn.net/longestory/article/details/37562067

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!