本文目的是短时间之内，通过做出一个简单的缘分对对碰游戏，了解网页的基本要素。之前没有接触过网页开发，这次算是个入门了。

对于大部分网页，都要包括HTML、CSS、JavaScript三种技术。而相对应的三种文件格式为.html、.css、.js。下面首先给出这个游戏的代码，在分析中学习。我认为了解整体框架之后，学习过程中对于自己不懂的部分百度一下，可以学习的更快，因此我不会做的过于详细。对最新标准支持比较好的是Chrome和Firefox浏览器，推荐使用这两个浏览器进行调试。

游戏说明

这是一个非常简单的游戏。用户输入两个名字，点击测一测，就可以看到缘分指数。整个游戏总共有三个文件，即上文提到的三个。

HTML部分

HTML即超文本标记语言负责呈现给用户的界面，通过各种标记来定义网页的目录和内容。最新的标准为HTML5，新标准下面的游戏开发是最近比较火的一个方向。

下面是相应的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>缘分对对碰</title><link rel="stylesheet"type="text/css"href="wordStory.css"/><script type="text/javascript"src="wordStory.js"></script>
</head>
<body><h1>缘分对对碰</h1><h2>输入你和ta的名字，测出你们的缘分指数！</h2><p><form><fieldset><label for="boyName">男方姓名</label><input type="text" id="boyName"/><label for="girlName">女方姓名</label><input type="text" id="girlName"/><button type="button"οnclick="tellStory()">测一测</button></fieldset></form><div id="output"></div></p>
</body>
</html>

在<>中的称为tag，通常首尾tag中的内容称为一个container，单个tag一般为element。tag中可以定义参数，如type等等。

html tag包含html代码，包括head和body两部分。

而head中title定义了浏览器中显示的标签名称，link tag给出了一个到css文件的链接，script给出了使用的JavaScript文件，如果不想使用外部的css和js文件，可以在head部分直接贴代码。

在body部分，h1给出了大标题，h2、h3等等可以定义小一级的标题。form和fieldset tag内部是一个表格。lable和input分别定义了标签和输入文本框。button定义了一个按钮，onclick参数设定了点击按钮时候要运行的代码。

div tag给出了一个可以使用JS实时改变的html内容，具体如何改变下面会提到。

CSS部分

CSS又称为风格样式表，定义了网页呈现的风格和样式，如字体大小、颜色、边距等等。

CSS文件代码：

body{background-color: rgb(228,255,255);
}
h1{text-align: center;
}
h2{text-align: center;color: rgb(20,180,30);
}
fieldset{width: 600px;text-align: center;margin: auto;
}
label{float: left;text-align: right;padding-right: 1em;clear: left;width: 300px;
}
input{float: left;
}
button{display: block;clear: both;margin: auto;
}
#output{text-align: center;font-size: 36px;color: rgb(120,30,250);
}

可以看到，代码是分块构成的，每个块定义对应的tag的样式。最后一个#output之前加#可以把一个div通过id变成一个可以操作的container。

大多数参数都能从名字看出含义，这也是网页开发中的一个要点。因为网页代码通常数量多，良好的命名方式可以加快开发速度。

不过，有几个参数略微复杂。padding定义了tag内部的边缘空白，而margin定义了外部的边缘空白。float使tag中内容向某个方向靠，clear则是使某个方向上开始的元素就是这个tag，即不会在左边还有元素。比如label就使得每个label停靠在容器最左边。clear：both则使得这个元素单独成一行。

JavaScript部分

JS历史悠久，生命力非常强大。在客户端Angular等各种各样的库，甚至可以在浏览器里模拟linux系统（jslinux），也可以运行大型游戏（doom和epic citadel）。而在服务器端，node.js在chrome浏览器v8引擎基础上作为server，性能远超php。可以说，JS is the future。当然这是一句玩笑话。

在这个游戏HTML文件中看到，按键被点击时会调用tellStory函数，这个函数是在JavaScript文件中定义的。

下面给出代码：

function tellStory() {var textBoyName=document.getElementById("boyName");var boyName=textBoyName.value;var textGirlName=document.getElementById("girlName");var girlName=textGirlName.value;var output=document.getElementById("output");var point=Math.ceil(10*(Math.random()+9));story=boyName+" 和 "+girlName+" 此时此刻的缘分指数为 "+point;output.innerHTML=story;
}//end tellStory

这段代码仅仅定义了一个函数。函数中getElementById可以根据id得到相应的元素，取其value值就是用户输入的文本。使用random函数随即生成一个分数，就可以输出了（额，如何生成分数可以更sophisticate一些）。当然，这个输出是输出到output对应的div元素中的。

进一步的学习

将css和js代码分别存储为文件，使用浏览器打开html文件，这个游戏就可以运行了。

这是一个非常简单的游戏，对于初学者，可以跟着Wiley.HTML5.Game.Development.for.Dummies.2013这本书学习。

空谈误国，实干兴邦。如果一直只是看代码，看书，是很难精通网页开发的。最好自己实现一些功能模块，可以参照现有的大网站的网页，学习过程中W3C School的参考手册很方便。

三十分钟做一个网页游戏相关推荐

三十分钟完成一个“我们是谁”编辑器 - 20170819前端开发日报
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下今天的日报摘要吧~ 三十分钟完成一个"我们是谁"编辑器这两天朋友圈又被刷屏了,这次是"我们是谁 ...
用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在上一篇博客中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...
python手机版做小游戏代码大全-Python大牛手把手教你做一个小游戏，萌新福利！...
原标题:Python大牛手把手教你做一个小游戏,萌新福利! 引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规 ...
scratch做简单跑酷游戏_腾讯游戏学院专家：做一个多线程游戏框架可以多简单？...
导语如何做一个多线程游戏框架?腾讯游戏学院专家Tao将在本文通过一个demo来说说游戏逻辑的多线程化. 众所周知现在各种游戏终端的发展十分迅猛.其中一个共同的特征是"多核化",由 ...
做一个FLASH游戏你需要掌握的东西【实用】
做一个FLASH游戏你需要掌握的东西作者:jianzhong 一直想着什么时间好好做一个像样点的游戏,于是刻意的开始去了解FLASHGAME的相关资料,在这里把自己在整个制作和收集过程中的一些感觉使 ...
html送女朋友的网页,做一个网页送给心动女孩子生日礼物(表白也合适)
如何做一个网页送给女朋友做生日礼物本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架做的一个小型网站,里面可以实现跳转功能,怎么配置fla ...
怎么做成html网页,html网页制作的基本步骤？怎么用html做一个网页？
html网页制作的基本步骤?怎么用html做一个网页?让我们试着制作一个简单的网页.希望你能跟着我们.只需要一分钟.现在你可能不知道尖括号"<>"和里面的字母是什么.别 ...
如何做一个网页送给女朋友做生日礼物
如何做一个网页送给女朋友做生日礼物本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架做的一个小型网站,里面可以实现跳转功能,怎么配置fla ...
单枪匹马：4年只做一个iOS游戏收入破千万美元
2011 年,一款叫做<Tiny Wings>的手游被苹果推荐为最佳 iPhone 游戏,对手游市场有所了解的同学一定会赞同<Tiny Wings>是过去几年中全球知名度仅次于 ...

三十分钟做一个网页游戏