2. 程式人生 > >JavaScript經典進階：實現拼圖遊戲

JavaScript經典進階：實現拼圖遊戲

阿新 • • 發佈：2018-12-17
(function() { var hideElement = document.getElementsByClassName('hide')[0]; hideElement.addEventListener('click', function() { hideElement.style.display = 'none'; location.reload(); },false) })(); //使用面向物件(組合模式)程式設計
function Puzzle() { //放私有屬性 this.ctx = canvas.getContext('2d'); //畫筆，canvas是一個html中的特定的canvas元素 this.imgList = document.querySelectorAll('#game img'); this.imgArr = Array.from(this.imgList); //es6 } Puzzle.prototype = { init:
function (url) { //初始化(進行圖片的切圖並匯出) var image = new Image(); //建立遊離的img元素 /* new Image()和document.createElement('img'); 是一樣的，建立了一個遊離（未掛在到DOM中）的<img>元素 */ image.src = url; //將要處理的圖片地址放入src屬性 image.
onload = function () { this.randomImg(); //打亂順序，再渲染 this.renderImg(image); this.dragEvent(); }.bind(this); }, //進行圖片的渲染並匯出 renderImg: function (image) { var index = 0; for (var i = 0; i < 3; i++) { for (j = 0; j < 3; j++) { //i,j座標圖如下 //(0,0)(0,1)(0,2) //(1,0)(1,1)(1,2) //(2,0)(2,1)(2,2) //所以j,i的座標剛好和上面的9對值相反 this.ctx.drawImage(image, 300 * j, 300 * i, 300, 300, 0, 0, 150, 150); this.imgArr[index].src = canvas.toDataURL('image/jpeg'); this.imgArr[index].id = index; index++; } } }, //圖片的隨機排序 randomImg: function () { //imgList是DOM裡面的類陣列，沒有原生js中的sort方法 this.imgArr.sort(function () { return Math.random() - Math.random(); }) }, //拖拽事件 dragEvent: function () { //事件代理 var container = document.getElementById('game'); container.addEventListener('dragover', function (e) { e.preventDefault(); //如果沒有呼叫這個阻止函式，則目標元素在 dragstart 後，元素無法拖動 }, false); container.addEventListener('dragstart', function (e) { var target = e.target; if (target.tagName.toLowerCase() == 'img') { e.dataTransfer.setData('id', target.id); } }, false); //false表示--事件冒泡為否 container.addEventListener('drop', function (e) { var target = e.target; //drop事件觸發的是滑鼠 拖拽後釋放 所指的元素 if (target.tagName.toLowerCase() == 'img') { var originObj = document.getElementById(e.dataTransfer.getData('id')); var endObj = target; [originObj.src, endObj.src] = [endObj.src, originObj.src]; [originObj.id, endObj.id] = [endObj.id, originObj.id]; //兩行程式碼實現資料交換，不要太爽 var newImgArr = document.querySelectorAll('#game img'); var idArr = []; for (i = 0; i < 9; i++) { idArr.push(newImgArr[i].id); } console.log(idArr.toString()); if (idArr.toString() == [0, 1, 2, 3, 4, 5, 6, 7, 8].toString()) { document.getElementsByClassName('hide')[0].style.display = 'block'; } } }, false); } } var puzzle = new Puzzle(); puzzle.init('img/jinxuanya.jpg');

相關推薦

JavaScript經典進階：實現拼圖遊戲

(function() { var hideElement = document.getElementsByClassName('hide')[0]; hideElement.addEventListener('click', function

[轉] Nodejs 進階：Express 常用中間件 body-parser 實現解析

tree define pan iconv 不同 erro unzip body message 寫在前面 body-parser是非常常用的一個express中間件，作用是對post請求的請求體進行解析。使用非常簡單，以下兩行代碼已經覆蓋了大部分的使用場景。 app.

Android進階：步驟四：Android 接入百度地圖API 基礎實現

內容概括： 註冊申請百度地圖開發平臺賬號 這裡是地址  如何申請百度地圖的賬號也有官方文件：在這裡 申請祕鑰(AK)、快速獲取釋出版SHA1和測試版SHA1和包名 (文件裡面也有如果建立應用以及申請的教程，但在Android Studio中實現更加簡單) 百度地

RecycleView進階：使用GridLayoutManager.SpanSizeLookup來動態實現具有不同尺寸的Item

前言 現在基本所有的安卓開發都使用RecycleView替換了ListView和GridView，RecycleView使用的靈活性以及其功能的強大相信大家也深有感觸，使用RecycleView我們也可以很方便的實現一些複雜佈局，例如下面這樣的頁面： 該頁面中，同時包含列表，2列的網格

[Xcode10 實際操作]九、實用進階-(8)實現App的Setting設定：新增和讀取程式的配置資訊

本文將演示如何實現新增和讀取程式的配置資訊。 在專案資料夾【DemoApp】上點選滑鼠右鍵->【New File】建立一個設定束檔案 ->【Settings Bundle】設定束: 如果想要通過裝置的【設定】程式，來展示自定義的的偏好設定，必須先準備好一個設定束 ->【Next】-&

[Xcode10 實際操作]九、實用進階-(8)實現App的Setting設置：添加和讀取程序的配置信息

ren dtd www user capital 配置 演示 應用 default 本文將演示如何實現添加和讀取程序的配置信息。 在項目文件夾【DemoApp】上點擊鼠標右鍵->【New File】創建一個設置束文件 ->【Settings Bundle】設

小程式開發進階：如何實現直播連麥

我們上週做了一場免費線上直播課，聲網Agora 研發工程師張乾澤分享了小程式直播元件的特點、實現小程式間連麥的方法，以及需要注意的產品化難題等乾貨。本文將為沒能觀看到直播，又正在做小程式開發的朋友們回顧一下演講內容，以及直播觀眾們提出的那些問題。（文末有視訊回顧地址，大家可配合觀看）

Python進階：自定義物件實現切片功能

切片是 Python 中最迷人最強大最 Amazing 的語言特性（幾乎沒有之一），在《Python進階：切片的誤區與高階用法》中，我介紹了切片的基礎用法、高階用法以及一些使用誤區。這些內容都是基於原生的序列型別（如字串、列表、元組......），那麼，我們是否可以定義自己的序列型別並讓它支援切片語法呢？更進

Python 進階：自定義物件實現切片功能

切片是 Python 中最迷人最強大最 Amazing 的語言特性（幾乎沒有之一），在《 Python進階：切片的誤區與高階用法 》中，介紹了切片的基礎用法、高階用法以及一些使用誤區。這些內容都是基於原生的序列型別（如字串、列表、元組……），那麼，我們是否可以定義自己的序列型別並讓它支援切

Python進階：自定義對象實現切片功能

The pin 使用 我們 沒有 () lock tin 擔心 Python進階：自定義對象實現切片功能 切片是 Python 中最迷人最強大最 Amazing 的語言特性（幾乎沒有之一），在《Python進階：切片的誤區與高級用法》中，我介紹了切片的基礎用法、高級用法以及

技術進階：通過來JavaScript 效能調優提高 Web 應用效能

前言 現在的網際網路應用中，在Web 開發中經常會遇到效能的問題，尤其是針對當今的 Web2.0 +應用。JavaScript 是當今使用最為廣泛的 Web 開發語言，Web 應用的效能問題很大一部分都是由程式設計師寫的 JavaScript 指令碼效能不佳所造成的，裡面包括了 Java

Nodejs進階：Express常用中介軟體body-parser實現解析

原文連結 body-parser是非常常用的一個express中介軟體，作用是對post請求的請求體進行解析。使用非常簡單，以下兩行程式碼已經覆蓋了大部分的使用場景。 app.use(bodyParser.json()); app.use(bodyParser.urle

Android進階：十二、最簡單的方式實現自定義陰影效果

clas new round war port scale dimens tro hdr 網話說UI設計有三寶 :透明,陰影,加圓角。很多UI在做設計的時候都喜歡做卡片形式，然後添加陰影。卡片UI確實挺好看，但是對Android開發者來說，顯示陰影卻並不那麽手到擒來，因為A

【學習筆記】String進階：StringBuffer類（線程安全）和StringBuilder類

n) static this util double 字符串 對象 ice 單線程 一、除了使用String類存儲字符串之外，還可以使用StringBuffer類存儲字符串。而且它是比String類更高效的存儲字符串的一種引用數據類型。 優點： 　　對字符串進行連接操作時，

python開發函數進階：命名空間，作用域，函數的本質，閉包，內置方法（globales）

問題 總結 加載 自己的 ger 作用域 範圍 沒有 概念 一，命名空間 #局部命名空間#全局命名空間#內置命名空間 #三者的順序#加載順序 硬盤上——內存裏#內置-->全局(從上到下順序加載進來的)-->局部（調用的時候加載） 1 #!/usr/bin/

python開發函數進階：裝飾器

for 中國 eas login please 函數 功能 log 原則 一，裝飾器本質 閉包函數 功能：就是在不改變原函數調用方式的情況下，在這個函數前後加上擴展功能 二，設計模式 開放封閉原則 *對擴展是開放的 *對修改是封閉的 三，代碼解釋 1 #!/

[您有新的未分配科技點]博弈論進階：似乎不那麽恐懼了…… （SJ定理，簡單的基礎模型）

裏的 如果 cnblogs 經典 ant 控制 nim osi 取石子 這次，我們來繼續學習博弈論的知識。今天我們會學習更多的基礎模型，以及SJ定理的應用。 首先，我們來看博弈論在DAG上的應用。首先來看一個小例子：在一個有向無環圖中，有一個棋子從某一個點開始一直向它的出點

python開發函數進階：遞歸函數

bre for 自己 lis 一次 技術 結束 函數 ont 一，什麽叫遞歸 #遞歸#在一個函數裏調用自己#python遞歸最大層數限制 997#最大層數限制是python默認的，可以做修改#但是我們不建議你修改 例子和尚講故事 1 #!/usr/bin/env pyt

python開發函數進階：可叠代的&叠代器&生成器

== ict turn lena log 中新 odin 使用 def 一，可叠代的&可叠代對象 1.一個一個的取值就是可叠代的 iterable#str list tuple set dict#可叠代的 ——對應的標誌 __iter__ 2.判斷一個變量

python開發函數進階：匿名函數

參數 values cal key 多個 map [0 解決 lambda 一，匿名函數 #簡單的需要用函數去解決的問題 匿名函數的函數體 只有一行#也叫lambda表達式# cal2（函數名） = lambda n（參數） : n*n(參數怎麽處理，並且返回值)#參數可以