js+Jquery 制作推箱子小游戏

最新推荐文章于 2024-04-23 14:22:39 发布
最新推荐文章于 2024-04-23 14:22:39 发布
阅读量358 收藏 4
点赞数
文章标签： 游戏 javascript ViewUI
原文链接：http://www.cnblogs.com/superZz/p/5875945.html
版权 
<!DOCTYPE html>
<html>

<head>
    <title>Sokaban</title>
    <meta charset="utf-8">
    <style type="text/css">
    .roads {
        width: 50px;
        height: 50px;
        background: url(img/roods.png);
        background-size: 100% 100%;
    }
    
    .people {
        width: 50px;
        height: 50px;
        background-size: 100% 100%;
    }
    
    .box {
        background: url(img/box.png) !important;
        background-size: 100% 100%;
    }
    
    .finish {
        background: url(img/finish.png);
        background-size: 100% 100%;
    }
    
    .walls {
        background: url(img/walls.png);
        background-size: 100% 100%;
    }
    </style>
</head>

<body>
</body>

</html>
<script type="text/javascript" src='js/jquery-3.1.0.js'></script>
<script type="text/javascript">
sokaban({
    "num": 20,
    'people': 'people', //人物样式
    'box': 'box', //盒子样式
    'walls': 'walls', //墙壁样式
    'finish': 'finish', //结束样式
    'roads': 'roads' //路的样式
})

function sokaban(obj) {
    var num = obj.num + 2, //地图大小
        people = obj.people, //人物样式
        box = obj.box, //盒子样式
        walls = obj.walls, //墙壁样式
        finish = obj.finish, //结束样式
        roads = obj.roads,
        $arry = [],
        $walls = []; //路的样式




    //创建地图

    $('body').append('<div id=\"box\"></div>');
    $('#box').css({
        'position': 'absolute',
        'top': '50px',
        'left': '50px',
        'width': (50 * num) + 'px',
        'height': (50 * num) + 'px'
    });


    //循环出路
    for (var m = 0; m < num; m++) {
        var top_now = m * 50;
        for (n = 0; n < num; n++) {
            var left_now = n * 50;
            $('#box').append('<div class=\'' + roads + ' check\'></div>');
            $('.' + roads).last().css({
                'position': 'absolute',
                'top': (top_now) + 'px',
                'left': (left_now) + 'px'
            });
        }
    }


    //循环出外墙
    for (var k = 1; k <= num * num; k++) {
        if (k <= num - 1 || k > num * (num - 1)) {
            $('.check').eq(k - 1).addClass(walls);
            $walls.push(k - 1);


        } else if (k % num == 0 || k % num == 1) {
            $('.check').eq(k - 1).addClass(walls);
            $walls.push(k - 1);
        }
    }


    //添加按钮
    $('<button id=\'addwalls\'>添加墙</button>').appendTo(document.body);
    $('<button id=\'remove\'>删除</button>').appendTo(document.body);
    $('<button id=\'addpeople\'>添加人</button>').appendTo(document.body);
    $('<button id=\'addend\'>添加结束</button>').appendTo(document.body);
    $('<button id=\'addbox\'>添加箱子</button>').appendTo(document.body);
    $('<button id=\'gogo\'>GO！</button>').appendTo(document.body);


    //为按钮绑定事件


    $('#remove').click(function() {
        $('.check').unbind('click');

        $('.check').bind('click', function() {
            var flag = 1;
            for (var i = 0; i < $walls.length; i++) {
                if ($(this).index() == $walls[i]) {
                    flag = 0;
                }
            }

            if (flag) {
                $(this).attr('class', '');
                $(this).addClass(roads);
                $(this).addClass('check');
            }
        })
    });

    //添加开始
    $('#gogo').click(function() {
        gogogo();
    });


    //添加墙
    $('#addwalls').click(function() {
        $('.check').unbind('click');
        $('.check').bind('click', function() {
            if ($(this).hasClass(box) || $(this).hasClass(finish) || $(this).hasClass(people)) {
                return;
            }
            $(this).addClass(walls);
        });
    });

    //添加人
    $('#addpeople').click(function() {
        $('.check').unbind('click');

        $('.check').bind('click', function() {

            if ($('.' + people).length > 0) {
                return;
            }

            if ($(this).hasClass(box) || $(this).hasClass(finish) || $(this).hasClass(walls)) {
                return;
            }

            $(this).addClass(people);
            $('<img src=\'img/pig.png\'>').appendTo($(this));
        });
    });

    //添加终点

    $('#addend').click(function() {
        $('.check').unbind('click');
        $('.check').bind('click', function() {
            if ($('.' + finish).length > 5) {
                alert('不可以大于6！');
                return;
            }

            if ($(this).hasClass(box) || $(this).hasClass(people) || $(this).hasClass(walls)) {
                return;
            }

            $(this).addClass(finish);
        });
    });

    //添加
    $('#addbox').click(function() {
        $('.check').unbind('click');
        $('.check').bind('click', function() {
            if ($('.' + box).length > 5) {
                alert('不可以大于6！');
                return;
            }
            if ($(this).hasClass(finish) || $(this).hasClass(people) || $(this).hasClass(walls)) {
                return;
            }
            $(this).addClass(box);
        });

    });

    function gogogo() {

        if ($('.' + people).length == 0) {
            alert('必须有人！');
            return;
        }

        if ($('.' + box).length < 1) {
            alert('必须有箱子！');
            return;
        }
        if ($('.' + box).length != $('.' + finish).length) {
            alert('箱子和终点个数必须统一');
            return;
        }

        $('.check').unbind('click');
        $('#remove').unbind('click');
        $('#addwalls').unbind('click');
        $('#addend').unbind('click');
        $('#addbox').unbind('click');
        $('#gogo').unbind('click');



        $(window).keydown(function(event) { //当鼠标按下时，传入事件对象~
            switch (event.keyCode) { //获取键值码
                case 37: //如果键值码为37，代表着我的键盘上的左键
                    move(-1, 90)
                    break; //跳出swich
                case 38:
                    move(-num, 180)
                    break; //跳出swich
                case 39:
                    move(1, -90)
                    break; //跳出swich
                case 40:
                    move(num, 0)
                    break; //跳出swich
            }

        })
    }

    function move(target, deg) {
        var $index = $('.' + people).index();

        $('.check').eq($index).find('img').css('transform', 'rotate(' + deg + 'deg)');

        if ($('.check').eq($index + target).hasClass(walls)) {
            return;
        } else if ($('.check').eq($index + target).hasClass(box)) {

            if ($('.check').eq($index + (target * 2)).hasClass(walls)) {
                return;
            } else if ($('.check').eq($index + (target * 2)).hasClass(box)) {
                return;
            }
        }



        $('.check').eq($index).removeClass(people).find('img').remove();
        var $pic = $('<img src=\'img/pig.png\'>');

        $pic.css('transform', 'rotate(' + deg + 'deg)');

        $('.check').eq($index + target).addClass(people).append($pic);

        if ($('.check').eq($index + target).hasClass(box)) {

            $('.check').eq($index + target).removeClass(box);

            $('.check').eq($index + (target * 2)).addClass(box);

            var $trueNum = 0;
            for (var z = 0; z < $('.check').length; z++) {
                if ($('.check').eq(z).hasClass(finish + ' ' + box)) {
                    $trueNum++;
                }
            }


            if ($trueNum == $('.' + box).length) {

                //在这里，我使用了一个setTimeout是因为，在进行测试的时候，发现在chrome中alert会在我移动完之前就会弹出，导致了先出现了弹框，再执行了移动。firefox中的测试是移动箱子和弹框两者同时进行，为了避免在chrome中出现先弹出对话框再执行代码的问题，我使用了延迟100毫秒的方法。
                setTimeout(function() {
                    alert('you win');
                }, 100);
            }


        }

    }




}
</script>

 

下面是用到的素材图片：

 

转载于:https://www.cnblogs.com/superZz/p/5875945.html

a61427790215998
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单jQuery推箱子游戏
02-17
【简单jQuery推箱子游戏】是一款基于JavaScript库jQuery开发的趣味逻辑游戏，旨在锻炼玩家的空间想象能力和逻辑思维能力。游戏的核心玩法是控制一个角色在固定的格子地图中推动箱子，目标是将所有箱子推到指定的位置...
jq游戏----推箱子
Edward的web前端修炼之路
06-24 1018
jq游戏----推箱子 参考妙趣课堂视频所写的游戏，练练手还是很不错的，下面附上代码: index.html Document index.js $(document).ready(function(){ Game.init($('#div1')); //初始化 // alert("a"); }); var Game = { gk
用jQuery制作推箱子效果
qq_45747484的博客
10-25 366
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <img src="formPhoto/3.png" id="img" ...
jquery工具箱旋转动画效果
Brave的博客
02-23 1304
工具箱旋转动画
jQuery--盒子尺寸、盒子位置
Amy的博客
08-29 2995
盒子尺寸（重点） width()//这里获得的宽高跟css()数据类型不一样==内容的宽度 innerWidth()=width()+padding outerWidth()=innerwidth()+border outerWidth(true)==outerwidth +margin height() innerHeight() outer
jQuery灯箱插件lightBox使用方法
热门推荐
10-15 1万+
“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。
原创jQuery推箱子小游戏（100关且可扩展可选关）,休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全
12-02
[原创]jQuery推箱子小游戏（100关且可扩展可选关）,休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全（附源码）- 轻按键盘的方向键（上下左右），控制熊猫方向推动箱子。- 或者点击熊猫的上下左右行走，...
push-box:推箱子小游戏
05-13
Vue 2.0 + Jquery 开发的推箱子小游戏 游戏规则 把散乱在各处的箱子推回它原来的位置即可获得胜利 实现思路 整体思路 可以把屏幕中央的方格抽象成一个坐标系，左上角向右为x轴正方向，向下为y轴正方向。 通过坐标...
vue.js推箱子小游戏代码.zip
10-08
Vue.js推箱子小游戏是一款基于Vue.js框架开发的互动游戏，结合了jQuery的特效处理和CSS的视觉呈现，为网页添加了一种有趣且富有挑战性的娱乐元素。Vue.js是一款轻量级的前端JavaScript框架，以其响应式的数据绑定和...
HTML5 Canvas推箱子小游戏源码.zip
11-18
HTML5 Canvas推箱子小游戏是一款基于HTML5的网页游戏，它利用了Canvas元素的强大绘图功能来实现游戏场景的动态渲染。Canvas是HTML5中的一个核心特性，允许开发者在网页上进行2D图形绘制，为创建交互式动画和游戏提供...
jQuery编写的推箱子
06-17
有源码和注释，支持自定义地图
推箱子游戏代码.zip
07-19
模拟推箱子第一关游戏代码
基于JAVA实现的推箱子小游戏
最新发布
小蜜蜂vs码农
04-23 1235
java实现推箱子小游戏，一起回忆童年的记忆。
java命令行简单实现推箱子小游戏
D15550353831的博客
11-26 1251
【代码】java命令行简单实现命令行小游戏。
jquery实现推箱子小游戏【附源码】
宅神的博客
05-05 1466
戳我下载源码效果图：实现方法具体看代码  这里就不做阐述。
推箱子小游戏代码html,js+Jquery 制作推箱子小游戏(示例代码)
weixin_31028871的博客
06-04 813
Sokaban.roads{width:50px;height:50px;background:url(img/roods.png);background-size:100% 100%;}.people{width:50px;height:50px;background-size:100% 100%;}.box{background:url(img/box.png) !important;back...
jQuery推箱子小游戏
weixin_45675581的博客
02-02 766
使用jquery来完成的推箱子小游戏案例。主要功能点有，使用map来构建数组，从而数据来创建地图，并且渲染地图，使用使用keydown来完成人物的移动位置，使用判断来判断是否是墙，通过数组判断墙的位置，并且人物移动箱子是通过检测碰撞判断箱子移动以及人物位置和判断箱子前面是不是墙和是不是俩的箱子的逻辑问题。 视频教程：https://xuexiluxian.cn/course/detail/36ce15bada2b461d8e1a227b77120f17 HTML代码： <body> <
如何用java语言实现一个简单的推箱子小游戏？
weixin_35757531的博客
12-16 620
在实现推箱子小游戏时，需要考虑以下几点： 定义游戏地图：地图可以使用二维字符数组表示，可以用字符'#'表示墙壁，用字符' '(空格)表示可以走的地方，用字符'$'表示箱子，用字符'.'表示目标位置，用字符'@'表示人的位置。 定义人的移动方式：可以定义四个方法分别表示人向上、下、左、右移动的操作，在每次移动时需要判断人是否能够到达目标位置，如果能则进行移动，否则不进行移动。 实现箱子的推动：...
java语言实现一个简单的推箱子小游戏的代码
weixin_42576467的博客
02-18 314
可以参考以下代码：import java.util.Scanner;public class BoxGame {public static void main(String[] args) {// 定义游戏地图int[][] map = { { 0, 0, 0, 0, 0 }, { 0, 1, 2, 1, 0 }, { 0, 1, 0, 0, 0 }, { 0, 0, 1, 3, 0 }, { 0...
使用JavaScript+jQuery构建的双人贪吃蛇游戏
"一个使用JavaScript和jQuery编写的双人对战贪吃蛇小游戏。开发者在初学jQuery时创作，主要展示了如何实现蛇的移动、碰撞检测以及游戏界面的基本功能。" 本文将详细介绍如何使用JavaScript和jQuery来开发一个双人...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值