fifteen_puzzle

来源：互联网发布：跨河水准测量数据整理编辑：程序博客网时间：2024/06/05 09:55

制作一个简单的拼图游戏

这几天抽时间完成了web课程的制作拼图游戏的作业，可以给大家分享一下大致的思路。

1.通过background-position定位每一块图片，从而在CSS中实现对一整块图片被分割，而不是事先通过修图软件把图片提前进行分割，然后再放在页面里。

2.关于使用随机数打乱地图，我个人的想法是，每一次产生随机数时候先判断可不可以使用这个随机数，例如空白的那一块是第16块，那么第16块只能和左侧第15块和上侧第12块交换，和其他的块都不可以交换，这样就可以保证拼图一定可以被还原。（请参考JS的random_pos函数与pic_move函数）

3.关于自动还原，我的想法是，通过使用数组存下产生随机数打乱地图时候可行的id或者是你点击鼠标进行交换时候的id，然后需要还原时候依次弹出。（详情请参考do_find函数）

效果图

这里写图片描述

（注：点击start开始游戏，点击help自动还原拼图）

HTML文件

<!DOCTYPE html><html>    <head>        <title>简单拼图游戏</title>        <link rel = "stylesheet" href = "fifteen_puzzle.css" >        <script type = "text/javascript" src = "fifteen_puzzle.js"></script>    </head>    <body>        <h1>SImple Jigsaw Puzzle</h1>        <div id = "info">            <div id = "Time">                <div class = "right">Time:</div>                <input type = "text" value = "00:00:00" id = "time" onfocus="blur()">            </div>            <div id = "Step">                <div class = "left">Step:</div>                <input type = "text" value = "0" id = "step" onfocus="blur()">            </div>        </div>        <div id = "whole">            <div id = "result"></div>            <div id = "picture"></div>        </div>        <div class = "divide">            <div id="restart">Start</div>            <div id="change_image">Help</div>        </div>    </body></html>

CSS文件

body{    background: url("6.jpg") repeat-x;    background-size: 100% 120%;}h1{    text-align: center ;    color: #CC99FF ;    font-size: 30px ;    font-family: Arial ;}#info{    width: 150px ;    height: 75px ;    margin: 0px auto ;    position: relative;}#right{    position: relative;    left:-5px ;}#Step,#Time{    color:#CC00FF;    width: 120px;    height: 40px;    line-height: 40px;    font-size: 18px;}#time{    color: #CC33CC;    background: transparent;     text-align: center ;    border-radius: 15px ;    width: 100px ;    position: relative;    left:calc(50%);    top:-38px;    font-size: 18px ;    border: 0px ;}#step{    color:#CC33CC;    background:transparent;     border-radius: 15px ;    text-align: center ;    width: 100px ;    position: relative;    left:calc(50%);    top:-38px;    font-size: 18px ;    border: 0px ;}#picture, #restart, #result, #change_image {       margin-top: 10px;    margin-left: auto;    margin-right: auto;     margin-bottom: 10px ;    text-align: center ;}#change_image,#restart{    position: relative;    top:45px ;}#picture{    border-radius:10px ;    border:5px solid #CCCCFF;    position: relative;    width: 340px ;    height: 340px ;    top:20px;    bottom: -50px;}.picture_part0{    float: left;    border: solid 1px #969696;    opacity: 0.9;}#result{    color: #CC00FF;    border: 5px solid #CCCCFF;     border-radius:15px ;    position: relative;    top:7px;    width: 350px ;    height:22px;}#restart, #change_image {    border-radius: 15px ;    cursor: pointer;    width: 120px;    height: 30px;    line-height: 30px;    background-color: #CC99FF;    color: white;    font-size: 18px;    opacity:0.7;}.picture_part0 {    background: url("7.jpg") no-repeat;    background-size: 400% 400% ;}#restart:hover, #change_image:hover {    opacity: 1;}#_position_1 {    background-position: 0px 0px;}#_position_2 {    background-position: -85px 0px; }#_position_3 {    background-position: -170px 0px;}#_position_4 {    background-position: -255px 0px; }#_position_5 {    background-position: 0px -85px;}#_position_6 {    background-position: -85px -85px; }#_position_7 {    background-position: -170px -85px;}#_position_8 {    background-position: -255px -85px; }#_position_9 {    background-position: 0px -170px;}#_position_10 {    background-position: -85px -170px; }#_position_11 {    background-position: -170px -170px;}#_position_12 {    background-position: -255px -170px; }#_position_13 {    background-position: 0px -255px;}#_position_14 {    background-position: -85px -255px; }#_position_15 {    background-position: -170px -255px;}#_position_16 {    background-position: -255px -255px; }#_position_1:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_2:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_3:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_4:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_5:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_6:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_7:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_8:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_9:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_10:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_11:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_12:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_13:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_14:hover {    transform: scale(1.05);    transition: all 250ms;}#_position_15:hover {    transform: scale(1.05);    transition: all 250ms;}.position_1 {    height: 83px;    width: 83px;    display: inline-block;}.position_2 {    height: 83px;    width: 83px;    display: inline-block;}.position_3 {    height: 83px;    width: 83px;    display: inline-block;}.position_4 {    height: 83px;    width: 83px;    display: inline-block;}.position_5 {    height: 83px;    width: 83px;    display: inline-block;}.position_6 {    height: 83px;    width: 83px;    display: inline-block;}.position_7 {    height: 83px;    width: 83px;    display: inline-block;}.position_8 {    height: 83px;    width: 83px;    display: inline-block;}.position_9 {    height: 83px;    width: 83px;    display: inline-block;}.position_10 {    height: 83px;    width: 83px;    display: inline-block;}.position_11 {    height: 83px;    width: 83px;    display: inline-block;}.position_12 {    height: 83px;    width: 83px;    display: inline-block;}.position_13 {    height: 83px;    width: 83px;    display: inline-block;}.position_14 {    height: 83px;    width: 83px;    display: inline-block;}.position_15{    height: 83px;    width: 83px;    display: inline-block;}.position_16{    opacity: 0;    background-image: none;    height: 83px;    width: 83px;    display: inline-block;}.divide{    position: relative;    top:20px;}

JS文件

var judge = false; //设置开始前不可以点击图片var stop_judge = true; //设置按钮可否点击var timeFun = 0; //设置图像变量问题var solution = []; //设立一个存入解决方案的栈var count = 0;var n_sec = 0; //秒var n_min = 0; //分var n_hour = 0; //时var show_time = document.getElementById("time"); //插入显示时间变量var step_show = document.getElementById("step"); //插入显示步数变量/*使用onload解决页面显示问题*/window.onload = function() {    create_pic();    document.getElementById("restart").addEventListener("click", random_pos);    document.getElementById("change_image").addEventListener("click", findSolution);};/*创立二维数组时事更新id与类的位置*/var n_timer = timer();var creat_array = new Array(); //设置最初的数组var build_array = new Array(); //设置判断数组function create_pic() {    picture = document.getElementById("picture");    for (var i = 1; i <= 16; i++) {        var part = document.createElement("div");        part.addEventListener("click", pic_move);        part.className = "picture_part" + count + " position_" + i;        picture.appendChild(part);        part.id = "_position_" + i;        creat_array[i - 1] = part;    }    build_two_array();}function build_two_array() {    for (var i = 0; i < 4; i++) {        build_array[i] = new Array();    }    var count = 0;    for (var i = 0; i < 4; i++) {        for (var j = 0; j < 4; j++) {            build_array[i][j] = creat_array[count];            count++;        }    }}/*检查函数*/function check() {    var count = 1;    for (var i = 0; i < 4; i++) {        for (var j = 0; j < 4; j++) {            var partId = "_position_" + count;            if (build_array[i][j].id != partId) {                document.getElementById("result").innerText = "Playing";                return;            }            count++;        }    }    document.getElementById("result").innerText = "You win";    judge = false;    return;}/*还原图形的函数*/function do_find() {    document.getElementById("result").innerText = "Playing";    if (solution.length > 0) {        var step_first = document.getElementById("step");        var now_step = parseInt(step_first.value);        now_step += 1;        var temp = now_step.toString();        step.value = temp;        var tmp = solution.pop();        var target_pic_offset = document.getElementById(tmp);        var blank_pic_offset = document.getElementById("_position_16");        var str = blank_pic_offset.className;        blank_pic_offset.className = target_pic_offset.className;        target_pic_offset.className = str;        var strId = blank_pic_offset.id;        blank_pic_offset.id = target_pic_offset.id;        target_pic_offset.id = strId;    }    if (solution.length == 0) {        check();        clearInterval(timeFun);        document.getElementById("restart").addEventListener("click", random_pos);        document.getElementById("change_image").addEventListener("click", findSolution);    }}function findSolution() {    document.getElementById("restart").removeEventListener("click", random_pos);    document.getElementById("change_image").removeEventListener("click", findSolution);    timeFun = setInterval("do_find()", 200);    judge = false;}/* 产生随机数列定义位置 */function random_pos(event) {    judge = true; //标记拼图已经开始，防止未开始图片就发生移动    clearInterval(n_timer);    n_sec = 0;    n_min = 0;    n_hour = 0;    n_timer = timer(); //让时间函数开始运行    step.value = "0";    /* 产生随机数列前先将拼图块对应的位置复位 */    for (var k = 1; k <= 16; k++) {        document.getElementById("_position_" + k).className = "picture_part" + count + " position_" + k;    }    var part = document.getElementById("picture").childNodes;    random_arr = [];    for (var j = 0; j < 15; j++) {        random_arr[j] = j + 1;    }    /* 通过更改ID名类名来改变位置 */    /*使用先判断能否交换的方法，可以保证图一定能被还原*/    for (var i = 0; i < 500; i++) {        var random_value = parseInt(Math.random() * 16 + 1); //产生一个1-16的随机数        var blank_pic_offset = document.getElementById("_position_16"); //找到第十六个被移动的块        var blank_pic_offset_top = blank_pic_offset.offsetTop;        var blank_pic_offset_left = blank_pic_offset.offsetLeft;        var target_pic_offset = document.getElementById("_position_" + random_value); //找到随机数对应的块，判断能否移动        var _offset_top = target_pic_offset.offsetTop;        var _offset_left = target_pic_offset.offsetLeft;        if ((Math.abs(blank_pic_offset_top - _offset_top) > 80) && (Math.abs(blank_pic_offset_top - _offset_top) < 90 && blank_pic_offset_left == _offset_left) ||            (Math.abs(blank_pic_offset_left - _offset_left) > 80 && Math.abs(blank_pic_offset_left - _offset_left) < 90 && blank_pic_offset_top == _offset_top)) {            if (solution[solution.length - 1] == target_pic_offset.id) {                solution.pop();            } else {                solution.push(target_pic_offset.id);            }            var str = blank_pic_offset.className;            blank_pic_offset.className = target_pic_offset.className;            target_pic_offset.className = str;            var strId = blank_pic_offset.id;            blank_pic_offset.id = target_pic_offset.id;            target_pic_offset.id = strId;        }    }}/* 点击图片触发的事件处理器 */function pic_move(event) {    if (judge == false) {        return;    }    var blank_pic_offset = document.getElementById("_position_16");    var blank_pic_offset_top = blank_pic_offset.offsetTop;    var blank_pic_offset_left = blank_pic_offset.offsetLeft;    var _offset_top = this.offsetTop;    var _offset_left = this.offsetLeft;    if ((Math.abs(blank_pic_offset_top - _offset_top) > 80) && (Math.abs(blank_pic_offset_top - _offset_top) < 90 && blank_pic_offset_left == _offset_left) ||        (Math.abs(blank_pic_offset_left - _offset_left) > 80 && Math.abs(blank_pic_offset_left - _offset_left) < 90 && blank_pic_offset_top == _offset_top)) {        if (solution[solution.length - 1] == this.id) {            solution.pop();        } else {            solution.push(target_pic_offset.id);        }        var step_first = document.getElementById("step");        var now_step = parseInt(step_first.value);        now_step += 1;        var temp = now_step.toString();        step.value = temp;        var str = blank_pic_offset.className;        blank_pic_offset.className = this.className;        this.className = str;        var strId = blank_pic_offset.id;        blank_pic_offset.id = this.id;        this.id = strId;        check();    }}/*时间函数*/function timer() {    var ele_timer = document.getElementById("time");    return setInterval(function() {        var str_sec = n_sec;        var str_min = n_min;        var str_hour = n_hour;        if (n_sec < 10) {            str_sec = "0" + n_sec;        }        if (n_min < 10) {            str_min = "0" + n_min;        }        if (n_hour < 10) {            str_hour = "0" + n_hour;        }        var time = str_hour + ":" + str_min + ":" + str_sec;        ele_timer.value = time;        n_sec++;        if (n_sec > 59) {            n_sec = 0;            n_min++;        }        if (n_min > 59) {            n_sec = 0;            n_hour++;        }    }, 1000);}

阅读全文

0 0