用JS怎样搭建别踩白板游戏,实现思路及方法是什�
Admin 2022-06-21 群英技术资�
别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游�--别踩白板�
整体页面是一个大的矩形,长宽比例大概�3�2,然后游戏开始,不断有白板降落,然后一行是4个板,一块黑色板块,其余三块是白色板块,通过板块的点击事件绑定,然后判定是什么颜色,只要是白色的,游戏结束(Game Over), 否则玩家积分�1�
<div class="wrapper"> <div id="go"> <a href="javaScript:void(0)" id="go">Game Start</a> </div> <div id="main"> </div></div>
在样式设置前还是先了解大致结�,如下所�:
全局设置样式
*{ margin:0; padding:0; }
wrapper样式设置样式
.wrapper{ margin:150px auto; width:400px; height:600px; border:1px solid #ccc; position: relative; overflow: hidden; }
wrapper下面的go的设置样�
#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: #000000; text-decoration: none; border-bottom:3px dashed #eee; font-size:60px; font-weight:600; }
main(方块)设置样式
#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; }
在设置好样式之后,得到的大致界面如下所�:
可以看到界面样式比较简�,我们的想法是点击Start Game 按钮后方块自动降�,所以屏幕比较空(暂时)�
js层主要用来控制页面产生动态效�;比如产生方块,以及方块的移动等�;
var main = document.getElementById('main'); // 获取dom元素 var go = document.getElementById('go'); var speed = 5, num = 0, timer, flag = true; // 设置初始变量 var colors = ['red', 'green', 'black', 'blue']; // 设置存放颜色的数�
这里存放颜色的数组不需要白�,每一个初始化出来的方块不设置背景颜色,它默认是白色;
前面我们说过,一行是四个方块,比例和大方块一�(3:2),它的长宽�:{width: 100px ; height: 150px};
function cDiv() { var oDiv = document.createElement('div');// 获取一个随机数将每一行找到一个随机div 设置上颜� var index = Math.floor(Math.random() * 4); oDiv.setAttribute('class', 'row'); // 设置行class类名 for (var j = 0; j < 4; j++) { // for循环生成一行四个div var iDiv = document.createElement('div'); oDiv.appendChild(iDiv); // 将每一个小div插入每一行中 } if (main.childNodes.length == 0) { // 根据父级中是否有子元� 插入新生成的� main.appendChild(oDiv); // 如果父级为空 直接插入 } else { main.insertBefore(oDiv, main.childNodes[0]); // 如果父级有元� 将新生成的一行插入到已有行数的最前面 } var clickDiv = main.childNodes[0].childNodes[index]; // 根据随机� 设置一行中有颜色的div clickDiv.setAttribute('class', 'i'); // 将此元素设置class类名 作为需要点击的标记 clickDiv.style.backgroundColor = colors[index]; // 同时设置上背景颜� }
function bindEvent() { main.addEventListener('click', function (event) { // 给main添加点击事件 if (flag) { // 根据flag值判断是否可以点� var tar = event.target; // 获得到点击的源事� if (tar.className == 'i') { // 判断点击的块是否为有颜色� tar.style.backgroundColor = '#bbb'; // 改变背景颜色 tar.classList.remove('i'); // 移除class类名 num++; // 计数++ } else { alert('游戏结束,得分:' + num); // 如果点到了白色的� 游戏结束 clearInterval(timer); flag = false; } if (num % 10 == 0) { // 如果当前分数�10的倍数 速度++ speed++; } } }) }
function move() { clearInterval(timer); timer = setInterval(function () { // 设置定时� var step = parseInt(main.offsetTop) + speed; // 利用top值移动main区域 main.style.top = step + 'px'; if (parseInt(main.offsetTop) >= 0) { // 如果main区域移动到可视区� 创建一行新的元� cDiv(); main.style.top = '-150px'; // 同时将main区域移动到可视区域上� } var len = main.childNodes.length; // 获得mian区域内的行数 if (len == 6) { // 如果main区域内行数为6 即显示区域四� 上面新生成一� 下面一� for (var i = 0; i < 4; i++) { // 遍历最后一行的每一个div if (main.childNodes[len - 1].children[i].classList.contains('i')) { // 如果其中有一个包含没有被点击� 游戏结束 alert('游戏结束,得分:' + num); clearInterval(timer); flag = false; // 游戏结束后不可以继续点击 } } main.removeChild(main.childNodes[len - 1]); // 将展示过后的每一行移� } }, 20) bindEvent(); // 点击事件 }
在函数里面第一句就是clearInterval(timer);防止定时器多开;
// 开始按钮点� 开始移� 创建每一行元� function clickStart() { go.addEventListener('click', function () { go.style.display = 'none'; move(); }); } clickStart();
大致效果如图所�:
这个是使用到HbuilderX中的内置浏览器的界面,游戏结束效果如上图所�;
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
为什么要学会网站防采集方法:通过JavaScript禁止F12,禁止Ctrl+s,禁止ctrl+u,禁止选中文字,禁止鼠标右键等方法� 作为一名网站站长,相信大家都应该听说过“文章采集”,自己原创手写的文章半小时内被别人原模原样采集走了,最可气的是自己发布的文章没
这篇文章主要介绍了vue 图片裁剪上传组件的实现,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
这篇文章主要给大家介绍了关于在vue3.0中如何友好使用antdv的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了vue 设置背景颜色及透明度的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐�
这篇文章主要介绍了CocosCreator中DrawCall的优化,想研究游戏性能的同学,一定要看一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078