提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

三十分钟做一个网页游戏

文件 代码
2023-02-26 10:21:35 时间

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

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

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

游戏说明

三十分钟做一个网页游戏

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

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

<html lang="en"> <head>     <meta charset="UTF-8">     <title>缘分对对碰</title>     <link rel="stylesheet"           type="text/css"           href="wordStory.css"/>     <script type="text/javascript"     src="http://9i0i.com/pic.php?p=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文件代码：

    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文件中定义的。
下面给出代码：

    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这本书学习。
空谈误国，实干兴邦。如果一直只是看代码，看书，是很难精通网页开发的。最好自己实现一些功能模块，可以参照现有的网站的网页https://www.fgba.net/，w3school在学习过程中的参考手册很方便。

三十分钟做一个网页游戏

本站部分内容转载自网络，版权属于原作者所有，如有异议请联系QQ153890879修改或删除，谢谢！
转载请注明原文链接：三十分钟做一个网页游戏

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏
[[email protected]]
分享 (0)

相关文章