html+css+js实现别踩白板小游戏

目录
  • 背景简介
  • 一、思路分析
  • 二、页面搭建
    • 2.1 HTML层
    • 2.2 CSS层
    • 2.3 JS层
    • 2.3.1获取元素
    • 2.3.2创建每一行div元素
    • 2.3.3点击事件函数封装
    • 2.3.4 方块移动函数封装
    • 2.3.5 游戏开始
  • 三、总结

背景简介

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

一、思路分析

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

二、页面搭建

2.1 HTML层

<div class="wrapper">
        <div id="go">
            <a href="javaScript:void(0)" id="go">Game Start</a>
        </div>
        <div id="main">
</div></div>

2.2 CSS层

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

全局设置样式

*{
    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 按钮后方块自动降落,所以屏幕比较空(暂时)。

2.3 JS层

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

2.3.1获取元素

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']; // 设置存放颜色的数组

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

2.3.2创建每一行div元素

前面我们说过,一行是四个方块,比例和大方块一样(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]; // 同时设置上背景颜色
}

2.3.3点击事件函数封装

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++;
            }
        }
    })
}

2.3.4 方块移动函数封装

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);防止定时器多开;

2.3.5 游戏开始

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

大致效果如图所示:

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

三、总结

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

到此这篇关于html+css+js实现别踩白板小游戏的文章就介绍到这了,更多相关html+css+js别踩白板游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js html5 css俄罗斯方块游戏再现

    这个游戏主要分为三部份,HTML5+CSS+JAVASCRIPT来完成的.在这里详细讲一下js的代码.因为这个游戏的主要部分其实就是js. 大多数都是靠js来完成的. 完成后的效果如下: HTML代码: <body> <div class="wrap"> <div class="play_wrap"> <div id="play_area"></div> <div class=&q

  • javascript HTML5 canvas实现打砖块游戏

    本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块

  • html+css+js实现别踩白板小游戏

    目录 背景简介 一.思路分析 二.页面搭建 2.1 HTML层 2.2 CSS层 2.3 JS层 2.3.1获取元素 2.3.2创建每一行div元素 2.3.3点击事件函数封装 2.3.4 方块移动函数封装 2.3.5 游戏开始 三.总结 背景简介 别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板. 一.思路分析 整体页面是一个大的矩形,长宽比例大概是3:2,然后游戏开始

  • HTML+CSS+JS实现的简单应用小案例分享

    目录 1.猜数字 2.表白墙 3.切换日夜间模式 4.待办事项 1.猜数字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&q

  • JS实现别踩白块游戏的示例代码

    目录 实现思路 核心代码 HTML代码 CSS代码 JS代码 实现思路 1.offsetTop,与style.top 2.我们看到的是白块在向下运动,其实不是,政治运动的是装着白块的盒子,白块只是被装在了盒子里面被带着向下,而向下运动也只是改变top值.同事盒子total的高度也不是无限长的能一直向下运动,所以肯定是运动到某个地方他又回去了. childNodes:由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中.(不能乱用) JS获取元素的lef

  • JS实现的走迷宫小游戏完整实例

    本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • 原生JS实现的跳一跳小游戏完整实例

    本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

  • 利用原生JS实现欢乐水果机小游戏

    简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单

  • 原生js实现的金山打字小游戏(实例代码详解)

    首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g

  • js实现金山打字通小游戏

    本文实例为大家分享了js实现金山打字通小游戏的具体代码,供大家参考,具体内容如下 字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度 效果 1.页面内容 列表内放字母 <ul id="box"> <li></li> <li>A</li> </ul> ** 2.页面样式 ** 1)清除li园标 2)确定列表位置,为字母随机位置下降准备 *{ padding: 0; marg

  • JS+Canvas实现贪吃蛇小游戏

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不到有用的资料(不是代码!),所以说呢,只能自力更生 -_- 首先是大致要考虑的东西: 1.要有蛇(没蛇怎么叫贪吃蛇). 2.然后要有地图(蛇是不能上天的). 3.不能水平\垂直掉头(如果想掉头,需要至少变换方位并且至少移动一格才可). 4.食物(不然怎么贪吃). 5.吃了食物要变长(这才是精髓).

  • JS实战面向对象贪吃蛇小游戏示例

    目录 思考 一.贪吃蛇效果图 二.贪吃蛇分析 2.1 开始游戏功能 2.2 运动功能 2.2.1 蛇的不同方向的运动 2.2.2 键盘控制方向运动功能 2.3 吃食物功能 2.3.1 食物的产生 2.3.2 吃食物的过程 2.4 死亡判定功能 2.4.1 触边死亡判断(撞墙了) 2.4.2 自己撞到自己 2.5 暂停/继续游戏功能 总结 思考 第一步思考蛇分为几个部分,蛇头和蛇身体是怎么形成的. 第二步思考蛇是怎么运动的:如何通过键盘控制蛇的走向. 第三步思考游戏在什么情况下会结束. 第四步思考

随机推荐