<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.title{
font-size: 30px;
font-family: "楷体";
text-align: center;
width: 800px;
margin: 20px auto;
font-weight: bold;
text-shadow:6px 6px 20px #333333;
}
.game{
width: 800px;
height: 500px;
margin: 0px auto;
}
.main{
width: 500px;
height: 500px;
border: 1px solid gray;
float: left;
box-shadow:6px 6px 20px #333333;
}
.thumb{
float: right;
width: 250px;
height: 250px;
border: 1px solid gray;
box-shadow:6px 6px 20px #333333;
}
.thumb img{
width: 250px;
height: 250px;
}
.options{
margin: 10px 0px;
}
.options .left{
float: left;
}
.options .right{
float: right;
}
.btn_area{
clear: both;
}
.btn_area .start{
margin-top: 10px;
width: 100%;
border-radius: 5px;
border: 1px solid #66CCDD;
background: #66CCFF;
color: white;
letter-spacing: 10px;
font-weight: bold;
padding: 4px 10px;
}
.item{
padding: 5px 0px;
}
.footer{
margin: 0px 0px;
text-align: center;
font-size: 14px;
padding-top: 30px;
}
.tip{
margin-top: 20px;
}
.tip span{
color: red;
font-weight: bold;
}
</style>
<script>
//统计步数
var step = 0;
//难度
var level = 2;
//开始拖动
var next;
function dragstart(ev){
ev.dataTransfer.setData("Text", ev.target.id);
next = ev.target.nextSibling;
}
//拖动过程
function drapover(ev){
ev.preventDefault();
ev.target.style.opacity = 0.5;
}
//离开目标元素
function dragleave(ev){
ev.preventDefault();
ev.target.style.opacity = 1;
}
//放下
function drop(ev){
ev.preventDefault();
ev.target.style.opacity = 1;
var oldId = ev.dataTransfer.getData("Text");
var oldObj = document.querySelector("#" + oldId);
oldObj.parentNode.insertBefore(oldObj, ev.target.nextSibling);
ev.target.parentNode.insertBefore(ev.target, next);
step ++;
isFinished();
}
//判断是否已结束
function isFinished(){
var main = document.querySelector(".main");
var divs = main.querySelectorAll("div");
var f = true;
for(var i = 0; i < divs.length - 1; i ++){
var id = divs[i].id;
if(id != "d" + i){
f = false;
break;
}
}
if(f){
setTimeout(finish, 200);
}
}
function finish(){
alert("图已拼好！一共走了" + step + "步！");
}
//创建碎片，n * n
function g(n){
var main = document.querySelector(".main");
//创建n * n个碎片
var imgs = [];//1----------
for(var i = 0; i < n * n; i ++){
var div = document.createElement("div");
//设置样式
div.style.float = "left";
var w = 500 / n; //宽
var h = 500 / n; //高
div.style.width = w + "px";
div.style.height = h + "px";
div.style.background = "url(" + getImage() +")";
div.style.backgroundPositionX = -(i % n * w) + "px";
div.style.backgroundPositionY =
-Math.floor(i / n) * w + "px";
div.id = "d" + i;
div.draggable = true;//允许拖动
//绑定事件
div.ondragstart = dragstart;
div.ondragover = drapover;
div.ondragleave = dragleave;
div.ondrop = drop;
//main.appendChild(div);//2----------
imgs.push(div);//3----------
}
return imgs;//4----------
}
//生成n * n个不重复的随机数
function s(imgs){
var all = imgs.length;
var arr = [];
while(arr.length < all){
var n = Math.floor(Math.random() * all);
if(arr.indexOf(n) == -1){
arr.push(n);
}
}
return arr;
}
//随机打碎
function start(){
var n = getSize();
var imgs = g(n);//获取碎片
var arr = s(imgs);//获取随机数
init();
var main = document.querySelector(".main");
for(var i = 0; i < arr.length; i ++){
main.appendChild(imgs[arr[i]]);
}
var temp = document.createElement("div");
main.appendChild(temp);
}
//删除所有的碎片
function clearAll(){
var main = document.querySelector(".main");
var divs = main.querySelectorAll("div");
for(var i = 0; i <divs.length; i ++){
main.removeChild(divs[i]);
}
}
//初始化
function init(){
step = 0;
clearAll();
}
//切换图片
function changeImg(r){
var v = r.value;
document.querySelector("#thumb").src = v + ".jpg";
document.querySelector(".title").innerHTML = "拼图游戏 - " + r.value;
}
//获取选中的图片
function getImage(){
var itemImgs = document.querySelectorAll(".item_img");
for(var i = 0; i < itemImgs.length; i ++){
if(itemImgs[i].checked){
return itemImgs[i].value + ".jpg";
}
}
}
//获取选中的尺寸
function getSize(){
return level;
}
//改变难度+
function setLevelUp(){
level ++;
updateTip();
}
//改变难度-
function setLevelDown(){
if(level == 2){
alert("已是最低难度，不能再小了！");
return;
}
level --;
updateTip();
}
//更新提示
function updateTip(){
var span = document.querySelector(".tip span");
span.innerHTML = level + " × " + level;
}
</script>
</head>
<body onload="start()">
<div class="title">拼图游戏 - Angelababy</div>
<div class="game">
<div class="main"></div>
<div class="thumb">
<div><img id="thumb" src="Angelababy.jpg"/></div>
<div class="options">
<div class="left">
<div class="item">难度</div>
<div>
<div>
<input onclick="setLevelUp()" name="item_mi" class="item_mi" type="button" value="增加+">
<input onclick="setLevelDown()" name="item_mi" class="item_mi" type="button" value="降低-">
<div class="tip">难度值：<span>2 × 2</span></div>
</div>
</div>
</div>
<div class="right">
<div class="item">切换图片</div>
<div>
<div><label><input name="item_img" class="item_img" type="radio" onclick="changeImg(this)" value="Angelababy" checked="checked">Angelababy</div></label>
<div><label><input name="item_img" class="item_img" type="radio" onclick="changeImg(this)" value="范冰冰">范冰冰</div></label>
<div><label><input name="item_img" class="item_img" type="radio" onclick="changeImg(this)" value="迪丽热巴">迪丽热巴</div></label>
<div><label><input name="item_img" class="item_img" type="radio" onclick="changeImg(this)" value="赵丽颖">赵丽颖</div></label>
<div><label><input name="item_img" class="item_img" type="radio" onclick="changeImg(this)" value="景甜">景甜</div></label>
<div><label><input name="item_img" class="item_img" type="radio" onclick="changeImg(this)" value="杨幂">杨幂</div></label>
</div>
</div>
</div>
<div class="btn_area">
<input class="start" type="button" value="开始" onclick="start()"/>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
