拼图游戏

最新推荐文章于 2024-05-25 19:16:46 发布

原创最新推荐文章于 2024-05-25 19:16:46 发布 · 552 阅读

0 ·

CC 4.0 BY-SA版权

HTML, CSS, JS, Django 专栏收录该内容

4 篇文章

订阅专栏

拼图游戏

<!doctype html>
<html>
<head>
<title>拼图游戏</title>
<style type="text/css">
body > div {
  margin: auto;
  border: 1px solid gold;
  padding: 5%;
}


.box {
    margin: auto;
    width: 500px;
    padding: 0;
    border: 1px solid black;
    display: grid;
    grid-template-columns: 250px 250px ;
    grid-template-rows: 250px 250px ;
}

</style>
<script type="text/javascript">
var num=0;
var t=0;
var Drop=document.querySelectorAll(".s")
//function called when drag starts
function drag(event) {
    //for old IE compatibility
    var theEvent=event || window.event;
    //remember what to drag - id of the element, store to event object
    theEvent.dataTransfer.setData("Text", theEvent.target.id);
}
//function called when element drops
function drop(event) {
    var theEvent=event || window.event;
    //get a reference to the element being dragged - id
    var theData = theEvent.dataTransfer.getData("Text");
    //get and copy the element
    var theDraggedElement = document.querySelector("#"+theData).cloneNode();
    //add it to the drop element
    theEvent.target.appendChild(theDraggedElement);
    //is it correct?
    console.log(theData);
    console.log(theEvent.target.id);
    if (theData ==theEvent.target.id) {
        num+=1;
    }
    t+=1;
    if(t==4){
      console.log(num);
      check();
    }
}
function check(){
  if (num ==4) {
    document.querySelector("#message").innerHTML="Congratulation!";
  }
  else {
    document.querySelector("#message").innerHTML="Oops! Try again.";
  }
}
//function called to allow drop ondragover
function allowDrop(event) {
    var theEvent=event || window.event;
    //allow drop - default is not
    theEvent.preventDefault();
}
function init() {
  var Drop=document.querySelectorAll(".s")
    //randomize the correct answer
    document.querySelector("#message").innerHTML="";

    for(var i=0;i<4;i++){
      Drop[i].οndragοver=allowDrop;
      Drop[i].οndrοp=drop;
    }

}
</script>
</head>

<body οnlοad="init();">
<h1>Drag and Drop</h1>
<div>
<div id="img">
      <img id="a" alt="card to drag" src="try1.jpg" draggable=true οndragstart="drag(event);">
      <img id="b" alt="card to drag" src="try2.jpg" draggable=true οndragstart="drag(event);">
      <img id="c" alt="card to drag" src="try3.jpg" draggable=true οndragstart="drag(event);">
      <img id="d" alt="card to drag" src="try4.jpg" draggable=true οndragstart="drag(event);">

</div>
<div class="box">
  <div class="s" id="a"></div>
  <div class="s" id="b"></div>
  <div class="s" id="c"></div>
  <div class="s" id="d"></div>
</div>

<div id="message">
</div>

</div>