【超详细】JS原生——别踩白块游戏

本次做的小例子是用原生js写的一个小游戏——别踩白块，js中的注释都给详细写出来了步骤，可以互相学习，有兴趣的话可以跟着步骤一起写一遍！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="demo.css">
</head>
<body><div class="wrapper"><div id="go"><a href="javaScript:void(0)" id="go">Game Start</a></div><div id="main"></div></div><script src="jquery.js"></script><script src="index.js"></script>
</body>
</html>

*{margin:0;padding:0;
}
.wrapper{margin:150px auto;width:400px;height:600px;border:1px solid #222;position: relative;overflow: hidden;
}
#go{width:100%;position: absolute;top:0;text-align: center;z-index:99;
}#go a{display:block;height:100px;width:400px;color:cyan;background-color: #fff;text-decoration: none;border-bottom:3px dashed #eee;font-size:60px;font-weight:300;
}
#main{width:400px;height:600px;position: relative;top:-150px;/* border:1px solid black; */
}
.row{width:400px;height:150px;
}
.row div{width:99px;height:149px;border-left:1px solid #222;border-bottom:1px solid #222;float: left;cursor: pointer;
}

// 获取dom元素
var main = document.getElementById('main');
var go = document.getElementById('go');
// 设置初始变量
var speed = 5, num = 0, timer, flag = true;
// 设置存放颜色的数组
var colors = ['red', 'green', 'black', 'blue'];// 创建每一行div元素
function cDiv() {var oDiv = document.createElement('div');// 获取一个随机数将每一行找到一个随机div 设置上颜色var index = Math.floor(Math.random() * 4);// 设置行class类名oDiv.setAttribute('class', 'row');// for循环生成一行四个divfor (var j = 0; j < 4; j++) {var iDiv = document.createElement('div');// 将每一个小div插入每一行中oDiv.appendChild(iDiv);}// 根据父级中是否有子元素   插入新生成的行if (main.childNodes.length == 0) {// 如果父级为空  直接插入main.appendChild(oDiv);} else {// 如果父级有元素   将新生成的一行插入到已有行数的最前面main.insertBefore(oDiv, main.childNodes[0]);}// 根据随机数 设置一行中有颜色的divvar clickDiv = main.childNodes[0].childNodes[index];// 将此元素设置class类名  作为需要点击的标记clickDiv.setAttribute('class', 'i');// 同时设置上背景颜色clickDiv.style.backgroundColor = colors[index];
}// 移动
function move() {clearInterval(timer);// 设置定时器timer = setInterval(function () {// 利用top值移动main区域var step = parseInt(main.offsetTop) + speed;main.style.top = step + 'px';// 如果main区域移动到可视区域 创建一行新的元素if (parseInt(main.offsetTop) >= 0) {cDiv();// 同时将main区域移动到可视区域上方main.style.top = '-150px';}// 获得mian区域内的行数var len = main.childNodes.length;// 如果main区域内行数为6   即显示区域四行  上面新生成一行  下面一行if (len == 6) {// 遍历最后一行的每一个divfor (var i = 0; i < 4; i++) {// 如果其中有一个包含没有被点击的   游戏结束if (main.childNodes[len - 1].children[i].classList.contains('i')) {alert('游戏结束，得分：' + num);clearInterval(timer);// 游戏结束后不可以继续点击flag = false;}}// 将展示过后的每一行移除main.removeChild(main.childNodes[len - 1]);}}, 20)// 点击事件bindEvent();
}function bindEvent() {// 给main添加点击事件main.addEventListener('click', function (event) {// 根据flag值判断是否可以点击if (flag) {// 获得到点击的源事件var tar = event.target;// 判断点击的块是否为有颜色的if (tar.className == 'i') {// 改变背景颜色tar.style.backgroundColor = '#bbb';// 移除class类名tar.classList.remove('i');// 计数++num++;} else {// 如果点到了白色的块   游戏结束alert('游戏结束，得分：' + num);clearInterval(timer);flag = false;}// 如果当前分数为10的倍数   速度++if (num % 10 == 0) {speed++;}}})
}// 开始按钮点击   开始移动 创建每一行元素
function clickStart() {go.addEventListener('click', function () {go.style.display = 'none';move();});
}
clickStart();

【超详细】JS原生——别踩白块游戏相关推荐

原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
别踩白块html源码,原生JS实现别踩白块小游戏（七）
在前面的文章<原生JS实现别踩白块小游戏(六)>中,为大家介绍了实现别踩白块小游戏的js代码中移动效果的方法概述. 下面我们就继续结合源代码中js代码部分,为大家介绍具体的实现方法. 相关 ...
CSS和js和HTML一起做出网页版别踩白块游戏
CSS和js和HTML一起做出网页版别踩白块游戏文章目录 CSS和js和HTML一起做出网页版别踩白块游戏下面我们要用到的知识点: 页面布局添加样式游戏初始化让黑块动起来点击黑块事件 js ...
JS 实现别踩白块功能
使用JS实现别踩白块功能.自己尚未完成.后序会继续完成的.该项目地址http://study.163.com/course/courseMain.htm?courseId=652005 <!DO ...
纯js 别踩白块游戏解析与源码
(一)别踩白块 1.考虑游戏中有哪些对象,属性和方法? 别踩白块游戏仔细想想如果非要对象的话,游戏显示界面可以算是一个对象,下滑的区域算一个对象(每个小方格算对象的属性对象吧) 2.这里主要要思 ...
C语言项目实战：《别踩白块游戏》零基础项目，137 行源代码示例
这篇文章主要为大家详细介绍了C语言实现--<别踩白块游戏>,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下! 游戏介绍: <别踩白块儿 Don't Ta ...
java别踩白块_jquery之别踩白块游戏的简单实现
前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏 ...
JAVA中Robot类的运用，实现‘别踩白块’游戏辅助
Robot 一.功能分析 http://www.4399.com/flash/135255_3.htm 别踩白块游戏,运用Java Robot类完成游戏脚本,自动完成踩黑块. 二.设计思路首先创建一 ...
网页版别踩白块游戏（实践HTML/CSS/JS）
HTML部分别踩白块 score 0 开始游戏 CSS部分 #main { width: 408px; height: 408px; background: white; border: 2px s ...

【超详细】JS原生——别踩白块游戏

本次做的小例子是用原生js写的一个小游戏——别踩白块，js中的注释都给详细写出来了步骤，可以互相学习，有兴趣的话可以跟着步骤一起写一遍！

【超详细】JS原生——别踩白块游戏相关推荐

最新文章

热门文章