javascript小游戏_javaScript小游戏——网页版别踩白块
一 项目简介
主要知识点：JavaScript、HTML、CSS
这是一个主要用JS实现的网页版小游戏，游戏规则很简单，通过点击不断下落的黑块来消灭它并获取分数，如果不幸黑块掉落下来或点到了白色区域那么游戏就会终止。
游戏截图如下：
二 游戏框架
整个游戏可分为以下几个步骤实现：
1. HTML和CSS画出静态的游戏框架；
2. DOM结构说明：
游戏元素使用嵌套的div元素来实现，是一个4*4的方格地图：最外层容器main(一个) > 次外层容器container(一个) > 行容器row(四行) > 方块cell(每行4块)
3. JS逻辑：
1)图形的绘制：用js来动态创建div元素，并逐级添加到上层节点当中；
2)实现下落：通过动态增加包裹所有方块的container容器的top的值来实现下落效果；
3)持续下落：动态在最上层创建一行方块，同时删除最下层一行方块；隔一段时间调用一次；
4)用户交互：用户通过点击事件，绑定到整个动画中，通过改变属性名来使黑块转变为白块，实现视觉上的“消灭黑块”；
5)加分规则：用户成功点击黑块，则调用一次加分函数，并将分数实时写入页面中；
6)犯规处理：A. 通过判断方块元素属性名来判断用户是否点击白块从而终止游戏；B. 通过判断最后下落的一行是否含有黑块从而判断是否应该终止游戏；
7)游戏加成：当分数达到某个阶段可通过增加下落的像素值的大小来加快下落速度从而增加游戏难度，增加趣味性；
8)结束游戏：犯规后，清除调用函数，来终止游戏运行。
三 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>别踩白块</title>
<style>
#main{ /*游戏背景板的样式*/
width:400px;
height:400px;
background:white;
border:1px solid green;
margin:0 auto;
position:relative; /*position 属性规定元素的定位类型。relative：生成相对定位的元素，相对于其正常位置进行定位。*/
overflow:hidden;
} /*overflow属性规定当内容溢出元素框时发生的事情。hidden:：内容会被修剪，并且其余内容是不可见的。*/
#container{ /*下落方块所在的容器样式*/
width:100%;
height:400px;
position:relative;
top:-100px; /*黑块最开始不能出现在最下面，否则游戏直接结束，因此容器整体上移100px*/
}
.row{ /*一行容器的样式*/
height:100px;
width:100%;
}
.cell{ /*单个方块的样式*/
height:100px;
width:100px;
float:left; /*float 属性定义元素在哪个方向浮动*/
}
.black{ /*黑块的样式*/
background:black;
}
h1{
text-align:center;
}
p{
display:inline-block; /*display 属性规定元素应该生成的框的类型，inline-block为行内块元素。*/
}
</style>
</head>
<body>
<h1>Score: <p id="score">0</p></h1>
<div id="main">
<div id="container"></div>
</div>
<script>
var clock=null; //定时器操作句柄
var state=0; //定义游戏当前状态：0初始化，1进行中，2暂停，3失败
var speed=2; //方块下落的速度，初始值为2像素
//初始化
function init(){
for(var i=0; i<4; i++){ //创建4行row
crow();
}
$('main').οnclick=function(ev){ //向main添加点击事件
judge(ev); //调用判断函数来判断用户的点击行为是否合规，参数为事件对象
}
}
//start()启动
function start(){
clock=window.setInterval('move()',30); //每30毫秒调用一次移动函数
//下落动画
function move(){
var con=$('container'); //通过自定义函数$()找到container
var top=parseInt(window.getComputedStyle(con,null)['top']); //window.getComputedStyle(element, [pseudoElt]);方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。element用于获取计算样式的Element,pseudoElt(可选)指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。CSSStyleDeclaration 表示一个CSS属性键值对的集合。此处初始值为-100
if(speed + top >0){ //当最上面一行row走过头了，无法与main上边缘重合时
top=0; //直接将row的坐标置为0
}else{
top += speed;//调节每次下降的像素，必须是100的约数，这样才能移动若干次后刚好为100px，因为一个方块为100px*100px，刚好能够与main上下两边重合
}
con.style.top=top + 'px';
if(top==0){ //当最上面一行row刚好落进main内
crow(); //调用函数在最上方插入一行row
con.style.top='-100px'; //并使其位于main上面隐藏的部分
drow(); //当上下中间共有6行row时调用函数，删除最下面一行row，避免游戏过程中堆积太多元素，给浏览器增加负担
}else if(top==(-100+speed)){ //一轮刚好进行第一次下落，此时最下面一行row刚好准备和main的下边缘触碰
var rows=con.children; //ParentNode.children 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。
if((rows.length==5) && (rows[rows.length-1].pass !==1)){ //如果此时有5行row，并且最后一行未成功点击黑块
fail(); //游戏失败
}
}
}
//加速
function speedup(){
speed +=2;
if(speed==20){
alert('Excellent!');
}
}
//游戏失败
function fail(){
clearInterval(clock); //clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
state=3; //另游戏状态等于3，最开始定义的3为失败
alert('Game Over!');
}
//计分
function score(){
var newscore=parseInt($('score').innerHTML)+1; //获取score的innerHTML值并转化为整数，再加一分
$('score').innerHTML=newscore; //增加后的分数写入score
if(newscore % 10 == 0){ //分数每增加10分
speedup(); //游戏加速
}
}
//判断玩家点击事件是否需合规
function judge(ev){
if(state==3){ //上文设定游戏失败时state为3，此处判断游戏是否已经结束
return;
}
if(ev.target.className.indexOf('black')==-1){ //如果点击的元素的属性名不含black，也就是点中了白块
fail();
}else{
ev.target.className='cell'; //否则点中了黑块，重写属性名，将其改为白块
ev.target.parentNode.pass=1;//用js获取DOM节点对象后，可以增加一个自定义属性，这里的pass是自定义的，也就是说：当点中黑块的时候，黑块所在的row的pass属性值是1
score(); //加分
}
}
//创建行row
function crow(){
var con=$('container');
var row=cdiv('row'); //创建属性名为row的div
var classes=createSn(); //一个row下面的属性的数组
for(var i=0; i<4; i++){
row.appendChild(cdiv(classes[i])); //创建4个div添加给row，4个div的属性名中随机产生一个cell black，得到一个含有随机位置黑块的row
}
if(con.firstChild==null){ //如果con没有子元素
con.appendChild(row); //那就添加row
}else{
con.insertBefore(row,con.firstChild); //否则将这个row插入到子元素前面
}
}
//删除最后一行
function drow(){
var con=$('container');
if(con.childNodes.length==6){
con.removeChild(con.lastChild); //当有6行row时删除最后一行
}
}
//创建一个div，className是其类名
function cdiv(className){
var div=document.createElement('div');
div.className=className;
return div;
}
//返回一个数组，随机其中一个单元，值为'cell black'，其余皆为'cell'
function createSn(){
var arr=['cell','cell','cell','cell'];
var i=Math.floor(Math.random()*4); //Math.random()随机产生范围为[0,1)之间的小数，Math.floor()向下取整，此处为0,1,2,3,
arr[i]='cell black';
return arr;
}
//按照id获取对象，取代反复用到的document.getElementById()
function $(id){
return document.getElementById(id);
}
init();
start();
</script>
</body>
</html>
四 知识点整理
1. CSS：
-position:relative：position 属性规定元素的定位类型。relative：生成相对定位的元素，相对于其正常位置进行定位。
-overflow:hidden：overflow属性规定当内容溢出元素框时发生的事情。hidden:：内容会被修剪，并且其余内容是不可见的。
-float:left：float属性定义元素在哪个方向浮动。
-display:inline-block：display属性规定元素应该生成的框的类型，inline-block为行内块元素。
2. JS：
-window.setInterval('move()',30);setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
-parseInt(window.getComputedStyle(con,null)['top'])：window.getComputedStyle(element, [pseudoElt])方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。element用于获取计算样式的Element,pseudoElt(可选)指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。返回的样式是一个实时的 CSSStyleDeclaration对象，当元素的样式更改时，它会自动更新本身。CSSStyleDeclaration表示一个CSS属性键值对的集合。
-con.children：ParentNode.children 是一个只读属性，返回 一个Node的子elements，是一个动态更新的 HTMLCollection。
-ev.target.parentNode.pass=1：用js获取DOM节点对象后，可以增加一个自定义属性，这里的pass是自定义的，也就是说：当点中黑块的时候，黑块所在的row的pass属性值是1。
-Math.random()：随机产生范围为[0,1)之间的小数。
-Math.floor()：向下取整。
五 相关资源
刚开始是在实验楼找的项目，看完之后有的地方不是很明白，百度的时候发现网易云课堂刚好有现成的课，就跟着老师看完敲了一边，收获还是蛮大的，毕竟之前学习方式基本是“光看不练”，这算是第一个完整敲完整理完的项目。
其实这个游戏还有很大的优化空间，比如实验楼提出的那几个问题都挺有价值的，之后如果有空了会尝试一下吧：）
1. 给这个游戏增加开始/暂停按钮；
2. 用JQuery重写一遍；
3. 最佳分数记录（可能需要用到H5新增的web存储）
最后贴一下链接：
实验楼：https://www.shiyanlou.com/courses/306
网易云课堂：http://study.163.com/course/courseMain.htm?courseId=652005
javascript小游戏_javaScript小游戏——网页版别踩白块相关推荐
- CSS和js和HTML一起做出网页版别踩白块游戏
CSS和js和HTML一起做出网页版别踩白块游戏 文章目录 CSS和js和HTML一起做出网页版别踩白块游戏 下面我们要用到的知识点: 页面布局 添加样式 游戏初始化 让黑块动起来 点击黑块事件 js ...
- 网页版“别踩白块”实战笔记
网页版"别踩白块"项目 笔记 js重点代码详解 所有完整代码如下: index.html index.css index.js 事件对象解释 参考链接 js重点代码详解 //全局变 ...
- 网页版别踩白块游戏（实践HTML/CSS/JS）
HTML部分 别踩白块 score 0 开始游戏 CSS部分 #main { width: 408px; height: 408px; background: white; border: 2px s ...
- 网页版别踩白块（JavaScript）
文章目录 实验原理: 实验步骤: 1.页面布局 2.添加样式 3.游戏初始化 4.让黑块动起来 5.点击黑块事件 6.js完整代码 别踩白块这个游戏相信很多人都在手机上玩过,今天来做一个网页版的,主要 ...
- 再来一个小游戏——原生js逐句解释开发简易版别踩白块，附源码
芜湖!没想到上个做扫雷的阅读量这么高(激动) 先捞一下:做个小项目~纯原生JS手把手逐句解释写一个扫雷小游戏(附源码) 快看↑ 这次就做一个别踩白块吧哈哈哈哈哈 最终版演示地址:钢琴块 源码在最后!最 ...
- 解决闲人的简单JS别踩白块（简易版）小游戏啦!
别踩白块这个游戏相信很多人都在手机上玩过,今天我们就来做一个网页版的. 制作要点: HTML/CSS JavaScript 元素节点增删 属性节点操作 编程原理 在开始编程之前,让我们先来分析下整个游 ...
- jQuery实现别踩白块小游戏(简易版)
别踩白块分享 这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...
- 制作别踩白块网页小游戏
介绍 属于简化版别踩白块,代码相对较为简单易学,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作. 页面布局 可以用 div+css 布局来实现别踩白块的静态效果 ...
- html5合影拍照小游戏,html5实现简单别踩白块小游戏
属于简化版别踩白块,代码相对较为简单易学,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作. HTML/CSSJavaScript元素节点增删属性节点操作 在开始 ...
最新文章
- python数据结构与算法：单向循环列表
- vue使用命令行构建完项目后_vue-cli 构建项目在IE中无法运行解决方式(build之后可运行)...
- linux c 文件描述符 得到 文件名
- python【Pandas科学计算库】连女朋友都会用的Pandas（真の能看懂~！）
- 内存首地址为1000h_C++虚继承，菱形继承，内存分布
- 16位汇编 Hook int 0实例
- 圣地亚哥的计算机科学在哪个学院,加州大学圣地亚哥分校计算机科学在哪个学院？...
- 多家大厂接连停产，半导体“最后一里路”面临“瘫痪”？
- Win8环境下 IIS6部署MVC网站出现的无法显示此网页错误
- 小米 11 不送充电器；苹果已修复 iCloud 登录激活问题；Ruby 3.0.0 发布|极客头条...
- html5的修改滚动条滑块样式,修改element-ui滚动条样式
- 配置druid的过程以及问题
- 一个问题，两人讨论，几行代码，一些启发_刘未鹏
- h3c交换机服务器无响应,华为（H3C）交换机版本升级遇到的问题总结
- 水晶报表繁体转简体心得：之一 RPT文件篇
- 《神奇的数学》读后感_数学王国_奇妙的数学王国读后感10篇
- Windows Vista for Developers——第三部分：桌面窗口管理器
- 计算机奇数页打印怎么设置,EXCEL怎么设置奇数页打印和偶数页打印
- 室内监控与室外监控有什么区别 如何选择合适的监控摄像机
- Linux 密码 shadow