基于HTML5打造的一款别踩白板小游戏

时间：2022-09-19 15:03:48

基于HTML5打造的一款别踩白板小游戏

背景简介

别踩白板这个游戏相信大家都玩过，这个是基于HTML5打造的简单小游戏，在PC端和移动端都能够运行，适应多种平台，今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板。

基于HTML5打造的一款别踩白板小游戏

一、思路分析

整体页面是一个大的矩形，长宽比例大概是3：2，然后游戏开始，不断有白板降落，然后一行是4个板，一块黑色板块，其余三块是白色板块，通过板块的点击事件绑定，然后判定是什么颜色，只要是白色的，游戏结束(Game Over), 否则玩家积分加1;

二、页面搭建

2.1 HTML层

  1. <div class="wrapper">  
  2.         <div id="go">  
  3.             <a href="javaScript:void(0)" id="go">Game Start</a>  
  4.         </div>  
  5.         <div id="main"></div>  
  6. </div>  

2.2 CSS层

在样式设置前还是先了解大致结构,如下所示:

基于HTML5打造的一款别踩白板小游戏

全局设置样式

  1. *{
  2. margin:0;
  3. padding:0;
  4. }

wrapper样式设置样式

  1. .wrapper{
  2. margin:150px auto;
  3. width:400px;
  4. height:600px;
  5. border:1px solid #ccc;
  6. position: relative;
  7. overflow: hidden;
  8. }

wrapper下面的go的设置样式

  1. #go{
  2. width:100%;
  3. position: absolute;
  4. top:0;
  5. text-align: center;
  6. z-index:99;
  7. }

开始游戏按钮设置样式

  1. #go a{
  2. display:block;
  3. height:100px;
  4. width:400px;
  5. color:cyan;
  6. background-color: #000000;
  7. text-decoration: none;
  8. border-bottom:3px dashed #eee;
  9. font-size:60px;
  10. font-weight:600;
  11. }

main(方块)设置样式

  1. #main{
  2. width:400px;
  3. height:600px;
  4. position: relative;
  5. top:-150px;
  6. /* border:1px solid black; */
  7. }

创建出来的每一行方块设置样式

  1. .row{
  2. width:400px;
  3. height:150px;
  4. }

一行中的四个小方块的设置样式

  1. .row div{
  2. width:99px;
  3. height:149px;
  4. border-left:1px solid #222;
  5. border-bottom:1px solid #222;
  6. float: left;
  7. cursor: pointer;
  8. }

在设置好样式之后,得到的大致界面如下所示:

基于HTML5打造的一款别踩白板小游戏

可以看到界面样式比较简单,我们的想法是点击Start Game 按钮后方块自动降落,所以屏幕比较空(暂时)。

2.3 JS层

js层主要用来控制页面产生动态效果;比如产生方块,以及方块的移动等等;

2.3.1获取元素

  1. var main = document.getElementById('main'); // 获取dom元素
  2. var go = document.getElementById('go');
  3. var speed = 5, num = 0, timer, flag = true; // 设置初始变量
  4. var colors = ['red', 'green', 'black', 'blue']; // 设置存放颜色的数组

这里存放颜色的数组不需要白色,每一个初始化出来的方块不设置背景颜色,它默认是白色。

2.3.2创建每一行div元素

前面我们说过,一行是四个方块,比例和大方块一样(3:2),它的长宽是:{width: 100px ; height: 150px};

  1. function cDiv() {
  2. var oDiv = document.createElement('div');// 获取一个随机数将每一行找到一个随机div 设置上颜色
  3. var index = Math.floor(Math.random() * 4);
  4.  
  5. oDiv.setAttribute('class', 'row'); // 设置行class类名
  6. for (var j = 0; j < 4; j++) { // for循环生成一行四个div
  7. var iDiv = document.createElement('div');
  8. oDiv.appendChild(iDiv); // 将每一个小div插入每一行中
  9. }
  10.  
  11. if (main.childNodes.length == 0) { // 根据父级中是否有子元素 插入新生成的行
  12. main.appendChild(oDiv); // 如果父级为空 直接插入
  13. } else {
  14. main.insertBefore(oDiv, main.childNodes[0]); // 如果父级有元素 将新生成的一行插入到已有行数的最前面
  15. }
  16. var clickDiv = main.childNodes[0].childNodes[index]; // 根据随机数 设置一行中有颜色的div
  17. clickDiv.setAttribute('class', 'i'); // 将此元素设置class类名 作为需要点击的标记
  18. clickDiv.style.backgroundColor = colors[index]; // 同时设置上背景颜色
  19. }

2.3.3点击事件函数封装

  1. function bindEvent() {
  2. main.addEventListener('click', function (event) { // 给main添加点击事件
  3. if (flag) { // 根据flag值判断是否可以点击
  4. var tar = event.target; // 获得到点击的源事件
  5. if (tar.className == 'i') { // 判断点击的块是否为有颜色的
  6. tar.style.backgroundColor = '#bbb'; // 改变背景颜色
  7. tar.classList.remove('i'); // 移除class类名
  8. num++; // 计数++
  9. } else {
  10. alert('游戏结束，得分：' + num); // 如果点到了白色的块 游戏结束
  11. clearInterval(timer);
  12. flag = false;
  13. }
  14. if (num % 10 == 0) { // 如果当前分数为10的倍数 速度++
  15. speed++;
  16. }
  17. }
  18. })
  19. }

2.3.4 方块移动函数封装

  1. function move() {
  2. clearInterval(timer);
  3. timer = setInterval(function () { // 设置定时器
  4. var step = parseInt(main.offsetTop) + speed; // 利用top值移动main区域
  5. main.style.top = step + 'px';
  6. if (parseInt(main.offsetTop) >= 0) { // 如果main区域移动到可视区域 创建一行新的元素
  7. cDiv();
  8. main.style.top = '-150px'; // 同时将main区域移动到可视区域上方
  9. }
  10. var len = main.childNodes.length; // 获得mian区域内的行数
  11. if (len == 6) { // 如果main区域内行数为6 即显示区域四行 上面新生成一行 下面一行
  12.  
  13. for (var i = 0; i < 4; i++) { // 遍历最后一行的每一个div
  14.  
  15. if (main.childNodes[len - 1].children[i].classList.contains('i')) { // 如果其中有一个包含没有被点击的 游戏结束
  16. alert('游戏结束，得分：' + num);
  17. clearInterval(timer);
  18. flag = false; // 游戏结束后不可以继续点击
  19. }
  20. }
  21.  
  22. main.removeChild(main.childNodes[len - 1]); // 将展示过后的每一行移除
  23. }
  24. }, 20)
  25. bindEvent(); // 点击事件
  26. }

在函数里面第一句就是clearInterval(timer);防止定时器多开;

基于HTML5打造的一款别踩白板小游戏

2.3.5 游戏开始

  1. // 开始按钮点击 开始移动 创建每一行元素
  2. function clickStart() {
  3. go.addEventListener('click', function () {
  4. go.style.display = 'none';
  5. move();
  6. });
  7. }
  8. clickStart();

大致效果如图所示：

基于HTML5打造的一款别踩白板小游戏

这个是使用到HbuilderX中的内置浏览器的界面,游戏结束效果如上图所示。

三、总结

本文我们使用到原生js打造了简单触屏游戏------别踩白板，对于游戏有简单的改动。总体来说首先我们需要设置好游戏界面大致结构和样式,然后通过原生js控制方块的产生移动,以及点击等等,最终才呈现了一个合适的完整的界面效果;感兴趣的小伙伴可以去试一下。

原文链接：https://mp.weixin.qq.com/s/_RScuUKKcU4MVl5wx-q93A

标签：

相关文章