PAT (Advanced Level) 1007 Maximum Subsequence Sum（最大連續子序和）

阿新 • • 發佈：2021-08-22

寫這個用到了html2canvas.js這個外掛，很簡單大家可以到官網看一下，秒懂的呢種：http://html2canvas.hertzen.com/

就不寫demo介紹了，程式碼中註釋還是非常詳細的！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my拼圖</title>
    <style>
        * {
            box 
-sizing: border-box;
        }
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-image: url(./bg.jpg);
            background-size: 100% auto;
            overflow: hidden;
        }

        .btn {
            margin 
-top: 1rem;
            text-align: center;
            border: 1px solid #fff;
            font-size: 0.5rem;
        }

        .puzzleBox {
            position: absolute;
            top: 4.5rem;
            left: 0;
            right: 0;
            width: 7.2rem;
            height: 7.2rem;
            margin: auto;
            background 
-image: url(./bg.jpg);
            background-size: 7.5rem auto;
            background-position: center -4.5rem;
        }
        .puzzleBox .item {
            position: absolute;
            top: 0;
            left: 0;
            width: 2.4rem;
            height: 2.4rem;
            line-height: 2.1rem;
            border: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: aqua;
            z-index: 10;
            background-size: 7.2rem 7.2rem;
        }
        .puzzleBox .item:nth-child(1){background-position: 240px 240px;}
        .puzzleBox .item:nth-child(2){background-position: 0px 0px;}
        .puzzleBox .item:nth-child(3){background-position: 240px 0px;}
        .puzzleBox .item:nth-child(4){background-position: 120px 0px;}
        .puzzleBox .item:nth-child(5){background-position: 0px 240px;}
        .puzzleBox .item:nth-child(6){background-position: 240px 240px;}
        .puzzleBox .item:nth-child(7){background-position: 120px 240px;}
        .puzzleBox .item:nth-child(8){background-position: 0px 120px;}
        .puzzleBox .item:nth-child(9){background-position: 240px 120px;}
        .puzzleBox .remove {
            background-color: #000;
            display: none;
        }
    </style>
</head>

<body base-width='750' base-height='1334'>
    <div id="container">
        <div class="btn">生成拼圖</div>
        <div class="puzzleBox">
            <div class="item remove"></div>
        </div>
    </div>
    <aside class="loadBox">
        <span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
    </aside>
    <script src="js/jquery.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/rem.js"></script>
    <script>
        var puzzleBox = $('.puzzleBox');
        var base64='';
        // 九個方塊正確位置陣列
        var leftTopArr = [
            {"left":'240px',"top":'240px'},
            {"left":'0px',"top":'0px'},
            {"left":'120px',"top":'0px'},
            {"left":'240px',"top":'0px'},
            {"left":'0px',"top":'120px'},
            {"left":'120px',"top":'120px'},
            {"left":'240px',"top":'120px'},
            {"left":'0px',"top":'240px'},
            {"left":'120px',"top":'240px'}
        ];
        
        init();
        
        function init() {
            $('.btn').off().on('click', html2Canvas);
        }
        // 使用html2canvas外掛生成截圖
        function html2Canvas() {
            if (!base64) {
                html2canvas(document.querySelector(".puzzleBox"), { logging: false }).then(function (canvas) {
                    base64 = canvas.toDataURL("image/jpeg", 1);
                    $('.remove').show();
                    CreateClip();
                    setTimeout(()=>{
                        leftTopArrMath();//打亂陣列
                    },10)
                });
            }
        }
        // 迴圈生成九宮格方塊
        function CreateClip(){
            for(var i=0;i<leftTopArr.length-1;i++){
                var itemi = i+1;
                var itemHtml = '<div class="item" >'+itemi+'</div>';
                puzzleBox.append(itemHtml);
                $('.item').eq(itemi).css({"background-image":'url('+base64+')'})
            }
            // console.log(base64)
            $('.puzzleBox .item').on('click',itemMove);
        }
        // 移動黑方塊
        function itemMove(){
            // 點選方塊的位置
            var thisLeft = $(this).offset().left;
            var thisTop = $(this).offset().top;
            // 黑色方塊的位置
            var thisLeftBlack = $('.remove').offset().left;
            var thisTopBlack = $('.remove').offset().top;
            // 點選方塊與黑色方塊的差值用於下邊判斷
            var topdiffer = thisTop - thisTopBlack;
            var leftdiffer = thisLeft - thisLeftBlack;
            // 判斷是否挨著黑色方塊
            if((thisLeft == thisLeftBlack && (topdiffer== 120 || topdiffer== -120)) || (thisTop == thisTopBlack && (leftdiffer== 120 || leftdiffer==-120))){
                var oldLeft = $(this).css('left');
                var oldTop = $(this).css('top');
                var newLeft = $('.remove').css('left');
                var newTop = $('.remove').css('top');
                
                $(this).css({'left':newLeft,'top':newTop});
                $('.remove').css({'left':oldLeft,'top':oldTop});
                setTimeout(()=>{
                    success();
                },1)
            }
        }
        // 拼圖成功
        function success(){
            var alertArr = [];
            var alertNum = 0;
            for(var i=0;i<leftTopArr.length;i++){
                // 通過迴圈獲取到每個方塊的left與top值 並將其新增到陣列中
                // 通過判斷拼好的的陣列值與正在拼的陣列值相比較，判斷是否拼成功
                var itemLeft = puzzleBox.children('.item').eq(i).css('left');
                var itemTop = puzzleBox.children('.item').eq(i).css('top');
                alertArr.push({'left':itemLeft,'top':itemTop});
                if(alertArr[i].left == leftTopArr[i].left && alertArr[i].top == leftTopArr[i].top){
                    alertNum++;
                    if(alertNum == 9){//當陣列中九個方塊位置全對 的時候 提示拼圖成功
                        alert("拼圖成功");
                    }
                }
            }
        }
        // 打亂陣列
        function leftTopArrMath(){
            const leftTopArrMath = leftTopArr.concat([]);//注意，這裡用了深拷貝，如果淺拷貝再打亂陣列的話，原來陣列也會發生改變
            for (var i = leftTopArrMath.length - 1; i > 1; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var tmp = leftTopArrMath[j];
                leftTopArrMath[j] = leftTopArrMath[i];
                leftTopArrMath[i] = tmp;
            }
            // 並把打亂的陣列值傳給方塊
            for(var i=0;i<leftTopArrMath.length;i++){
                $('.item').eq(i).css({'left':leftTopArrMath[i].left,'top':leftTopArrMath[i].top});
            }
        }
    </script>
</body>

</html>

PAT (Advanced Level) 1007 Maximum Subsequence Sum（最大連續子序和）

1007 Maximum Subsequence Sum (25 分) Given a sequence ofKintegers {N1,N2, ...,NK}. A continuous subsequence is defined to be {Ni,Ni+1, ...,Nj} where1≤i≤j≤K. The Maximum Subs

PAT (Advanced Level) 1045 Favorite Color Stripe（LCS，非降序）

1045 Favorite Color Stripe (30 分) Eva is trying to make her own color stripe out of a given one. She would like to keep only her favorite colors in her favorite order by cutting off those

31. 最大連續子序列和（三）

一. 最大子序列和-聯機演算法在前兩篇博文中，我們瞭解了兩種較差演算法，和一種分治演算法。下面我們講解一個更好的方法：聯機演算法。這種演算法的時間複雜度是 O（n）。這個方法也是解決這個問題的最好演算法，因

最大連續子段和問題（動態規劃/貪心）

最大連續子段和問題傳送門問題描述給定一個數組，記錄一串數字，且元素值即存在正數也存在負數，現在要你求出陣列中最大的連續子段和

動態規劃（Dynamic Programming, DP）---- 最大連續子序列和 & 力扣53. 最大子序和

技術標籤：演算法動態規劃資料結構leetcode分治演算法動態規劃(Dynamic Programming, DP)是一種用來解決一類最優化問題的演算法思想，簡單來使，動態規劃是將一個複雜的問題分解成若干個子問題，或者說若干個階

最大連續子序列和（DP）

DP入門_最大連續子序列(最大連續和) Description 有一條崎嶇的山路，該山路被分成了n段（1<=n<=100,000）,每段山路的駕駛體驗不同。作為老司機的劉師傅給每段山路打分。分值越高，表示駕駛體驗越好；分值越低，

1007 Maximum Subsequence Sum (25分)

Given a sequence of K integers { N1, N2, ..., NK }. A continuous subsequence is defined to be { Ni, Ni+1, ..., Nj } where 1≤i≤j≤K. The Maximum Subsequence

最大子列和——Maximum Subsequence Sum（Swift)

Given a sequence ofKintegers {N1,N2, ...,NK}. A continuous subsequence is defined to be {Ni,Ni+1, ...,Nj} where1. The Maximum Subsequence is the continuous subsequ

最大連續子陣列 - Maximum Subarray - Leetcode -easy

題目 Given an integer arraynums, find the contiguous subarray(containing at least one number) which has the largest sum and returnits sum.

LeetCode 5644. 得到子序列的最少操作次數（最長上升子序DP nlogn）

技術標籤：LeetCode 文章目錄 1. 題目2. 解題 1. 題目給你一個數組 target ，包含若干互不相同的整數，以及另一個整數陣列 arr ，arr 可能包含重複元素。

2021-01-24（485. 最大連續1的個數）

技術標籤：資料結構與演算法 int count = 0; int maxCount = 0; for(int i = 0; i < nums.length; i++) {

AcWing 1016. 最大上升子序列和（線性DP）

題目連結題目描述一個數的序列 bi，當 b1<b2<…<bS 的時候，我們稱這個序列是上升的。

動態規劃：Educational Codeforces Round 123 (Rated for Div. 2)C. Increase Subarray Sums （最大連續區間和）

C. Increase Subarray Sums 傳送門：Problem - 1644C - Codeforces 　　題目大意就是：給你一個序列，算出序列和為sum，求是否有連續區間和大於等於sum，有就輸出NO，否則YES，並且連續區間不能是[1,n]，也

Codeforces Round #837 (Div. 2)D （最大回文字串+樹）

題目連結：D. Hossam and (sub-)palindromic tree 題目描述給定一顆有n(n<=2e3)個頂點的樹，每個頂點有一個點權（字元）,定義s(u,v)為從u到v的簡單路徑

PAT (Advanced Level) To Fill or Not to Fill（貪心）

With highways available, driving a car from Hangzhou to any other city is easy. But since the tank capacity of a car is limited, we have to find gas stations on the way from time to time. Different g

PAT (Advanced Level) 1003 Emergency （Dijkstra演算法）

1003 Emergency (25 分) As an emergency rescue team leader of a city, you are given a special map of your country. The map shows several scattered cities connected by some roads. Amount of

PAT (Advanced Level) Practice 1002 A+B for Polynomials (25分)

題目描述：https://pintia.cn/problem-sets/994805342720868352/problems/994805526272000000 題目大意：給出兩個多項式，輸出多項式和。

PAT(Advanced Level)A1090. Highest Price in Supply Chain

題意供應鏈有3種人，零售商，經銷商和供應商，供應鏈上的人都可以從自己的供應商那裡以P的價格買入，而後以r%的漲幅賣出去，求最深的結點的售價是多少

PAT(Advanced Level)A1094. The Largest Generation

題意樹的層序遍歷的問題，找到結點數最多的一層，輸出結點樹和對應層號思路

PAT(Advanced Level)A1106. Lowest Price in Supply Chain

題意供應鏈有3種人，零售商，經銷商和供應商，供應鏈上的人都可以從自己的供應商那裡以P的價格買入，而後以r%的漲幅賣給下一級，問供應鏈上找零售商買價格最低是多少

PAT (Advanced Level) 1007 Maximum Subsequence Sum（最大連續子序和）

相關推薦