Implementing a puzzle game with js

This article shares the specific code of js to implement the puzzle game for your reference. The specific content is as follows

1. What is js puzzle?

Small games made with js

2. Usage steps

1. Create a div box first

 <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. Write js

<script>
  // Get the tag var box = document.getElementById("box");
  var arrs = [];
  // Loop to create 16 objects and add them to the array 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"

      // Create object var pox = {
        left: 200* i,
        top:200*j,
      }
      // Add the created object to the array if( i !== 3 || j !== 3 ){
        arrs.push(pox)
      }else{
        divNode.style.background = "none";
        divNode.className = "space"
      }
      box.appendChild(divNode)
    }
  }
  console.log(arrs);

  // Randomly extract objects 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);
  }

  //Keyboard event document.onkeyup = function(event) {
    // Get the key pressed 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"
      }
    }
     
    // Next}else if (key == 40) {
      
      var x = box.querySelector(".space").style.left
      var y = box.querySelector(".space").style.top
      
      // Traverse all small divs, find the one above the blank and assign it to 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"
        }
      }

    // left }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"
      }
    }
     

    // right }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>

Rendering

Finished rendering

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: