js面向对象之如何实现拼图游戏-js教程-PHP中文网

首页

web前端

js教程

js面向对象之如何实现拼图游戏

零到壹度

Apr 04, 2018 pm 01:46 PM

javascript 拼图面向对象

这篇文章主要介绍了js面向对象之如何实现拼图游戏,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼图小游戏</title>
<style>
body,td { margin:0; padding:0; }
#begin { display:block; margin:20px auto; }
table { margin:80px auto; background:#fff; border:10px solid pink;  }
td { width:100px; height:100px; border:1px solid #ccc; cursor:pointer; background:url(img.jpg) no-repeat; }
</style>
<script src="js.js"></script>
<script>
window.onload = function(){
    var thisGame = new PinTuGame(&#39;begin&#39;);
}
</script>
 
</head>
 
<body>
<button id="begin">开始</button>
</body>
</html>

登录后复制

二、js代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

function PinTuGame(id){
    var that = this;
    this.oBtn = document.getElementById(id);
    this.oTable = document.createElement(&#39;table&#39;);
    this.oTbody = document.createElement(&#39;tbody&#39;);
    this.aTd = null;
    this.aTdMsg = [];       //用于存储每个图片的信息
    this.num = 0;           //用于判断拼图是否完成
    this.oTable.cellSpacing = &#39;0&#39;;
     
    this.createElem();      //初始化游戏界面
    this.oBtn.onclick = function(){
        for(var i = 0; i<that.aTd.length; i++){
            that.aTd[i].style.opacity = 1;  
        }
        this.innerHTML = &#39;重新开始&#39;;
        that.aTd[that.aTd.length-1].style.opacity = 0;
         
        var iAlpha = 100;
        var sp = -10;
        var timer = setInterval(function(){
            iAlpha += sp;
            that.oTbody.style.opacity = iAlpha / 100;
     
            if(iAlpha <=0) { sp = -sp; that.randomElem();}
            if(iAlpha > 100) {clearInterval(timer) };
        },15);  
        that.beginGame();   
    }
}
 
PinTuGame.prototype = {     //初始化游戏界面
    createElem: function(){
        for(var i =0; i<4; i++){
            var oTr = document.createElement(&#39;tr&#39;);
            for(var j =0; j<4; j++){
                var oTd = document.createElement(&#39;td&#39;);
                this.num ++;
                var tdMsg = {
                    seq: this.num,
                    bgPosition: -100*j+&#39;px &#39;+ -100*i+&#39;px&#39;   
                };  
                this.aTdMsg.push(tdMsg);
                oTr.appendChild(oTd);
            }
            this.oTbody.appendChild(oTr);   
        }   
        this.oTable.appendChild(this.oTbody);
        document.body.appendChild(this.oTable); 
         
        this.aTd = this.oTbody.getElementsByTagName(&#39;td&#39;);
        for(var i = 0; i<this.aTd.length; i++){
            this.aTd[i].json = this.aTdMsg[i];
            this.aTd[i].style.backgroundPosition = this.aTd[i].json.bgPosition;
        }
    },
    randomElem: function(){     //随机排序图片
        this.aTdMsg.sort(function (){
            return Math.random()-0.5;     
        });
        for(var i=0;i<this.aTd.length;i++){
            this.aTd[i].json = this.aTdMsg[i];
            this.aTd[i].style.backgroundPosition = this.aTd[i].json.bgPosition;
        }
    },
    beginGame: function(){      //开始游戏
        var that = this;
        var rows = this.oTbody.rows;
        for(var i =0; i<4; i++){
            for(var j =0; j<4; j++){
                rows[i].cells[j].Y = i;
                rows[i].cells[j].X = j;
                 
                rows[i].cells[j].onclick = function(){
                    var arr = [       //获取该图片的上右下左，四个方向的坐标
                        [this.Y-1, this.X],
                        [this.Y, this.X+1],
                        [this.Y+1, this.X],
                        [this.Y, this.X-1]  
                    ];  
                    for(var i = 0; i<arr.length; i++){
                        if( arr[i][0]<0 || arr[i][1]<0 || arr[i][0]>3 || arr[i][1]>3)continue;
                        if( rows[arr[i][0]].cells[ arr[i][1] ].style.opacity == &#39;0&#39; ){
                             
                            rows[arr[i][0]].cells[ arr[i][1] ].style.opacity = 1;
                            this.style.opacity=0;
     
                            //与隐藏的td交换json对象
                            var thisJson = this.json;
                            this.json = rows[arr[i][0]].cells[ arr[i][1]].json;  
                            rows[arr[i][0]].cells[arr[i][1]].json = thisJson;       
     
                            //与隐藏的td交换bakcground-position
                            this.style.backgroundPosition=this.json.bgPosition;
                            rows[arr[i][0]].cells[arr[i][1]].style.backgroundPosition=rows[arr[i][0]].cells[arr[i][1]].json.bgPosition; 
                        }
                    }
                    that.checkWin();
                };  
            }   
        }
    },
    checkWin: function(){       //检测游戏是否完成
        var aJson = [];
        for(var i = 0; i<this.aTd.length; i++){
            aJson.push(this.aTd[i].json.seq);
        }   
        for(var i = 0; i<aJson.length-1; i++){
            if(aJson[i]>aJson[i+1])return;   
        }
        for(var i = 0; i<this.aTd.length; i++){
            this.aTd[i].style.opacity = 1;  
        }
        alert(&#39;恭喜，胜利啦！&#39;);
        location.reload();  
    }   
}

登录后复制

二、游戏图片素材

以上是js面向对象之如何实现拼图游戏的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7770

Java教程

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

显示更多

Related knowledge

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

探索Go语言中的面向对象编程 Apr 04, 2024 am 10:39 AM

Go语言支持面向对象编程，通过类型定义和方法关联实现。它不支持传统继承，而是通过组合实现。接口提供了类型间的一致性，允许定义抽象方法。实战案例展示了如何使用OOP管理客户信息，包括创建、获取、更新和删除客户操作。

PHP高级特性：面向对象编程的最佳实践 Jun 05, 2024 pm 09:39 PM

PHP中OOP最佳实践包括命名约定、接口与抽象类、继承与多态、依赖注入。实战案例包括：使用仓库模式管理数据，使用策略模式实现排序。

Golang中有类似类的面向对象特性吗？ Mar 19, 2024 pm 02:51 PM

在Golang（Go语言）中并没有传统意义上的类的概念，但它提供了一种称为结构体的数据类型，通过结构体可以实现类似类的面向对象特性。在本文中，我们将介绍如何使用结构体实现面向对象的特性，并提供具体的代码示例。结构体的定义和使用首先，让我们看一下结构体的定义和使用方式。在Golang中，结构体可以通过type关键字定义，然后在需要的地方使用。结构体中可以包含属

如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务

Go语言的面向对象特性解析 Apr 04, 2024 am 11:18 AM

Go语言支持面向对象编程，通过struct定义对象，使用指针接收器定义方法，并通过接口实现多态。面向对象特性在Go语言中提供了代码重用、可维护性和封装，但也存在缺乏传统类和继承的概念以及方法签名强制类型转换的局限性。

一甜相机怎么拼图设置拼图的方法 Mar 25, 2024 pm 12:50 PM

　　一甜相机下载安装最新版2023是一款大家人手必备的拍照神器，其中的拍照功能非常先进，随时随地想拍就拍非常方便，各种风格的主题背景、精美贴纸等等都可以免费下载使用，拍照方式非常简单，一键美颜让你的皮肤更加细腻，每天都有非常多热门流行的拍照风格都可以在线尝试，让你分分钟变成美美哒的男女神，还能拍摄视频，接记录下生活中最美好的瞬间，接下来小编在线详细为一甜相机伙伴们推送设置拼图的方法。　　1首先进入到软件界面，点击【模板】进入　　2进入到界面中点击【拼图】进入　　3最后进入到界面点击【拼图】即可

PHP面向对象编程的深入理解：面向对象编程的调试技巧 Jun 05, 2024 pm 08:50 PM

通过掌握追踪对象状态、设置断点、追踪异常和利用xdebug扩展，可以有效调试PHP面向对象编程代码。1.追踪对象状态：使用var_dump()和print_r()查看对象属性和方法值。2.设置断点：在开发环境中设置断点，调试器将在执行到达断点时暂停，便于检查对象状态。3.追踪异常：使用try-catch块和getTraceAsString()获取异常发生时的堆栈跟踪和消息。4.利用调试器：xdebug_var_dump()函数可在代码执行过程中检查变量的内容。

See all articles

js面向对象之如何实现拼图游戏

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题