精华内容
下载资源
问答
  • h5拼图小游戏

    2017-10-31 18:15:08
    一个用h5+jquery写的拼图小游戏,很简单的样式,没有太多多余的功能。
  • H5拼图小游戏

    2018-11-10 15:47:42
    H5拼图小游戏,自己可修改,可编辑,可学习,可以给你很大的游戏制作启发,非常容易的小游戏
  • H5拼图游戏源码.zip

    2020-03-27 16:02:46
    利用html5实现的拼图小游戏,源码公开无加密,可以直接修改研究,也可以直接下载下来打开浏览器直接运行。
  • 环境卫生,从我做起关注并将「趣谈前端」设为星标每天定时分享技术干货/优秀开源/技术思维我去年曾写过一个用H5,Javascript,css3实现的拼拼乐小游戏,技术栈采用自己封装的类Jqu...

    环境卫生,从我做起

    关注并将「趣谈前端」设为星标

    每天定时分享技术干货/优秀开源/技术思维

    我去年曾写过一个用H5Javascriptcss3实现的拼拼乐小游戏,技术栈采用自己封装的类Jquery框架 Xuery ,其中涉及到了很多经典的 javascript 算法和css3特性 ,对大家的编程能力会有很大的提高,文末我也会放上源码获取方式,大家可以学习体验一下。

    前言

    因为该应用属于 H5 游戏,为了让项目更轻量,我没有采用第三方 ui 库,如果大家想采用基于 vue 的第三方移动端ui库,我给大家推荐几个我之前用过的比较靠谱的:

    • Mint 饿了么推出的移动端ui库

    • NutUI 一套京东风格的移动端组件库

    • muse-ui 基于MaterialUI风格的移动端UI组件

    • cube-ui 滴滴团队开发的移动端UI组件库

    • vant 有赞团队的电商风格的移动端组件库

    • atom-design atom风格的移动端ui组件库

    • mand-mobile 滴滴团队研发的基于金融场景的移动端ui组件库

    以上推荐的都是社区比较完善,bug比较少的组件库,大家可以感受一下。

    回到我们的小游戏开发,考验更多的是大家对 javascript 和css3 的掌握程度,在学习完这篇文章之后相信大家对 javascript 和 css3 的编程能力都会有极大的提升,后面还会介绍如何使用 canvas 实现生成战绩海报图的功能。

    正文

    我们先来看看游戏的预览界面:

    本文的算法实现方式涉及到洗牌算法动态生成n维坐标图片切割等,接下来会介绍核心算法的实现, 至于vue-cli的使用方法,笔者之前也写过对应的文章,大家可以研究学习一下。vue-cli搭建项目方式如下:

    // 安装
    yarn global add @vue/cli
    
    // 创建项目
    vue create pinpinle
    
    // 进入项目并启动
    cd pinpinle && yarn start
    

    关于vue-cli3配置实战,可以移步 一张图教你快速玩转vue-cli3

    H5游戏核心功能介绍

    目前笔者主要整理乐如下核心功能,接下来笔者会一一带大家实现:

    • 实现纯javascript上传预览图片

    • 实现拼图分割功能

    • 实现洗牌算法

    • 实现生成战绩海报功能

    1. 实现纯javascript上传预览图片

    文件上传预览主要采用FileReader API实现,原理就是将file对象传给FileReader的readAsDataURL然后转化为data:URL格式的字符串(base64编码)以表示所读取文件的内容。 具体代码如下:

    // 2.文件上传解析
    let file = $('#file');
    file.on('change', function(e){
        var file = this.files[0];
        var fileReader = new FileReader();
        // 读取完成触发的事件
        fileReader.onload = function(e) {
            $('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')';
            imgSrc = fileReader.result;
        }
    
        file && fileReader.readAsDataURL(file);
    })
    

    2. 实现拼图分割功能

    一般我们处理这种拼图游戏都会有如下方案:

    • 用canvas分割图片

    • 采用n张不同的切好的切片图片(方法简单,但是会造成多次请求)

    • 动态背景分割

    经过权衡,笔者想出了第三种方法,也是自认为比较优雅的方法,即动态背景分割,我们只需要使用1张图片,然后利于css的方式切割图片,有点经典的雪碧图的感觉,如下:本质就是我们设置九个div,每个div都使用同一张图片,并且图片大小等于游戏画布大小,但是我们通过backgroundPosition(背景定位)的方式来实现切割图片。这样做的另一个好处是方便我们实现洗牌逻辑

    3. 实现洗牌算法

    洗牌逻辑依托于随机算法,这里我们结合坐标系,实现一个随机生成二维坐标系的逻辑,然后通过改变每个切片的translate位置,配合过渡动画,即可实现洗牌功能和洗牌动画。

    3.1 数组乱序算法

    数组乱序比较简单,代码如下:

    // 数组乱序
    function upsetArr(arr) {
        arr.sort(function(a,b){
            return Math.random() > 0.5 ? -1 : 1
        })
    }
    

    3.2 洗牌逻辑

    洗牌逻辑基于数组乱序,具体逻辑如下:

    // 洗牌方法
    function shuffle(els, arr) {
        upsetArr(arr);
        for(var i=0, len=els.length; i< len; i++) {
            var el = els[i];
            el.setAttribute('index', i);  // 将打乱后的数组索引缓存到元素中
            el.style.transform = 'translate(' + arr[i].x + 'vw,' + arr[i].y + 'vh'+ ')';
        }
    }
    

    3.3 生成n纬矩阵坐标

    n维矩阵主要用来做洗牌和计算成功率的,具体实现如下:

    // 生成n维矩阵坐标
    function generateMatrix(n, dx, dy) {
        var arr = [], index = 0;
        for(var i = 0; i< n; i++) {
            for(var j=0; j< n; j++) {
                arr.push({x: j*dx, y: i*dy, index: index});
                index++;
            }
        }
        return arr
    }
    

    3.4 置换算法

    置换算法主要用来切换拼图的,比如用户想移动拼图,可以用过置换来实现:

     // 数组置换
    function swap(arr, indexA, indexB) {
        let cache = arr[indexA];
        arr[indexA] = arr[indexB];
        arr[indexB] = cache;
    }
    

    4. 实现生成战绩海报功能

    生成战绩海报笔者采用canvas来实现,对于canvas的api不熟悉的可以查看MDN,讲的比较详细。这里笔者简单实现一个供大家参考:

    function generateImg() {
        var canvas = document.createElement("canvas");
    
        if(canvas.getContext) {
            var winW = window.innerWidth,
                winH = window.innerHeight,
            ctx = canvas.getContext('2d');
            canvas.width = winW;
            canvas.height = winH;
    
            // 绘制背景
            // ctx.fillStyle = '#06c';
            var linear = ctx.createLinearGradient(0, 0, 0, winH);
            linear.addColorStop(0, '#a1c4fd');
            linear.addColorStop(1, '#c2e9fb');
            ctx.fillStyle = linear;
            ctx.fillRect(0, 0, winW, winH);
            ctx.fill();
    
            // 绘制顶部图像
            var imgH = 0;
            img = new Image();
            img.src = imgSrc;
            img.onload = function(){
                // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW
                imgH = .6*winW*this.height/this.width;
                ctx.drawImage(img, .2*winW, .1*winH, .6*winW, imgH);
    
                drawText();
                drawTip();
                drawCode();
            }
    
            // 绘制文字
            function drawText() {
                ctx.save();
                ctx.fillStyle = '#fff';
                ctx.font = 20 + 'px Helvetica';
                ctx.textBaseline = 'hanging';
                ctx.textAlign = 'center';
                ctx.fillText('我只用了' + (180 -dealtime) + 's,' + '快来挑战!', winW/2, .15*winH + imgH);
                ctx.restore();
            }
    
            // 绘制提示文字
            function drawTip() {
                ctx.save();
                ctx.fillStyle = '#000';
                ctx.font = 14 + 'px Helvetica';
                ctx.textBaseline = 'hanging';
                ctx.textAlign = 'center';
                ctx.fillText('关注下方二维码开始游戏', winW/2, .25*winH + imgH);
                ctx.restore();
            }
    
    
            // 绘制二维码
            function drawCode() {
                var imgCode = new Image();
                imgCode.src = '/piecePlay/images/logo.png';
                imgCode.onload = function(){
                    ctx.drawImage(imgCode, .35*winW, .3*winH + imgH, .3*winW, .3*winW);
    
                    // 生成预览图
                    var img = new Image();
                    img.src= convertCanvasToImage(canvas, 1).src;
                    img.className = 'previewImg';
                    img.onload = function(){
                        $('.preview-page')[0].appendChild(this);
                        startDx = startDx - 100;
                        transformX(wrap, startDx + 'vw');
                    }
                }
            }  
        } else {
            alert('浏览器不支持canvas!')
        }
    }
    

    H5拼图小游戏笔者已在github开源, 感兴趣的可以学习参考。以上的逻辑部分的代码可以直接整合到vue项目中即可,由于实现比较简单,这里笔者就不详细介绍了。

    源码获取方式

    在微信公众号《趣谈前端》回复 “ H5游戏 ”,即可获取该项目的源码。

    更多前端实战项目推荐

    最后

    如果想学习更多H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战,欢迎在《趣谈前端》一起学习讨论,共同探索前端的边界。

    展开全文
  • h5拼图游戏

    2017-07-14 22:40:42
    h5拼图游戏
  • H5益智拼图小游戏1.1

    2020-07-13 12:29:43
    益智拼图小游戏1.1,本次更新修复了部分bug,优化了显示页面,并对拼图过程进行了优化,拼图成功后屏幕将会闪烁,增加互动性。
  • HTML5拼图小游戏

    2018-06-15 11:07:56
    简易入门级HTML5拼图游戏,js、css、index均清晰呈现,且能够快速运行
  • H5实现拼图游戏

    千次阅读 2020-02-13 20:09:52
    H5滑动拼图小游戏 这篇文章是关于使用H5 canvas、css和JavaScript技术实现滑动拼图游戏。 1.游戏实现的基本功能 游戏划分为简单级别和复杂级别。主要指的是图片划分的行列数不一样,这里的等级可以自己设定。 页面...

    H5滑动拼图小游戏

    这篇文章是关于使用H5 canvas、css和JavaScript技术实现滑动拼图游戏。

    1.游戏实现的基本功能

    • 游戏划分为简单级别和复杂级别。主要指的是图片划分的行列数不一样,这里的等级可以自己设定。
    • 页面载入完成,即可选择游戏等级和图片,进行拼图。页面加载完成,需要初始化绘图环境和画布尺寸及参考图片。
    • 点击工具条上的缩略图,可以改变右侧参考图片。
    • 点击游戏等级,切割图片完成,并且预留一张空白图片,拼图过程中,必须点击空白图片的相邻图片才可以移动图片块。
    • 当拼图区域的图片和原来图片方块位置都对应时,游戏结束。

    2.游戏效果及实现思路

    游戏效果
    根据游戏效果我们可以将页面分为上下两部分:

    1. 最上面部分为菜单栏,可选择难度等级和要拼的图片。
      点击缩略图可切换图片。
      按照简单和复杂的级别,将图片分为不等的切片。
    2. 下面分为拼图区域和参考图区域。
    3. 根据右边的参考图片分为n个切片随机显示到左边拼图区,拼图区有一张空白图片,将其锁定在左上角。如果切片与空白图片相邻,则可移动;如不相邻,则不可移动。

    3.开发步骤

    3.1 页面

    在这里插入图片描述
    用div+css实现页面布局。
    index.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="css/game.css" />
    		<script type="text/javascript" src="js/game.js" ></script>
    	</head>
    	<body> 
    		<div id="container">
    			<div id="toolbar">
    				<input type="button" name="" id="" value="简单"/>
    				<input type="button" name="" id="" value="复杂"/>
    				&nbsp;&nbsp;
    				<img src="img/1.jpg" />
    				<img src="img/2.jpg" />
    				<img src="img/3.jpg" />
    			</div>
    			<div id="game_left">
    				<canvas id="puzzle" width="600" height="600"></canvas>
    			</div>
    			<div id="game_right">
    				<img id="cankao" src="img/1.jpg"/>
    			</div>
    		</div>
    	</body>
    </html>
    

    game.css

    #toolbar{
    	height: 80px;
    	border: 1px solid blue;
    }
    #toolbar img{
    	width: 50px;
    	height: 50px;
    	margin-top: 10px;
    }
    #game_left{
    	width: 60%;
    	float: left;
    	border: 1px solid blue;
    	height: 600px;
    }
    #game_right{
    	width: 39%;
    	float: left;
    	border: 1px solid blue;
    	height: 600px;
    }
    

    以上就做好了前台的页面。

    3.2 功能实现

    3.2.1 页面加载完毕后进行初始化

    当网页刷新后,要初始化绘图环境。即准好参考图片和画布、画笔。
    注册页面加载完毕事件。

    <body onload="ready()"> 
    

    在游戏中需要将参考图片分为n个切片,以分为4个切片为例。
    将图片分为2*2的图片,用二维数组存储图片。例:[[img1,img2],[img3,img4]]
    其中img1里有两个属性,分别为图片的x轴坐标和y轴坐标来标识切片。
    图片切片
    在JavaScript里定义全局变量和ready()函数。

    var tileArray=new Array(); //存储切片的二维数组
    var img=new Image();//在画布中要绘制的图片
    var imgSize=600; //图片大小
    var ctx;//画笔
    var emptyObj=new Object();//空白图片
    //游戏准备
    function ready(){
    	var puzzle=document.getElementById("puzzle"); //获得canvas标签
    	ctx=puzzle.getContext("2d");
    	img.src=document.getElementById("cankao").src; //获取参考图片
    }
    

    3.2.2 改变参考图片

    实现的效果为点击上方缩略图,然后显示下方参考图片。
    先在html里注册图片的onclick事件

    <img src="img/1.jpg" onclick="changePic(this)"/>
    <img src="img/2.jpg" onclick="changePic(this)"/>
    <img src="img/3.jpg" onclick="changePic(this)"/>
    

    js定义changePic()函数

    //改变参考图片
    function changePic(ele){
    	document.getElementById("cankao").src=ele.src;
    }
    

    3.2.3 选择游戏级别并将图片绘制到画布

    点击简单或复杂按钮,初始化canvas图片分割。
    首先给游戏级别按钮注册initGame(num)点击事件,根据传入的num对原图片进行num*num的分割,将原图片每个切片的坐标按顺序存入到tileArray二维数组中,然后将数组洗牌打乱,空白图片设置为第0行第0列。
    这里面涉及到两套坐标系,第一套是原图片的坐标系,第二套是画布的坐标系。
    先将图片切割,按顺序将参考图片画到画布上。
    给按钮注册onclick事件

    <input type="button" name="" id="" value="简单" onclick="initGame(2)"/> //分割为2×2的图片
    <input type="button" name="" id="" value="复杂" onclick="initGame(4)"/>//分割为4×4的图片
    

    js定义initGame()函数

    //根据游戏级别初始化
    function initGame(num){   
    	//将原图片坐标存入二维数组
    	for (var i = 0; i < num; i++) {
    		tileArray[i]=new Array(); //行
    		for(var j = 0; j < num; j++){
    			var obj=new Object(); //定义一个对象
    			obj.x=i;
    			obj.y=j;
    			tileArray[i][j]=obj; //列
    		}
    	}
    	//按照二维数组绘制图片到画布
    	redraw();
    }
    

    需定义每个切片的大小

    var tilelen;//切片大小
    //根据游戏级别初始化
    function initGame(num){
    	//得到切片大小
    	tilelen=imgSize/num;     
    }
    

    当更改图片时,img的src路径会改变

    //改变图片
    function changePic(ele){
    	document.getElementById("cankao").src=ele.src;
    	img.src=ele.src;
    }
    

    js定义redraw()函数,在画布中绘制图片

    //重新绘制图片
    function redraw(){
    	var num=tileArray.length; //二维数组的长度
    	for (var i = 0; i < num; i++) {
    		for(var j = 0; j < num; j++){
    			//原图片的坐标
    			var curimg=tileArray[i][j];//得到真实图片的坐标
    			//绘制一个小切片
    			ctx.drawImage(img,curimg.x*tilelen,curimg.y*tilelen,tilelen,tilelen,i*tilelen,j*tilelen,tilelen,tilelen);
    		}
    	}
    }
    

    canvas绘制图像说明:
    剪切图像,并在画布上定位被剪切的部分:

    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    

    参数值

    参数描述
    img规定要使用的图像、画布或视频。
    sx可选。开始剪切的 x 坐标位置。
    sy可选。开始剪切的 y 坐标位置。
    swidth可选。被剪切图像的宽度。
    sheight可选。被剪切图像的高度。
    x在画布上放置图像的 x 坐标位置。
    y在画布上放置图像的 y 坐标位置。
    width可选。要使用的图像的宽度。(伸展或缩小图像)
    height可选。要使用的图像的高度。(伸展或缩小图像)

    选择游戏级别并将图片绘制到画布

    3.2.4 将画布上的切片随机排列

    在初始化游戏还没有重新绘制之前,对二维数组切片随机排列

    //根据游戏级别初始化
    function initGame(num){
    	//对二维数组切片进行随机排列
    	shuffle();
    	//按照二维数组绘制图片到画布
    	redraw();
    }	
    

    js定义shuffle()函数对二维数组随机排列

    //随机排列二维数组
    function shuffle(){
    	var num=tileArray.length; //二维数组的长度
    	for (var i = 0; i < num; i++) {
    		for(var j = 0; j < num; j++){
    			//获取随机位置
    			var ri=Math.floor(Math.random()*num);
    			var rj=Math.floor(Math.random()*num);
    			//当前ij元素交换位置
    			var t=tileArray[i][j];
    			tileArray[i][j]=tileArray[ri][rj];
    			tileArray[ri][rj]=t;
    		}
    	}
    }
    

    图片完成随机排列后,将之前绘制的图片清空,

    function redraw(){
    	ctx.clearRect(0,0,imgSize,imgSize);
    }
    

    将画布上的切片随机排列

    3.2.5 将画布的左上角图片设置为空白

    由于完全随机排列,拼图可能无解,将参考图片的左上角搬到画布的左上角置为空白,保证左上角为正确的位置,其他图片打乱。

    //找到左上角(0,0)的位置设为空白,而且保证在正确的位置上
    //随机排列二维数组
    function shuffle(){
    	//找到左上角(0,0)的位置设为空白,而且保证切片在正确的位置上
    	for (var i = 0; i < num; i++) {
    		for(var j = 0; j < num; j++){
    			//如果横纵坐标都为0,则与数组里的(0,0)交换位置,确保左上角对应左上角
    			if(tileArray[i][j].x==0 && tileArray[i][j].y==0){
    				var t=tileArray[i][j];
    				tileArray[i][j]=tileArray[0][0];
    				tileArray[0][0]=t;
    				break;
    			}
    		}
    	}
    	//标记(0,0)为空白图片,画布中(i,j)坐标
    	emptyObj.i=0; 
    	emptyObj.j=0;
    }
    

    在绘制图片中将空白图片画出来

    //重新绘制图片
    function redraw(){
    	for (var i = 0; i < num; i++) {
    		for(var j = 0; j < num; j++){
    			//原图片的坐标
    			var curimg=tileArray[i][j];//得到真实图片的坐标
    			//设置当前图片如果为空白的话就不绘制
    			if(i==emptyObj.i && j==emptyObj.j){
    			
    			}else{
    				//绘制一个小切片
    				ctx.drawImage(img,curimg.x*tilelen,curimg.y*tilelen,tilelen,tilelen,i*tilelen,j*tilelen,tilelen,tilelen);
    			}
    		}
    	}
    }
    

    在这里插入图片描述

    3.2.6 实现图片点击移动

    给图片注册一个onclick事件

    <canvas id="puzzle" width="600" height="600" onclick="move(event)"></canvas>
    

    js定义move()函数

    function move(e){
    	//获得点击的位置,获得下标
    	var ci=Math.floor(e.offsetX/tilelen);
    	var cj=Math.floor(e.offsetY/tilelen);
    	//如果点击的切片与空白相邻,则与空白交换位置。
    	//要么横坐标一样要么纵坐标一样,两坐标分别相减等于1则相邻
    	if(Math.abs(ci-emptyObj.i)+Math.abs(cj-emptyObj.j)==1){
    		var t=tileArray[ci][cj];
    		tileArray[ci][cj]=tileArray[emptyObj.i][emptyObj.j];
    		tileArray[emptyObj.i][emptyObj.j]=t;
    		//修改空白图片的坐标
    		emptyObj.i=ci;
    		emptyObj.j=cj;
    		//重新绘图
    		redraw();
    	}
    }
    

    实现图片点击移动

    3.2.7 判断游戏是否完成

    我们认为,除了空白图片之外原图的坐标xy与画布的坐标ij重合时就完成。
    每一次移动后判断是否完成

    function move(e){
    	//判断游戏是否完成
    	var success=isSuccess();
    	//如果success为true则重新绘制整张图
    	if(success){
    		ctx.drawImage(img,0,0,imgSize,imgSize,0,0,imgSize,imgSize);
    		//加文字
    		ctx.font='bold 50px 宋体'; //字体样式
    		ctx.fillStyle='green'; //字体颜色
    		ctx.fillText("游戏完成!",imgSize/2,imgSize/2); //文字内容,位置
    	}
    }
    

    js定义isSuccess()函数

    //判断游戏是否完成
    function isSuccess(){
    	var num=tileArray.length;
    	var success=true;
    	for (var i = 0; i < num; i++) {
    		for(var j = 0; j < num; j++){
    			//当前ij与tileArray[i][j]存储元素完全相同,则完成;如果有一个不一样则返回false
    			if(tileArray[i][j].x!=i||tileArray[i][j].y!=j){
    				success=false;
    				break;
    			}
    		}
    	}
    	return success;
    }
    

    在这里插入图片描述

    3.2.8 解决拼图无解情况

    空白经过偶数次移动才能结束。 在数学中有一个逆序数的概念,若有一列数字为0123,则逆序数为0;若有一列数字为3210,则逆序数为6。
    若逆序数为偶数,则为偶排列,若逆序数为奇数,则为奇排列。 打乱后只要为偶排列就有解,否则为奇排列。

    在随机之后判断是否有解

    function initGame(num){
    	//对二维数组切片进行洗牌
    	shuffle();
    	//判断随机之后的拼图是否有解,如果有解就绘制,如果无解重新排列
    	var solved=workabel();
    	if(solved){
    		//按照二维数组绘制图片到画布
    		redraw();
    	}else{
    		initGame(num);
    	}
    }
    

    js定义workabel()函数

    //判断拼图是否有解
    function workabel(){
    	var num=tileArray.length;
    	var arr1=new Array();
    	//将二维数组坐标转换为数字存入一维数组
    	for (var i = 0; i < num; i++) {
    		for(var j = 0; j < num; j++){
    			var ri=tileArray[i][j].x;
    			var rj=tileArray[i][j].y;
    			arr1.push(ri*num+rj);
    		}
    	}
    	//求arr1的逆序数
    	var total=0;
    	for (var i = 0; i < num*num; i++) {
    		for(var j = i+1; j < num*num; j++){
    			if(arr1[i]>arr1[j]){total++;}
    		}
    	}
    	if(total%2==0){
    		return true;
    	}else{
    		return false;
    	}
    }
    

    完成!

    展开全文
  • H5 拼图游戏

    2018-06-22 21:18:36
    H5拼图小游戏,vue排行榜+jquery拼图,难度可选3x3 4x4 6x6,游戏结束输入用户名加入排行榜,界面简洁美观。
  • 代码: 首先我是书写基本的样式,根据自己的喜好进行书写,我觉得还可以在此基础上进行修改。 <style> .area{ width:603px;... 此拼图出自自己的设计和想法所做出来的,若有冲突纯属巧合,越努力越幸运!

    代码:

    首先我是书写基本的样式,根据自己的喜好进行书写,我觉得还可以在此基础上进行修改。

        <style>
            .area{
                width:603px;
                height:603px;
                border: 1px solid red;
            }
            img{
                width: 200px;
                height: 200px;
            }
            .div1{
                width: 200px;
                height: 200px;
                border: 0px solid red;
                border-left: 0px;
    
                position: relative;
                float: left;
            }
        </style>
    </head>
    <body>
        <img id="img1" src="../images/2.png" alt="">
        <img id="img2" src="../images/1.png" alt="">
        <img id="img3" src="../images/8.png" alt="">
        <img id="img4" src="../images/3.png" alt="">
        <img id="img5" src="../images/5.png" alt="">
        <img id="img6" src="../images/4.png" alt="">
        <img id="img7" src="../images/7.png" alt="">
        <img id="img8" src="../images/6.png" alt="">
        <img id="img9" src="../images/9.png" alt="">
        <div id="area"class="area">
            <div class="div1" id="div1"></div>
            <div class="div1" id="div2"></div>
            <div class="div1" id="div3"></div>
            <div class="div1" id="div4"></div>
            <div class="div1" id="div5"></div>
            <div class="div1" id="div6"></div>
            <div class="div1" id="div7"></div>
            <div class="div1" id="div8"></div>
            <div class="div1" id="div9"></div>
        </div>
    
    

    采用拖拽接口的方式进行一步步的分析并且在相应的拖拽事件中进行定义。

      <script>
            var num=0;
            document.ondragstart=function(e){
                // 存储拖拽的元素
                e.dataTransfer.setData("text/html",e.target.id);
            }
            document.ondragover=function(e){
                // 阻止浏览器的默认行为
                e.preventDefault();
            }
            document.ondrop=function(e){
                //采用dataTransfer存储拖拽元素只能在drop中获取
                //下面的判断目的是为了只允许拖拽的图片放在指定的框的位置和原先存放图片的位置,其它地方的位置不允许放置
                if(e.target.className=="div1"||e.target.id=="all"){
                    var id=e.dataTransfer.getData("text/html");
                e.target.appendChild(document.getElementById(id));
                }
                
            }
        </script>
    

    效果图

    当拖拽的地方弄错了可以拖回原来存放图片的位置。
    在这里插入图片描述
    在这里插入图片描述

    此拼图出自自己的设计和想法所做出来的,若有冲突纯属巧合,越努力越幸运!

    展开全文
  • H5益智拼图小游戏1.0

    2020-07-12 21:33:16
    本项目采用一站式开发,纯静态页面,采用了Html5的新特性,以及bootstrap前端框架、JavaScript、jQuery等技术,本程序为本人原创系列博客菜鸟的复习之路的附属项目。
  • H5益智拼图小游戏1.2

    2020-07-13 22:30:57
    H5益智拼图小游戏1.2,对上个版本的布局进行少量的修改,增加了放置碎片时的音效,对架构进行了微调,后期添加新图片会更加方便,同时,添加了5张新的拼图。操作更加友好。
  • 微信拼图小游戏

    热门讨论 2015-04-28 15:06:50
    微信拼图小游戏代码 可以在JS中设置难度 关卡 图片等。
  • h5实现九宫格拼图

    2019-09-03 17:11:02
    h5实现九宫格拼图,很好玩的一款小游戏哦,大家可以试着做一个。
  • 40个H5小游戏完整源码-new

    千次下载 热门讨论 2016-11-16 09:26:16
    40个H5小游戏完整源码-new
  • 打造专属自己的html5拼图小游戏

    千次阅读 2016-04-24 16:31:00
    下面就把大体的思路介绍一下,希望大家都可以做出一款属于自己的拼图小游戏,必须是更炫酷,更好玩!来吧,大家一起加油。。。 利用canvas切出小块图片 我们知道现在的拼图游戏都是由九张小图片依次排列组成的,...
    最近公司刚好有个活动是要做一版 html5的拼图小游戏,于是自己心血来潮,自己先实现了一把,也算是尝尝鲜了。下面就把大体的思路介绍一下,希望大家都可以做出一款属于自己的拼图小游戏,必须是更炫酷,更好玩!来吧,大家一起加油。。。

    logo.png

    利用canvas切出小块图片

    我们知道现在的拼图游戏都是由九张小图片依次排列组成的,就是类似九宫格那样。那么以前的做法就是我们利用Photoshop这样的工具把原始大图【尺寸一般都是正方形的哦】切成九张小块的正方形小图,但是这种做法有点不灵活,如果我们要更换图片的话,就得重新去切图,好麻烦。。。
    不过没关系,现在我们有了canvas!利用canvas我们可以很轻松的做到这些。核心代码如下:

    var image = new Image();
    image.onload = function() {
        var index = 1;
        for (var i=0; i<3; i++) {
            for (var j=0; j<3; j++) {
                ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);
                $lis.eq(index-1).find('img').attr('src', canvas.toDataURL('image/jpeg'));
                index++;
            }
        }
    }
    //900x900
    image.src = "shanlian.jpg";

    实现小块图片的随机排列

    这里的核心是利用了javascript数组的随机排序,核心代码如下:

    imgArr.sort(function(a, b) {
        return Math.random() - Math.random();
    });
    var index = 1;
    for (var i=0; i<3; i++) {
        for (var j=0; j<3; j++) {
            ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);
            $lis.eq(imgArr[index-1]-1).find('img').data('seq', index).attr('src', canvas.toDataURL('image/jpeg'));
            index++;
        }
    }

    相关touch事件的监听和实现

    这里无非就是利用向左滑动,向右滑动这些去实现拼图的操作。核心代码如下:

    //阻止手机上浏览器的弹性下拉。。。
    $('body').on('touchstart', function(e) {
        e.preventDefault();
    });
    $lis.on('swipeLeft', function(e) {
        e.preventDefault();
        var $this = $(this);
        var index = $this.index();
        var html = $this.html();
        var $prev = $this.prev();
        if ($.inArray(index, [3, 6]) > -1 || $prev.size() <= 0) {
            return false;
        }
        $this.html($prev.html());
        $prev.html(html);
        App.check();
    });
    $lis.on('swipeRight', function(e) {
        e.preventDefault();
        var $this = $(this);
        var index = $this.index();
        var html = $this.html();
        var $next = $this.next();
        if ($.inArray(index, [2, 5]) > -1 || $next.size() <= 0) {
            return false;
        }
        $this.html($next.html());
        $next.html(html);
        App.check();
    });
    $lis.on('swipeUp', function(e) {
        e.preventDefault();
        var $this = $(this);
        var html = $this.html();
        var index = $this.index() - 3;
        var $up = $lis.eq(index);
        if (index >= 0 && $up.size() > 0) {
            $this.html($up.html());
            $up.html(html);
            App.check();
        }
    });
    $lis.on('swipeDown', function(e) {
        e.preventDefault();
        var $this = $(this);
        var html = $this.html();
        var index = $this.index() + 3;
        var $down = $lis.eq(index);
        if (index < 9 && $down.size() > 0) {
            $this.html($down.html());
            $down.html(html);
            App.check();
        }
    });

    游戏是否完成的判断

    这里的话,拼图顺序的每一次变化都要去检测一下是否完成了,原理就是获取当前小块图片的顺序和原始的图片进行比较。核心代码如下:

    var resArr = [];
    $('#gameBox img').each(function(k, v) {
        resArr.push(v.getAttribute("data-seq"));
    });
    if (resArr.join("") === oriArr.join("")) {
        //完成的处理。。。
    }

    核心代码和思路就是上面这些,其实整个过程走下来还是蛮简单的,接下来无非要做的就是再加一下花哨的东西了(时间,难度等级,排名等等)。如果大家感兴趣的话,完整版代码猛戳 这里 了。

    展开全文
  • 游戏玩法:把单个的碎片放到属于它的位置,拼成完整的图。 源码存放环境:LINUX 6.X + Nginx 环境 演示网址:http://www.2lian.com
  • H5 的canvas小游戏实例

    2019-01-07 18:34:55
    html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏
  • HTML5版3D魔方小游戏源码下载,h5游戏源码下载,h5小游戏,魔方游戏代码开发下载,免安装,直接双击就可以运行。
  • 得益于liuyubobobo老师的canvas课程和思路指点,做了一版简单的 html5拼图小游戏,下面就简单介绍一下实现的原理。。。利用canvas裁剪拼图所需的小块图片//核心代码如下:var index = 1;for (var i=0; i<3; i++) ...
  • 好玩的H5小游戏源码

    2021-01-11 17:11:54
    3D立体拼图、2048、hextris、HTML5实现会跳舞的3D立方体、见缝插针、切水果、人从哪里来物种进化、无尽河流、五子棋、消消乐、一个都不能死、一个魔方、永不放弃
  • canvas拼图游戏

    2021-06-09 08:55:43
    接下来就要详细讲解如何利用html5中的canvas来开发这样一个益智小游戏,下面我来简单地讲解一下游戏的开发思路。1.首先我们来定义游戏中需要用到的一些全局配置变量//全局配置变量var kBoardWidth = 4;...
  • 本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一...
  • 搜集了6款h5小游戏,包含3d魔方,3点拼图,2048数字游戏,见缝插针,切水果,五子棋,ios商店永不言弃等的游戏源码。
  • H5原生js简单拼图游戏

    2021-08-24 11:07:00
    H5原生js简单拼图游戏演示地址效果展示源码index.htmlpuzzle.csspuzzle.js源码下载 演示地址 链接: 演示地址 效果展示 源码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta ...
  • 维京战争,一个都不能死,捕鱼达人,植物大战僵尸,3D魔方,青蛙吃苍蝇,蜘蛛纸牌,贪吃蛇,水果削除,2048中文版,大鱼吃小鱼,飞机大战,跑酷小游戏,贪吃蛇2.0,射击鸭子,激流勇进,天天消消乐,别踩白块,线条...
  • HTML5九宫格拼图小游戏

    千次阅读 多人点赞 2020-04-21 17:02:43
    1~8数字九宫格 参考来源 注释详细 超好用的在线切图网站 <html lang="en"> <head> <meta charset="UTF-8">... content="width=device-width, user-scalable=no, initial-scale=1...
  • cocos creator游戏合集,里面有五子棋、2048、拼图、俄罗斯方块、连连看、打砖块等。方便学习cocos跨平台游戏的开发,学习提高游戏编程的逻辑能力。
  • 今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。效果图: 点击这里试玩http://www.108js.com/article/canvas/6/play.html欢迎访问博主的网站:http://www.108js.com代码:请您将上面数字排成1,2,...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 290
精华内容 116
关键字:

h5拼图小游戏