jQuery实现别踩白块小游戏(简易版)

别踩白块分享
这是个漫长的寒假,编程使我快乐。在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力。
现在记录下来给大家参考,不足之处请大家谅解。
先上截图:
别踩白块图1别踩白块图2
使用代码前请先导入jQuery(下载压缩版)。
游戏分为方块区域计时条区域计分区域
方块区域是用<table>通过改变其表格的不同背景颜色制作的;计时条区域简单使用了jQuery的滑入滑出功能。
CSS代码:

<style>
        body {
            background-color: #f1f1f1;
        }

        .out {
            background-image: url("../img/pige.jpg");
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .head {
            text-align: center;
        }

        .content {
            width: 520px;
            overflow: hidden;
            margin: 0 auto;
        }

        #timer_out {
            /*border: solid 1px gray;*/
            width: 20px;
            height: 550px;
            background-color: white;
            float: left;
            margin-left: 60px;
        }
        /*倒计时*/
        #timer {
            font-size: 12px;
            color: white;
            width: 20px;
            height: 550px;
            background-color: gray;
            display: none;
        }

        #player {
            width: 300px;
            float: left;
        }

        .black {
            background-color: black;
        }

        .white {
            background-color: white;
        }

        .red {
            background-color: red;
        }
		/*计分*/
        #score_out{
            float: left;
            width: 100px;
            text-align: center;
            border: solid 1px black;
        }
        #score,#score_max{
            color: red;
            font-size: 50px;
        }
        #score_out hr{
            height: 8px;
            background-color: black;
            border: none;
        }

    </style>

javascript代码:

<script>
    var lineNum;//表格行数
    var arr = new Array();
    var score = 0;//分数
    var scoreMax=0;//最高分
    var flag=true;//倒计时开关
    init();

    // 初始化游戏
    function init() {
        score=0;
        $('#score').html(score);
        lineNum = $('#play1').find('tr').length;
        console.log('表格有:' + lineNum + '行');
        $('#play1 tr').children().addClass('white');
        for (var i = 0; i < lineNum; i++) {
            arr[i] = Math.floor(Math.random() * 4);//生成随机数
            $('#play1 tr').eq(i).children().eq(arr[i]).removeClass('white').addClass('black');//生成黑块
        }
        console.log('随机数:' + arr.length + '个');
        $('#play1 td.red').removeClass('red');//清除所有红块
        $('#timer').slideUp('fast');//恢复计时器
        flag=true;//打开倒计时开关
    }

    //开始游戏
    function touch(obj) {
        //启动倒计时
        if (flag) {
            //60000是时间毫秒
            $('#timer').slideDown(60000, function () {
                alert('游戏结束,你的分数:' + score+'\n'+'最高分:'+scoreMax);
                init();
            });
        }
        //判断是否踩到白块
        if (obj.className == 'white') {
            $(obj).addClass('red');//变为红块
            score--;//分数减一
            $('#score').text(score);
        } else {
            var random = Math.floor(Math.random() * 4);
            var line1 = $('#play1 tr:eq(0) .black').index();
            var line2 = $('#play1 tr:eq(1) .black').index();
            var line3 = $('#play1 tr:eq(2) .black').index();
            var line4 = $('#play1 tr:eq(3) .black').index();
            var line5 = $('#play1 tr:eq(4) .black').index();
            var line6 = $('#play1 tr:eq(5) .black').index();
            $('#play1 td.black').removeClass('black').addClass('white');//清除所有黑块
            $('#play1 td.red').removeClass('red');//清除所有红块
            $('#play1 tr').eq(0).children().eq(random).removeClass('white').addClass('black');
            $('#play1 tr').eq(1).children().eq(line1).removeClass('white').addClass('black');
            $('#play1 tr').eq(2).children().eq(line2).removeClass('white').addClass('black');
            $('#play1 tr').eq(3).children().eq(line3).removeClass('white').addClass('black');
            $('#play1 tr').eq(4).children().eq(line4).removeClass('white').addClass('black');
            $('#play1 tr').eq(5).children().eq(line5).removeClass('white').addClass('black');
            //分数
            score++;
            $('#score').text(score);
            if (score > scoreMax) {
                scoreMax=score;
                $('#score_max').text(scoreMax);
            }
        }
        flag=false;//关闭倒计时开关
    }
</script>

源码下载:https://download.csdn.net/download/weixin_45054015/12234625.

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现简易计算器是一个常见的前端开发练习,通常使用JavaScriptjQuery库来增强用户界面的交互性。以下是一个简单的步骤来创建一个基本的加减乘除计算器: 1. 引入jQuery:首先在HTML文件中引入jQuery库,因为我们将利用其事件处理和DOM操作功能。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. HTML结构:定义计算器的HTML布局,包括数字按钮、运算符按钮和结果显示区域。 ```html <div id="calculator"> <input type="text" id="display" disabled> <div class="buttons"> <!-- 数字按钮 --> <button>1</button> <button>2</button> <button>3</button> <!-- ... --> <button>.</button> <button>=</button> <!-- 运算符按钮 --> <button>+</button> <button>-</button> <button>*</button> <button>/</button> </div> </div> ``` 3. jQuery代码:添加事件监听器来处理点击事件,根据按钮类型执行相应的计算或更新显示。 ```javascript $(document).ready(function() { // 获取显示元素 const display = $('#display'); // 遍历数字按钮 $('.buttons button').click(function() { const value = $(this).text(); if (!isNaN(value)) { // 如果是数字 display.val(display.val() + value); } else { // 如果是运算符 display.val(display.val() + ' ' + value); // 保留空格,以便显示运算符 } }); // 处理等于号按钮 $('#=').click(function() { try { const result = eval(display.val()); display.val(result); } catch (error) { display.val("Error"); } }); }); ``` 4. 注意事项: - 使用`eval()`函数存在安全风险,因为它会执行任意的JavaScript代码。在实际应用中,应采用更安全的方式(如设计一个解析器)来处理用户输入。 - 上述代码没有处理清除、小数点和括号等功能,这将增加实现的复杂性,但基本思路类似。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值