用js实现拼图小游戏

本文实例为大家分享了js实现拼图小游戏的具体代码，供大家参考，具体内容如下

一、js拼图是什么？

用js做得小游戏

二、使用步骤

1、先创建div盒子

 <style>
    div,body{
      margin: 0;
      height: 0;
    }
    #box{
      width: 800px;
      height: 800px;
      background-color: burlywood;
      position: relative;
    }
    #box div {
      width: 200px;
      height: 200px;
      background: url(./imgs/bg.jpg) no-repeat;
      position: absolute;

    }

  </style>
</head>
<body>
  <div id="box"></div>
</body>

2.写js

<script>
  // 获取标签
  var box = document.getElementById("box");
  var arrs = [];
  // 循环创建16个对象，添加到数组中
  for(var i = 0; i < 4; i++){
    for(var j = 0; j < 4; j++){
      var divNode = document.createElement("div")
      divNode.style.top = 200 * i + "px"
      divNode.style.left = 200 * j + "px"

      // 创建对象
      var pox = {
        left: 200* i,
        top:200*j,
      }
      // 创建好的对象添加到数组里
      if( i !== 3 || j !== 3 ){
        arrs.push(pox)
      }else{
        divNode.style.background = "none";
        divNode.className = "space"
      }
      box.appendChild(divNode)
    }
  }
  console.log(arrs);

  // 随机抽取对象
  for(var i = 0; i < 15; i++){
    var ranNum = parseInt(Math.random() * (15 - i))
    var x = arrs[ranNum].left;
    var y = arrs[ranNum].top;

    box.children[i].style.backgroundPosition = - x + "px "+ - y + "px";
    arrs.splice(ranNum,1);
  }

  // 键盘事件
  document.onkeyup = function(event) {
    // 得到按的那个键
    var key = event.keyCode
    // 上
    if (key == 38) {

      var x = box.querySelector(".space").style.left
     var y = box.querySelector(".space").style.top
    for (var i = 0; i < 16; i++) {
      if (parseInt(box.children[i].style.top) == parseInt(y) - 200 && parseInt(box.children[i].style.left) == parseInt(x)) {
        box.children[i].style.top = y
        box.querySelector(".space").style.top = parseInt(y) - 200 + "px"
      }
    }

    // 下
    }else if (key == 40) {

      var x = box.querySelector(".space").style.left
      var y = box.querySelector(".space").style.top

      // 遍历所有小div，找到空白上面得那张 赋值 为y
      for(var i = 0; i < 16; i++){
        if (parseInt(box.children[i].style.top) == parseInt(y) + 200 && parseInt(box.children[i].style.left) == parseInt(x)) {
          box.children[i].style.top = y
        box.querySelector(".space").style.top = parseInt(y) + 200 + "px"
        }
      }

    // 左
    }else if (key = 38) {
      var x = box.querySelector(".space").style.left
     var y = box.querySelector(".space").style.top
    for (var i = 0; i < 16; i++) {
      if (parseInt(box.children[i].style.left) == parseInt(x) - 200 && parseInt(box.children[i].style.top) == parseInt(y)) {
        box.children[i].style.left = x
        box.querySelector(".space").style.left = parseInt(x) - 200 + "px"
      }
    }

    // 右
    }else if (key = 39) {
      var x = box.querySelector(".space").style.left
     var y = box.querySelector(".space").style.top
    for (var i = 0; i < 16; i++) {
      if (parseInt(box.children[i].style.left) == parseInt(x) + 200 && parseInt(box.children[i].style.top) == parseInt(y)) {
        box.children[i].style.left = x
        box.querySelector(".space").style.left = parseInt(x) + 200 + "px"
      }
    }
    }

  }

</script>

效果图

完成效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如登陆页面 <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetes

  • JS 拼图游戏 面向对象，注释完整。

    在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码 代码如下: <html> <head> <title>JS拼图游戏</title> <style>     body{         font-size:9pt;     } table{ border-collapse: collapse; } input{     width:20px; } </style> </he

  • JS写的数字拼图小游戏代码[学习参考]

    复制代码 代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;

  • JS实现滑动拼图验证功能完整示例

    本文实例讲述了JS实现滑动拼图验证功能.分享给大家供大家参考,具体如下: 先看一下效果图: 设置画布滑块属性 const l = 42, // 滑块边长 r = 10, // 滑块半径 w = 310, // canvas宽度 h = 155, // canvas高度 PI = Math.PI const L = l + r * 2 // 滑块实际边长 设置背景图片: 图片链接地址可以自行更换 function getRandomImg() { return 'https://picsum.ph

  • 使用 Node.js 模拟滑动拼图验证码操作的示例代码

    使用 Node.js 模拟滑动拼图验证码操作的示例代码

    近几年,网页上各种新型验证码层出不穷,其中一种比较常见的是滑动验证码,比如下图这种. 本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法. 我们需要三个依赖库: puppeteer. Resemble.js 以及canvas.其中 puppeteer 用于打开并操作页面, Resemble.js 及 canvas 用于寻找滑动验证码的终点位置.相关依赖如下: "dependencies": { "canvas": "^1.6.7", &qu

  • js实现九宫格拼图小游戏

    js实现九宫格拼图小游戏

    效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

  • 图片拼图记忆力测试游戏，网页+JS版

    记忆力测试游戏,网页+JS版,规则:图被分割成15块. 每次随机给出一块,在问号区域中找到它的位置并单击该位置.每选对一个区域得一分,得15分才算获胜,每次游戏只有15次机会. 记忆测试 .20pt{font-size:20pt;color:#de3076} "; } if (N) { Styl=" ID="+divId+" top="+divY+" left="+divX+" width="+divW+"

  • js+html5实现可在手机上玩的拼图游戏

    本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc

  • JS快速实现移动端拼图游戏

    JS快速实现移动端拼图游戏

    最近做的一个简陋的手机端拼图游戏,代码简单易懂,废话不多说了,让大家证明一切吧! 先看下效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" id="viewport" cont

  • js+canvas实现滑动拼图验证码功能

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q

随机推荐