标签:游戏 javascript game 网页游戏 2048
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:
#grid-container { width : 460px; height : 460px; padding : 20px; margin : 50px auto ; background-color : #bbada0; border-radius : 10px; position : relative; }
.grid-cell { width : 100px; height : 100px; border-radius : 6px; background-color : #ccc0b3; position : absolute; }
网页版《2048游戏》教程 - 构建页面,布布扣,bubuko.com
标签:游戏 javascript game 网页游戏 2048
原文地址:http://blog.csdn.net/longestory/article/details/37562067