网页拼图游戏(html css js)实现 |
您所在的位置：网站首页 › 九宫格网页版登录 › 网页拼图游戏(html css js)实现 |
网页拼图游戏(html css js)实现
|
注：学习的实验楼中的 网页拼图课程 基于 HTML+CSS+JavaScript 实现网页版的拼图游戏。实现过程中将用到 HTML5，CSS3 及 JavaScript 相关知识。完成这个项目，可以进一步扎实前端基础知识。 九宫格拼图相信大家都玩过了，看似简单的小游戏，但实现起来其实并不那么简单。在以前，写程序是程序员的专利，只有他们才能做出一个软件来。但是现在不同了。科技的进步和经济的发展，使得每个人都可以使用计算机。特别是 HTML5 和 CSS3 的流行，使得制作一个基本的游戏变得简单。 难度一般，适合刚学完前端基础（HTML+CSS+JavaScript）的同学作为练手项目。 源码： 拼图游戏 *{ padding: 0; margin: 0; border: 0; } /* *是通配符，给所有的元素去掉默认样式，因为有的浏览器会默认加上一些样式，这可能会给布局带来问题 */ body { width: 100%; height: 100%; } body{ width:100%; height: 100%; background: url(picture/timg.jpg) no-repeat; } #up{ font-size: 25px; font-family: 幼圆; color: darkgray; } /* 给body设置100%的高度和宽度，这样就会根据浏览器屏幕大小自动适配 */ #container{ position: relative; width: 620px; height: 450px; margin: 0 auto; margin-top: 100px; border-radius: 1px; } /* 这是包裹所有元素的DIV，给他设置620px的宽和450px的高，这个大小可以设置为更大，但是不能小，至少要能包含里面所有的元素 */ #game{ position: absolute; width: 450px; height: 450px; border-radius: 5px; display: inline-block; /*background-color: #ffe171;*/ box-shadow: 0 0 10px #ffe171; } /* 这是游戏区的DIV，这个大小是计算出来的，取决于你的小方块的大小。这里我们设置小方块的大小为150px 150px，所以这个大小是150px*3，为450px */ #game div{ position: absolute; width: 149px; height: 149px; box-shadow: 1px 1px 2px #777; background-color: #20a6fa; color: white; text-align: center; font-size: 150px; line-height: 150px; cursor: pointer; -webkit-transition: 0.3s;/*浏览器前缀，兼容其他浏览器 chrome*/ -moz-transition: 0.3s;/*firefox*/ -ms-transition: 0.3s;/*ie*/ -o-transition: 0.3s;/*opera*/ transition: 0.3s; } /* 这就是小方块的大小了，定位为绝对定位，这样改变位置不会影响其他元素的位置。宽高都是149px。注意了，我们还设置了box-shadow:1px 1px 2px #777 ； 它还有边框阴影，所以149px 加上边框1px，它的总宽度是150px 下面的transition：0.3s是设置过渡时间，这是css3的属性，它会让属性改变呈现过渡动画，所以 当我们改变方块的位置时，它会有一个动画，我们不必自己编写动画函数，这回让你疯狂*/ #game div:hover{ color: #ffe171; } /*给方块设置鼠标悬停动画，当鼠标悬停在元素上面时，会用这里的属性替换上面的属性，移开后又会变为原来的，这里我们是把字体颜色改变*/ #control{ width: 150px; height: 450px; display: inline-block; float: right; } /*控制区，display:inline-block会让元素呈现块状元素的特性，使得可以改变大小，同时也会具有行内元素的特性，使得不会占据一行空间，float:right让元素浮动到 右边*/ #control p{ height: 25px; font-size: 20px; color: #222; margin-top: 10px; } /*设置控制区按钮的共同样式*/ #start{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; cursor: pointer; } /*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状，pointer是手型*/ #reset{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/ border-radius: 5px;/*圆角属性*/ box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/ text-align: center;/*文字居中*/ cursor: pointer; } /*给Reset按钮设置属性*/ #d1{ left: 0px; } #d2{ left: 150px; } #d3{ left: 300px; } #d4{ top: 150px; } #d5{ top: 150px; left: 150px; } #d6{ top: 150px; left: 300px; } #d7{ top: 300px; } #d8{ left: 150px; top: 300px; } /*这是预先给每个小方块按照顺序排好位置*/ var time=0; //保存定时时间 var pause=true; //设置是否暂停标志，true表示暂停 var set_timer; //设置定时函数 var d=new Array(10); //保存大DIV当前装的小DIV的编号 // 每个小div可以去的位置，比如第一块可以去2,4号位置 var d_direct=new Array( //为了逻辑更简单，第一个元素我们不用，我们从下标1开始使用 [0], [2,4], [1,3,5], [2,6], [1,5,7], [2,4,6,8], [3,5,9], [4,8], [5,7,9], [6,8] ); // 第一个表示left,第二个表示top，比如第一块的位置为let:0px,top:0px var d_posXY=new Array( [0], [0,0], [150,0], [300,0], [0,150], [150,150], [300,150], [0,300], [150,300], [300,300] ); //大DIV编号的位置 d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; //默认按照顺序排好，大DIV第九块没有，所以为0，我们用0表示空白块 //移动函数 function move(id){ var i=1; for(i=1; i 1 2 3 4 5 6 7 8总用时 开始 重来 最后的实现结果： |
【本文地址】
今日新闻 |
推荐新闻 |