原生JS实现别踩白块小游戏(三)

2022-05-22 0 635

在前面的文章中,已经给大家简单讲解过原生JS实现别踩白块小游戏的源代码中HTML部分。感兴趣的朋友可以参考《原生JS实现别踩白块小游戏(一)》和《原生JS实现别踩白块小游戏(二)》。

原生JS实现别踩白块小游戏(三)

下面我们继续结合其源代码,给大家介绍css和JS部分。

CSS代码如下:

<style>    * {        margin: 0;        padding: 0;    }    .box {        margin: 50px auto 0 auto;        width: 400px;        height: auto;        border: solid 1px #222;    }    #cont {        width: 400px;        height: 600px;        position: relative;        overflow: hidden;    }    #go {        width: 100%;        height: 600px;        position: absolute;        top: 0;        font: 700 60px '微软雅黑';        text-align: center;        z-index: 99;    }    #go span {        cursor: pointer;        background-color: #fff;        border-bottom: solid 1px #222;    }    #main {        width: 400px;        height: 600px;        position: relative;        top: -150px;    }    .row {        width: 400px;        height: 150px;    }    .row div {        width: 99px;        height: 149px;        border: solid 1px #222;        float: left;        border-top-width: 0;        border-left-width: 0;        cursor: pointer;    }    #count {        border-top: solid 1px #222;        width: 400px;        height: 50px;        font: 700 36px/50px '微软雅黑';        text-align: center;    }</style>

其实css部分是非常简单的,需要大家注意的就是overflow: hidden样式属性,也就是溢出隐藏的效果。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。设置其值为hidden,则表示内容会被修剪,并且其余内容是不可见的。

JS代码如下:

<script>    var main = document.getElementById('main')    go = document.getElementById('go')    count = document.getElementById('count');    cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];    function CDiv(classname) {        var Div = document.createElement('div')        index = Math.floor(Math.random() * 4)        Div.className = classname        for (var i = 0; i < 4; i++) {            var iDiv = document.createElement('div')            Div.appendChild(iDiv)        }        if (main.children.length == 0) {            main.appendChild(Div);        } else {            main.insertBefore(Div, main.children[0]);        }        Div.children[index].style.backgroundColor = cols[index];        Div.children[index].className = "i";    }    function move(obj) {        //默认速度与计分        var speed = 5, num = 0;        obj.timer = setInterval(function () {            //速度            var step = parseInt(getComputedStyle(obj, null)['top']) + speed;            obj.style.top = step + 'px'            if (parseInt(getComputedStyle(obj, null)['top']) >= 0) {                CDiv('row');                obj.style.top = -150 + 'px';            }            if (obj.children.length == 6) {                for (var i = 0; i < 4; i++) {                    if (obj.children[obj.children.length - 1].children[i].className == 'i') {                        //游戏结束                        obj.style.top = '-150px';                        count.innerHTML = '游戏结束,最高得分: ' + num;                        //关闭定时器                        clearInterval(obj.timer);                        //显示开始游戏                        go.children[0].innerHTML = '游戏结束';                        go.style.display = "block";                    }                }                obj.removeChild(obj.children[obj.children.length - 1]);            }            //点击与计分            obj.onmousedown = function (event) {                //点击的不是白盒子                // 兼容IE                event = event || window.event;                if ((event.target ? event.target : event.srcElement).className == 'i') {                    //点击后的盒子颜色                    (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";                    //清除盒子标记                    (event.target ? event.target : event.srcElement).className = '';                    //计分                    num++;                    //显示得分                    count.innerHTML = '当前得分: ' + num;                }                else {                    //游戏结束                    obj.style.top = 0;                    count.innerHTML = '游戏结束,最高得分: ' + num;                    //关闭定时器                    clearInterval(obj.timer);                    //显示开始游戏                    go.children[0].innerHTML = '游戏结束';                    go.style.display = "block";                }                //盒子加速                if (num % 10 == 0) {                    speed++;                }            }            //松开触发停止            obj.onmouseup = function (event) {            }        }, 20)    }    go.children[0].onclick = function () {        if (main.children.length) {            //暴力清楚main里面所有盒子            main.innerHTML = '';        }        //清空计分        count.innerHTML = '游戏开始';        //隐藏开始盒子        this.parentNode.style.display = "none";        move(main);    }</script>

js就是让整个静态页面动起来的主要部分。其实现思路也很简单,先获取div元素,让div动起来,动态创建Div,动起来后填补缺失的div,随机创建有颜色的方块,绑定点击事件,点击判断输赢,游戏结束后的限制处理,有颜色方块触底的处理,还有加分加速的处理。

由于篇幅的原因,本篇文章就是先关于原生js实现别踩白块小游戏中css和js部分的简单介绍,那么在后期的文章中,我们会重点讲解其js部分的代码实现方法。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明:根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!】
本站所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注,网站资源不做任何二次加密(原版加密除外,不影响程序使用的不会做解密处理),方便您更好的学习参考。 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

即刻码站__国内靠谱的站长资源下载平台 php教程 原生JS实现别踩白块小游戏(三) https://www.jike1995.com/37337.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务