基于javascript制作经典传统的拼图游戏
本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码，供大家参考，具体内容如下
效果图：
拼出你喜欢的白雪公主和七个小矮人
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>pingtu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{ margin-bottom:0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
border: 0px;
}
#box{
position:absolute;
top:0px;
left:0px;
width: 300px;
height: 300px;
border: 1px solid red;
}
#box img{
float:left;
width: 100px;
height: 100px;
}
#box .pj,#box .p2,#box .p3,#box .p4,#box .p5,#box .p6,#box .p7,#box .p8,#box .p9{
position: absolute;
}
#box .pj,#box .p2,#box .p3{
top:0px;
}
#box .p4,#box .p5,#box .p6{
top:100px;
}
#box .p7,#box .p8,#box .p9{
top:200px;
}
#box .pj,#box .p4,#box .p7{
left:0px;
}
#box .p2,#box .p5,#box .p8{
left:100px;
}
#box .p3,#box .p6,#box .p9{
left:200px;
}
#button{
font-size:25px;
font-weight:20px;
float: left;
position: absolute;
top:400px;
left:100px;
}
#output{
position:absolute;
width: 270px;
height: 170px;
top:130px;
left: 350px;
}
#output img{
height: 170px;
width:170px;
float: right;
}
#notice{
position: absolute;
left: 650px;
top:150px;
width: 150px;
height: 120px;
border: 1px solid blue;
font-size: 15px;
}
</style>
</head>
<body>
<div id="box">
<img class="pj" src="img1/pj.png">
<img class="p2" src="img1/p2.png">
<img class="p3" src="img1/p3.png">
<img class="p4" src="img1/p4.png">
<img class="p5" src="img1/p5.png">
<img class="p6" src="img1/p6.png">
<img class="p7" src="img1/p7.png">
<img class="p8" src="img1/p8.png">
<img class="p9" src="img1/p9.png">
</div>
<div id="output">
目标图形：
<img alt="" src="img1/output.jpg">
</div>
<div id="notice">
游戏提示：<br>
<br>
点击“开始新游戏”开始游戏。鼠标点击黑色方块周围的方块时，即可移动方块。。
</div>
<input type="button" id="button" value="开始新游戏">
<script type="text/javascript">
var times=0;
var src= Array();
src.push("img1/pj.png");
src.push("img1/p2.png");
src.push("img1/p3.png");
src.push("img1/p4.png");
src.push("img1/p5.png");
src.push("img1/p6.png");
src.push("img1/p7.png");
src.push("img1/p8.png");
src.push("img1/p9.png");
function addLoadEvent(func) {
//为window添加新事件函数
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
};
}
}
function getInfor(){
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
for(var i=0;i<Arrps.length;i++){
Arrps[i].onclick=function(){
if (this.getAttribute("src")=="img1/pj.png");
changeP(this,Arrps);
};
}
}
function tostar(){
var butt=document.getElementById("button");
butt.onclick=function(){
toST();
times=0;
getInfor();
};
}
function changeP(ob,Arrps){
var Ni=0;
var Nj=0;
for(var i=0;i<Arrps.length;i++){
if(Arrps[i]==ob)
Ni=i;
if(Arrps[i].getAttribute("src")=="img1/pj.png")
Nj=i;
}
if(Math.abs(Ni-Nj)==3)
{
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","img1/pj.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}else if((Ni-Nj)==1&&(Ni%3)!=0){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","img1/pj.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}else if((Ni-Nj)==-1&&(Ni%3)!=2){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","img1/pj.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}
}
function ifright(){
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
for(var i=0;i<src.length;i++){
if(src[i]!=Arrps[i].getAttribute("src")) return;
}
if(times<50)
alert("恭喜，你成功了。。"+"\n"+"仅用了"+times+"步哦");
else alert("恭喜，你成功了。。"+"\n"+"用了"+times+"步");
}
function toST(){
var srcUsing= new Array();
for(var p=0; p<src.length;p++){
srcUsing[p]=src[p];
}
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
var newArry= new Array();
for(var i=0;i<Arrps.length;i++){
newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
}
for(var j=0;j<newArry.length;j++) {
//var newarrValue=newArry[j];
Arrps[j].setAttribute("src",String(newArry[j]));
}
}
addLoadEvent(tostar);
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助，让大家动手亲自实现自己最喜爱的游戏——拼图。
相关推荐
-
javascript html5移动端轻松实现文件上传
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">
-
移动端翻页插件dropload.js（支持Zepto和jQuery）
dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服务端一次性返回所有数据,往往还要支持服务端分页,搜索,排序,多条件筛选等功能.(比较类似美团美食的界面) 一.解决方案 改进1:由于有分页,搜索,排序,多条件筛选功能,可能都不需要上拉,进到页面就没有数据. 例如:搜索一个服务端不存在的名字. 所以,添加接口设置setHasData. MyDropLoad.prototype.setHasData = function(i
-
javascript结合Flexbox简单实现滑动拼图游戏
滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片. 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等.但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大.关于Flexbox的介绍可以点击这里. 这个游戏中要用的是Flexbox布局的order属性,order属性可以用来控制Flex项目的顺序. 这里我用九个canvas元素来把图片分成九等分,也可以用其他方法,比如背景图片定位: <d
-
学习使用jquery iScroll.js移动端滚动条插件
大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM
-
js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 二:安卓设备:原理:判断是否认识这个协议,认识则直接跳转,不认识
-
Listloading.js移动端上拉下拉刷新组件
listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll
-
JS快速实现移动端拼图游戏
最近做的一个简陋的手机端拼图游戏,代码简单易懂,废话不多说了,让大家证明一切吧! 先看下效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" id="viewport" cont
-
javascript实现移动端上的触屏拖拽功能
本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi
-
基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列在下了: 1.随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次 2.点击一个数字方块后,如其上下左右有一处为空,则两者交换位置 3.格子每移动一步,我们都需要校验其是否闯关成功 4.点击重置游戏按钮后需对拼图进行重新排序 以上便是本实例的主要功能点,可见游戏功能并不复杂,我们只需一个个攻
-
JavaScript实现移动端滑动选择日期功能
本文实例为大家分享了JavaScript实现滑动选择日期的具体代码,供大家参考,具体内容如下 $(page).on('touchmove','#touchMoveTime',function (event) { touchMove(event); }); scrollBarInit(); //初始化 function scrollBarInit() { var defaultValue = 3,maxValue = 30; var myDate = new Date(); var year =
-
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc