三十分钟做一个网页游戏

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

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

  游戏说明

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

  HTML部分

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

  下面是相应的代码：

    
    
    
    


    
缘分对对碰
    
输入你和ta的名字，测出你们的缘分指数！
    

        

            

                男方姓名
                
                女方姓名
                
                
                    测一测
                
            
        
        

            
        
    
    

  在<>中的称为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的参考手册很方便。