网页版《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:

  • 设置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

时间: 07-08

网页版《2048游戏》教程 - 构建页面的相关文章

一个用 C 语言写的迷你版 2048 游戏,只有 500个字符

Jay Chan 用 C 语言写的一个迷你版 2048 游戏,只有 487 个字符.来围观吧 M[16],X=16,W,k;main(){T(system("stty cbreak") );puts(W&1?"WIN":"LOSE");}K[]={2,3,1};s(f,d,i ,j,l,P){for(i=4;i--;)for(j=k=l=0;k<4;)j<4?P=M [w(d,i,j++)],W|=P>>11,l*

CSS+js打造的网页版俄罗斯方块游戏

<HTML> <SCRIPT> parent.moveTo((screen.width-775)/2,(screen.height-540)/2); parent.resizeTo(775,540) </SCRIPT> <HEAD> <META NAME="Title" CONTENT="JScript Simple Tetris"> <TITLE>CSS+js打造的网页版俄罗斯方块游戏丨石家庄

Web版2048游戏制作

写在前面 工作之余参与了<慕课网2048游戏制作>的学习视频,视频断断续续看完了,游戏也制作成功了.因为其他的事情也没来的及总结,一拖时间也就过去了,整理磁盘的时候发现了2048源码,思考一下还是将之push到github上了(后面贴出),也顺便写篇总结,回顾一下,同时也谢谢liuyubobobo老师的授课. 不过源码在手,不运行下玩玩,怎么说的过去呢,哈哈!下面是游戏截图. 大图是PC端运行的效果,小图则是在iphone5s上的运行效果(Chrome浏览器debug,具体如何做参考文章:ht

Cocos2d-x 3.x版2048游戏开发

今天给大家介绍如何快速开发2048这样一款休闲游戏,理解整个2048游戏的开发流程,从中你将可以学习到以下内容: 2048游戏的逻辑 Cocos2d-x中上下左右手势的识别 游戏中卡片类的创建 添加卡片到游戏中 游戏中的逻辑实现 游戏中随机卡片的生成 游戏结束判断 游戏分数的添加 游戏美化 笔者的开发环境:    Cocos2d-x 3.1.1(开发引擎)    Visual Studio 2012(Win32)    Xcode 5.1(Mac系统下) 这里注明一下,本教程来自极客学院,小巫对

Js 网页版扫雷游戏代码实现

这个游戏是自己在大约一年前联系js熟练度时做的,用的都是基础的东西,最近比较忙没时间整理.直接发给大家,有兴趣的可以看一下.欢迎大家提出建议.如果你有什么新的想法也可以提出来,或者你并不擅长编程.你想做什么东西可以告诉我.我尽量帮你实现.不要在意标点符号什么的,,哈哈 废话不说了上代码: <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>zwcai

python版2048游戏

闲来无聊,电脑上的游戏也被删了,自己动手写了个2048,目前只是实现了基本的游戏功能,代码还比较弱: 百度盘:http://pan.baidu.com/s/1eQpJbgQ gui代码如下: #!/usr/bin/python # -*- coding: utf-8 -*- #导入tkinter import Tkinter import game2048_Class import sys def refreshGui(): n = len(game.nlist) for i in range(

GameMaker Studio 2—制作横版射击游戏教程-HeartBeast 短期小结2

这期视频主要讲了枪和子弹的实现. 枪的绘制 /// @description Draw the gun var dir = point_direction(x, y, mouse_x, mouse_y); var flipped = (mouse_x > x) * 2 -1; //draw the player draw_sprite_ext(s_player, 0, x, y, 1, 1, 0, image_blend, image_alpha); //draw the gun draw_sp

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

游戏——网页版别踩白块

一 项目简介 主要知识点:JavaScript.HTML.CSS这是一个主要用JS实现的网页版小游戏,游戏规则很简单,通过点击不断下落的黑块来消灭它并获取分数,如果不幸黑块掉落下来或点到了白色区域那么游戏就会终止.游戏截图如下: 二 游戏框架 整个游戏可分为以下几个步骤实现:1. HTML和CSS画出静态的游戏框架:2. DOM结构说明:游戏元素使用嵌套的div元素来实现,是一个4*4的方格地图:最外层容器main(一个) > 次外层容器container(一个) > 行容器row(四行) &