Js写的拼图游戏

最新推荐文章于 2024-04-28 18:16:44 发布
最新推荐文章于 2024-04-28 18:16:44 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： Javascript 文章标签： function div border 游戏 input xhtml

<!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" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
        var mapBlock=3; //3 * 3 个单元格
        var mapWH=300;  //地图的大小
        var tabobj;
        var imgsrc="http://i3.6.cn/cvbnm/35/b7/8f/4e78358bc9f1b80a62a749d04bf409d8.jpg";
       
        var backgroundPositionArr;

        function createMap()
        {
            backgroundPositionArr=new Array();
            document.getElementById("imgid").src=imgsrc;

            tabobj=document.createElement("table");
            tabobj.style.width=mapWH+"px";
            tabobj.style.height=mapWH+"px";
           
            tabobj.border="0";
            tabobj.cellspacing="0";
            tabobj.style.backgroundColor="rgb(223,223,223)";

            var tbodyobj=document.createElement("tbody");
           
            for(var i=0;i<mapBlock;i++)
            {
                var trobj=document.createElement("tr");
               
                for(var j=0;j<mapBlock;j++)
                {
                    var tdobj=document.createElement("td");
                    tdobj.id=i+"_"+j

                    if(!(i==mapBlock-1 && j==mapBlock-1))
                    {
                        tdobj.style.backgroundImage="url("+imgsrc+")";
                        tdobj.style.backgroundRepeat="no-repeat";
                        tdobj.style.backgroundPosition=(-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px";

                        backgroundPositionArr.push((-j)*(mapWH/mapBlock)+"px "+(-i)*(mapWH/mapBlock)+"px");
                    }
                  
                    var txt=document.createTextNode(" ");
                    tdobj.appendChild(txt);
                   
                    trobj.appendChild(tdobj);
                }
               
                tbodyobj.appendChild(trobj);
            }
           
            tabobj.appendChild(tbodyobj);
           
            document.getElementById("map_div").appendChild(tabobj);

            randomMap();

            setMessageDivSize();

            startDate();
            nowDate();
        }

        function setMessageDivSize()
        {
            document.getElementById("message_div").style.width="180px";
            document.getElementById("message_div").style.height=document.getElementById("map_div").offsetHeight-2+"px";
        }

        function startDate()
        {
            document.getElementById("startDate").value=new Date().toLocaleTimeString();
        }

        function nowDate()
        {
            document.getElementById("nowDate").value=new Date().toLocaleTimeString();

            setTimeout("nowDate()",1000);
        }

        function yxbs()
        {
            document.getElementById("yxbs").value=document.getElementById("yxbs").value-0+1;
        }
       
        function keyDown(e)
        {
            var keyvalue=e.keyCode;

            if(keyvalue==38)   //上
            {
                blockMove(1,0);
            }
            else if(keyvalue==39)  //右
            {
                blockMove(0,-1);
            }
            else if(keyvalue==40)   //下
            {
                blockMove(-1,0);
            }
            else if(keyvalue==37) //  左
            {
                blockMove(0,1);
            }
        }

        function blockMove(x,y)
        {
            var blockx=-1;
            var blocky=-1;

            for(var i=0;i<mapBlock;i++)
            {
                for(var j=0;j<mapBlock;j++)
                {
                    if(document.getElementById(i+"_"+j).style.backgroundImage=="")
                    {
                        blockx=i;
                        blocky=j;

                        break;
                    }
                }
                if(blockx!=-1 && blocky!=-1)
                    break;
            }

            if(blockx+x>mapBlock-1 || blockx+x<0 || blocky+y>mapBlock-1 || blocky+y<0)
                return;
            else
            {
                document.getElementById(blockx+"_"+blocky).style.backgroundImage="url("+imgsrc+")";
                document.getElementById(blockx+"_"+blocky).style.backgroundPosition=document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundPosition;
                document.getElementById((blockx+x)+"_"+(blocky+y)).style.backgroundImage="";

                isWin();
                yxbs();
            }
        }

        function randomMap()
        {
            var randomarr=new Array();
            var maparr=new Array();

            for(var i=0;i<mapBlock*mapBlock-1;i++)
            {
                randomarr[i]=i;
            }

            for(var i=mapBlock*mapBlock-2;i>=0;i--)
            {
                var a=Math.round(Math.random()*i);
                maparr.push(randomarr[a]);
               
                randomarr.splice(a,1);
            }

            for(var i=0;i<mapBlock;i++)
            {
                for(var j=0;j<mapBlock;j++)
                {
                    if(!(i==mapBlock-1 && j==mapBlock-1))
                    {
                        document.getElementById(i+"_"+j).style.backgroundPosition=backgroundPositionArr[maparr.pop()];
                    }
                }
            }
        }

        function isWin()
        {
            var k=0;
            var iswin=false;

            for(var i=0;i<mapBlock;i++)
            {
                for(var j=0;j<mapBlock;j++)
                {
                    if(!(i==mapBlock-1 && j==mapBlock-1))
                    {//alert(document.getElementById(i+"_"+j).style.backgroundPosition+"  == "+backgroundPositionArr[k]);
                        if(document.getElementById(i+"_"+j).style.backgroundPosition==backgroundPositionArr[k])
                        {
                            iswin=true;
                        }
                        else
                        {
                            iswin=false;
                            break;
                        }
                        k++;
                    }
                }
                if(iswin==false)
                    break;
            }

            if(iswin)
            {
                alert("恭喜你赢了！");
                window.location.href=window.location.href;
            }
        }

        function setGameNan()
        {
            document.getElementById("map_div").removeChild(tabobj);
           
            mapBlock=document.getElementById("yxn").options[document.getElementById("yxn").selectedIndex].value-0;
            createMap();

            tabobj.focus();
        }
    </script>
</head>
<body οnlοad="createMap()" οnkeydοwn="keyDown(event)"  style="font-size:10pt;">
    <form id="form1">
        <center>
            <br>
            <table>
                <tr>
                    <td>
                        <div id="map_div" style="border:rgb(231,24,220) solid 1px">
                        </div>
                    </td>
                    <td>
                        <div id="message_div" style="border:rgb(231,24,220) solid 1px" align="center">
                            <br><font color="red"><b>拼图游戏</b></font><br>
                            开始时间:<input type="text" id="startDate" readonly style="width:80px"><br>
                            现在时间:<input type="text" id="nowDate" readonly style="width:80px"><br>
                            游戏步数:<input type="text" id="yxbs" readonly value="0" style="width:80px"><br>
                            游戏难度:<select id="yxn" style="width:86px" οnchange="setGameNan()">
                                        <option value="3">3 * 3</option>
                                        <option value="4">4 * 4</option>
                                        <option value="5">5 * 5</option>
                                        <option value="6">6 * 6</option>
                                        <option value="10">10 * 10</option>
                                     </select>
                                     <br><br>

                            <font color="red"><b>游戏规则</b></font><br>
                            (1)只要拼成如下图你就赢了:
                            <br><br>
                            <img id="imgid" width="100px" height="100px" border="1">
                        </div>
                    </td>
                </tr>
            </table>
            <br>
        </center>
    </form>
</body>
</html>

sz101
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JS简单实现拼图小游戏
weixin_50751685的博客
07-19 1609
简单实现js拼图
用JavaScript做一个拼图游戏
热门推荐
来一颗砂糖橘
05-31 1万+
前端实现一个拼图游戏 html、css、js、jquery 喜欢的可以复制下面完整代码查看效果在自己本地查看效果 实现难度……
超简单的九宫格拼图游戏（原生js实现）
最新发布
qq_41729472的博客
04-28 283
这样写的页面是符合html最新规范的，没错，什么head，body标签统统不要，留下唯一有用的。当然，前提是你最好自己准备一张500x500绝对尺寸的图片放在img文件夹下。
JavaScript简单实现拼图小游戏（附源码和资源）
qq_44651842的博客
07-03 3794
JavaScript代码68行，刚学JavaScript的时候写的，思想很简单，分享一下。附源码。
前端:运用HTML+CSS+JavaScript实现拼图游戏
坚持不懈的大白的博客
09-20 6844
前一段时间突然来了一个想法，就是运用前端知识实现一个拼图游戏，但是不知道具体怎样实现。今天，想到既然实现不了现实中我们看到的那种拼块，那么就用正方形来代替吧！
原生JS实现拼图游戏
小柒的前端之旅
05-21 3567
前面的话 练习了10几个原生js小游戏的案例，刚开始是无从下手，而现在有了自己的思路，不再觉得那么的难了。总结起来，还是那句话，“好的代码是时间熬出来的，多练是硬道理！”，这篇文章来分析一下拼图游戏实现的过程。 整体思路 自己的理解画了一个思维导图，帮助分析。 效果图： 用面向对象的方式来写这个代码： 做准备工作： 1： 创建一个配置对象： 包括父盒子的宽高、需要的图片、以及划分的行列 va...
JavaScript原生拼图游戏
03-19
JavaScript原生拼图游戏是一种基于Web的互动娱乐项目，它利用HTML、JavaScript和CSS这三种核心技术来构建。在这个游戏中，用户可以通过移动拼图块来重组一幅图像，游戏提供了简单、中等和困难三种不同的难度等级，...
JS版拼图游戏
11-24
总之，JS版拼图游戏是一个结合了编程技巧、逻辑思维和用户体验设计的项目，对于提升JavaScript开发者的技术能力和创新意识都有很大的帮助。通过这样的实践，开发者不仅能掌握JavaScript的基本用法，还能进一步学习到...
JS实现拼图游戏
10-15
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现一个拼图游戏。拼图游戏是一种常见的娱乐方式，它能够锻炼玩家的空间想象能力和逻辑思维。通过JS，我们可以创建一个交互式的网页版本，让玩家在浏览器上享受...
javascript-拼图游戏
03-08
# JavaScript 小游戏 这里是学习 `JavaScript` 过程中，实现的一些小游戏的归档。 > 注意：目前对移动端的支持还不够友好，请尽量使用 PC 端浏览器访问。 ### 拼图 * 说明：一个简单的移动方块游戏，开始时生成...
JS快速实现移动端拼图游戏
10-21
最近开发一个有关手机端拼图游戏，是基于js实现的。今天小编抽时间把具体实现代码分享到脚本之家平台供大家参考，对js移动端拼图游戏感兴趣的朋友参考下吧
纯js拼图游戏
11-15
自己写的一个简单的纯js拼图游戏，由canvas切图。在页面上加载一个图片，将其分成3x3的小块在屏幕上显示在随机的位置。用户可以用鼠标拖动每一块的位置。当用户把所有的小块都放置到正确的位置时，游戏结束。 加分项：可以在拖动拼图时有吸附的效果。可以利用CSS添加适当的动画效果。
js拼图游戏源代码供大家参考
04-30
js拼图游戏源代码由大家参考,有问题的可以提出大家一起来解决它
js实现九宫格拼图小游戏
12-10
效果如下： 代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符，给所有的元素去掉默认样式，因为有的浏览器会默认加上一些样式，这可能会给布局带来问题 */ body{ width: 100%; height: 100%; } /* 给body设置100%的高度和宽度，这样就会根据浏览器屏幕大小自动适配 */ #c
JS拼图游戏源码
05-06
JS拼图游戏源码
原生js拼图
Welcome to my csdn!
01-23 324
原生js拼图 可以选择难度等级，对应的难度会增加，并且记录步数，一共3个等级。 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拼图游戏</title> <link rel="stylesheet" href="css/style.css" /> <script src="js/PT.js"></sc
Javascript: 实现拼图游戏
linwh8的博客
10-24 1万+
注：本人网页项目github：linwh8需求规格： 1.UI(10分)： UI与效果图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI(可以使用其他图片)； 2.正常移动(20分)： 点击空白旁边的图块，图块移动空白处。点击其他图块，不会移动； 3.图块图片正常(20分)：无论如何移动 ，每个图块上的图片都保持不变； 4.拼图结束(10分): 当拼回原图时，提示用户游戏获
20多行js代码写一个最简单的3x3拼图游戏
无心的专栏
12-19 1万+
按惯例，截图是必须的： 玩法：方向键 胜负：排列出12345678_就算胜利了！ 兼容各浏览器，使用了“逆序和”判定，来保证一定有解。 接下来是js代码，不需要HTML配合了，直接放入body就行了。直接体验就轻轻点击这里。 <script> function gd(){ var arr=[1,2,3,4,5,6,7,8].sort(function(){...
Javascript的拼图游戏代码
03-30
抱歉，我是一名AI语言模型，无法提供完整的Javascript的拼图游戏代码。但是，我可以给您提供一个基本的游戏框架，供您参考和扩展。 HTML代码： ``` <!DOCTYPE html> 拼图游戏 #puzzle { display: flex; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值