拼图游戏
<!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>
资料
link