{"id":11573,"date":"2021-08-16T17:00:00","date_gmt":"2021-08-16T08:00:00","guid":{"rendered":"https:\/\/kusakarism.info\/?p=11573"},"modified":"2021-08-29T19:54:54","modified_gmt":"2021-08-29T10:54:54","slug":"tetris_javascript","status":"publish","type":"post","link":"https:\/\/kusakarism.info\/?p=11573","title":{"rendered":"\u300e\u30c6\u30c8\u30ea\u30b9\u300f\u3092JavaScript\u3067\u4f5c\u3063\u3066\u307f\u305f\u7d50\u679c\u2026\u3002\u203bPC\u3067\u3082\u30b9\u30de\u30db\u3067\u3082\u30d7\u30ec\u30a4\u3067\u304d\u307e\u3059\u3002"},"content":{"rendered":"

\u30dc\u30af\u306e\u904b\u55b6\u3059\u308bYouTube\u30c1\u30e3\u30f3\u30cd\u30eb\u306e\u3072\u3068\u3064\u300c\u305f\u3051\u3061\u3083\u3093\u306d\u308b \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u300d<\/a><\/span><\/strong>\u3002<\/p>\n

JavaScript\u5165\u9580\u30b7\u30ea\u30fc\u30ba\u300e\u5b8c\u5168\u521d\u5fc3\u8005\u304c\u30c6\u30c8\u30ea\u30b9\u3092\u4f5c\u308c\u308b\u3088\u3046\u306b\u306a\u308b\u52d5\u753b\u300f<\/a><\/span><\/strong>\u3082\u3059\u3067\u306b\u5927\u8a70\u3081\u3002<\/p>\n

\u3042\u3068\u306f\u5b9f\u969b\u306b\u30c6\u30c8\u30ea\u30b9\u3092\u4f5c\u308b\u3070\u304b\u308a\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u3068\u306f\u8a00\u3046\u3082\u306e\u306e\u30fb\u30fb\u30fb\u3002<\/p>\n

\u30dc\u30af\u306fJavaScript\u3067\u306e\u30c6\u30c8\u30ea\u30b9\u306f\u4f5c\u3063\u305f\u3053\u3068\u304c\u306a\u3044\u306e\u3067\u3001\u4e8b\u524d\u306b\u4e00\u56de\u4f5c\u3063\u3066\u307f\u3088\u3046\uff01\u30fb\u30fb\u30fb\u3068\u3044\u3046\u52d5\u753b\u304c\u30b3\u30c1\u30e9<\/a><\/span><\/strong>\u3067\u3059\u3002<\/p>\n

\u3053\u306e\u8a18\u4e8b\u306f\u3001\u5b9f\u969b\u306b\u4f5c\u3063\u3066\u307f\u305f\u30c6\u30c8\u30ea\u30b9\u306e\u30b3\u30fc\u30c9\u3092\u516c\u958b\u3057\u3066\u3044\u307e\u3059\uff08\u305d\u308c\u3068\u300c\u904a\u3093\u3067\u307f\u3088\u3046\uff01\u300d\u306e\u30b3\u30fc\u30ca\u30fc\uff09\u3002<\/p>\n

\u30c6\u30c8\u30ea\u30b9\u306e\u30d7\u30ec\u30a4\u306f\u30b3\u30c1\u30e9<\/a><\/span><\/strong><\/span>\u304b\u3089\u3002
\u203b\u64cd\u4f5c\u65b9\u6cd5\u306f\u4ee5\u4e0b\u3092\u53c2\u7167\u3002<\/strong><\/p>\n

\u662f\u975e\u3001\u662f\u975em(_ _)m<\/span><\/p>\n

\u3010\uff30\uff23\u3067\u306e\u64cd\u4f5c\u65b9\u6cd5\u3011<\/strong>
\u5de6\u53f3\u79fb\u52d5\u300c\u2190\u300d\u300c\u2192\u300d
\u53f3\u56de\u8ee2\u3000\u300c\u2191\u300d
\u5de6\u56de\u8ee2\u3000\u300c\u30b9\u30da\u30fc\u30b9\u300d
\u9ad8\u901f\u843d\u4e0b\u300c\u2193\u300d\u203b\u62bc\u4e0b\u4e2d\u843d\u4e0b<\/div>\n
\u3010\u30b9\u30de\u30db\u3067\u306e\u64cd\u4f5c\u65b9\u6cd5\u3011<\/strong>
\u5de6\u53f3\u79fb\u52d5\u300c\u753b\u9762\u306e\u5de6\u53f3\u3092\u30bf\u30c3\u30d7\u300d
\u53f3\u56de\u8ee2\u3000\u300c\u753b\u9762\u306e\u4e2d\u592e\u3092\u30bf\u30c3\u30d7\u300d
\u5de6\u56de\u8ee2\u3000\u300c\u8a2d\u5b9a\u306a\u3057\u300d
\u9ad8\u901f\u843d\u4e0b\u300c\u753b\u9762\u4e0b\u300d\u203b\u30bf\u30c3\u30c1\u3057\u3066\u3044\u308b\u9593\u843d\u4e0b
\"\"<\/a><\/div>\n
\u7d50\u69cb\u304c\u3093\u3070\u3063\u3066\u4f5c\u3063\u305f\u30c6\u30c8\u30ea\u30b9\u306e\u30b3\u30fc\u30c9\u304c\u3053\u308c\u3067\u3059\u3002
\u203b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8b1b\u5ea7\u3067\u4f5c\u6210\u3057\u305f\u300c\u7c21\u6613\u7248\u30c6\u30c8\u30ea\u30b9\u300d\u3082\u3001\u3053\u306e\u3055\u3089\u306b\u4e0b\u306b\u3042\u308a\u307e\u3059\u3002<\/strong><\/span><\/div>\n\n\n
<!DOCTYPE html>\n<html lang="ja">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript\u3067\u4f5c\u308b\u30c6\u30c8\u30ea\u30b9<\/title>\n    <style>\n        \/* \u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8 *\/\n        body{background-color:#008;}\n        #exit{\n            margin:0 10px 0 0;\n            background-color:#f77;\n            font-size:18px;\n            float:left;     }\n        #score{\n            color:#fff;\n            font-size:20px;\n            font-weight:bold;       }\n        #start{\n            font-size:40px;\n            border-radius:5px;\n            background-color:#f77;\n            color:#fdd;\n            position:absolute;\t\n\t\t    top:200px;\n\t\t    left:58px;      }          \n    <\/style>\n<\/head>\n<body>\n    <!-- \u30b2\u30fc\u30e0\u753b\u9762 -->\n    <button id="exit" onclick="over()">\u00d7<\/button>  \n    <div id="score">SCORE:<\/div>\n    <canvas id="field" width="350px" height="500px"><\/canvas>\n    <button id="start" onclick="gameStart()">START<\/button>\n\n<script>\n    \/\/\u30b5\u30a6\u30f3\u30c9\u30d5\u30a1\u30a4\u30eb\u3092\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\n    let bgm = new Audio("bgm.wav");\n    let inSound = new Audio("in.wav");\n    let delSound = new Audio("delete.wav");\n    let gameOver = new Audio("gameover.wav");\n\n    \/\/\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u53d6\u5f97\u306a\u3069\n    let field = document.getElementById("field");\n    let can = field.getContext("2d");\n    let sc = document.getElementById("score");\n    let exit = document.getElementById("exit");\n\n    \/\/ \u5909\u6570\u306a\u3069 \n    let arrayField = [];    \/\/\u30b2\u30fc\u30e0\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u72b6\u614b\u3092\u683c\u7d0d\n    let tetroList = [];     \/\/\u64cd\u4f5c\u3059\u308b\u30c6\u30c8\u30ed\u30df\u30ce\u3068Next\u8868\u793a\u306e\uff13\u3064\u3092\u683c\u7d0d\n    let score;              \/\/\u30b9\u30b3\u30a2\u3092\u683c\u7d0d\n    let tetroDown = false;  \/\/\u30c0\u30a6\u30f3\u30ad\u30fc\u72b6\u614b\u521d\u671f\u5024\n    let gameSpeed = 500;    \/\/\u30b2\u30fc\u30e0\u901f\u5ea6\u521d\u671f\u5024\n    let timer1, timer2, timer3;\n\n    \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u30c7\u30fc\u30bf [x1,y1, x2,y2, x3,y3, x4,y4, color]\n    let arrayTetro = [[-1,-1, 0,-1, 0, 0, 1, 0, "red"    ],      \/\/ Z\u578b\n                      [ 0,-1, 1,-1,-1, 0, 0, 0, "green"  ],      \/\/ S\u578b\n                      [ 1,-1,-1, 0, 0, 0, 1, 0, "orange" ],      \/\/ L\u578b\n                      [-1,-1,-1, 0, 0, 0, 1, 0, "blue"   ],      \/\/ J\u578b\n                      [-1,-1, 0,-1,-1, 0, 0, 0, "yellow" ],      \/\/ O\u578b\n                      [ 0,-1,-1, 0, 0, 0, 1, 0, "magenta"],      \/\/ T\u578b\n                      [-1, 0, 0, 0, 1, 0, 2, 0, "cyan"   ]];     \/\/ I\u578b\n\n    \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u30af\u30e9\u30b9\n    class Tetro {\n        constructor(){\n            this.x = 4;\n            this.y = 0;\n            this.tetro = arrayTetro[Math.floor(Math.random()*7)].concat();   \/\/\uff17\u7a2e\u985e\u306e\u4e2d\u304b\u3089\u30e9\u30f3\u30c0\u30e0\u306b\u9078\u629e\n        }\n    }\n\n    \/\/\u30d5\u30a1\u30fc\u30b9\u30c8\u30b9\u30af\u30ea\u30d7\u30c8\n    window.onload = firstScript;    \n    function firstScript(){\n        can.fillStyle = "#000";\n        can.fillRect(0, 0, 250, 500);\n        arrayField = [];            \/\/\u30b2\u30fc\u30e0\u30d5\u30a3\u30fc\u30eb\u30c9\u521d\u671f\u5316(\u5168\u90e8"black")\n        for(let y=0; y<20; y++){\n            let sub = [];\n            for(let x=0; x<10; x++){sub.push("black");}\n            arrayField.push(sub);\n        }\n        tetroList = [];             \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u3092\uff14\u3064\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\n        for(let i=0; i<4; i++){\n            tetroList.push(new Tetro());\n        }\n        document.getElementById("start").style.visibility = "visible";  \/\/\u30b9\u30bf\u30fc\u30c8\u30dc\u30bf\u30f3\u8868\u793a\n    }    \n    \n    \/\/\u30b2\u30fc\u30e0\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u30af\u30ea\u30a2\u3057\u3066\u304b\u3089\u63cf\u753b\u3059\u308b\u95a2\u6570\n    function fieldDraw(){\n        can.fillStyle = "#000";                     \/\/\u30d5\u30a3\u30fc\u30eb\u30c9\u30af\u30ea\u30a2            \n        can.fillRect(0, 0, 250, 500);\n        for(let y=0; y<20; y++){                    \/\/\u30d5\u30a3\u30fc\u30eb\u30c9\u63cf\u753b\n            for(let x=0; x<10; x++){\n                can.fillStyle = arrayField[y][x];\n                can.fillRect(x*25, y*25, 25, 25);\n                can.strokeStyle = "black";\n                can.strokeRect(x*25, y*25, 25, 25);\n            }\n        }\n        for(let i=0; i<4; i++){                     \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u63cf\u753b\n            can.fillStyle = tetroList[0].tetro[8];\n            can.fillRect((tetroList[0].tetro[i*2]+tetroList[0].x)*25, (tetroList[0].tetro[i*2+1]+tetroList[0].y)*25, 25, 25);\n            can.strokeStyle = "black";\n            can.strokeRect((tetroList[0].tetro[i*2]+tetroList[0].x)*25, (tetroList[0].tetro[i*2+1]+tetroList[0].y)*25, 25, 25);\n        }\n    }\n\n    \/\/\u30cd\u30af\u30b9\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u30af\u30ea\u30a2\u3057\u3066\u518d\u63cf\u753b\u3059\u308b\u95a2\u6570\n    function nextDraw(){     \n        can.fillStyle = "#008";\n        can.fillRect(250, 0, 100, 500);\n        for(let i=1; i<4; i++){\n            can.fillStyle = tetroList[i].tetro[8];\n            for(let j=0; j<4; j++){\n                can.fillRect((tetroList[i].tetro[j*2]+1)*15+260, (tetroList[i].tetro[j*2+1]+i*5-2)*15, 15, 15);\n                can.strokeStyle = "white";\n                can.strokeRect((tetroList[i].tetro[j*2]+1)*15+260, (tetroList[i].tetro[j*2+1]+i*5-2)*15, 15, 15);\n            }\n        }\n    }\n\n    \/\/\u30b2\u30fc\u30e0\u30b9\u30bf\u30fc\u30c8\u95a2\u6570\n    function gameStart(){\n        firstScript();\n        score = 0;\n        tetroDown = false;\n        document.getElementById("start").style.visibility = "hidden";   \/\/\u30b9\u30bf\u30fc\u30c8\u30dc\u30bf\u30f3\u975e\u8868\u793a\n        bgm.play();                                                     \/\/\uff22\uff27\uff2d\u518d\u751f\n        bgm.addEventListener("ended", function(){bgm.play();});\n        document.addEventListener("keydown", keyDown);                  \/\/\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\n        document.addEventListener("keyup", keyUp);\n        document.addEventListener("touchstart", touchStart, {passive:false});\n        document.addEventListener("touchend", touchEnd, {passive:false});\n        exit.addEventListener("touchstart", over);\n        nextDraw();                                                     \/\/\u30cd\u30af\u30b9\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u63cf\u753b      \n        timer1 = setInterval(fieldDraw, 10);                            \/\/\u30bb\u30c3\u30c8\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb\n        timer2 = setInterval(highSpeedDown, 80);\n        timer3 = setInterval(nomalDown, gameSpeed);\n    }\n\n    \/\/\u79fb\u52d5(\u56de\u8ee2)\u53ef\u80fd\u5224\u5b9a\u3092\u3059\u308b\u95a2\u6570\n    function judgeMove(afterTetro, positionX, positionY){           \n        for(let i=0; i<4; i++){\n            let afterX = afterTetro[i*2] + positionX;\n            let afterY = afterTetro[i*2+1] + positionY;\n            if(afterX<0 || afterY<0 || afterX>9 || afterY>19){return false;}\n            if(arrayField[afterY][afterX]!="black"){return false;}\n        }\n        return true;\n    }\n\n    \/\/\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc(\u30ad\u30fc\u30dc\u30fc\u30c9)\n    function keyDown(e){                                \/\/\u30ad\u30fc\u304c\u62bc\u3055\u308c\u305f\u3068\u304d\n        let afterTetro = tetroList[0].tetro.concat();\n        let positionX = tetroList[0].x;\n        let positionY = tetroList[0].y;     \n\n        if(e.key=="ArrowRight" || e.key=="Right"){      \/\/\u53f3\u30ad\u30fc(\u53f3\u79fb\u52d5)\n            positionX = tetroList[0].x+1;\n        }\n        if(e.key=="ArrowLeft" || e.key=="Left"){        \/\/\u5de6\u30ad\u30fc(\u5de6\u79fb\u52d5)\n            positionX = tetroList[0].x-1;\n        }\n        if(e.key=="ArrowUp" || e.key=="Up"){            \/\/\u4e0a\u30ad\u30fc(\u6642\u8a08\u56de\u8ee2)\n            afterTetro = [];\n            for(let i=0; i<4; i++){\n                afterTetro.push(tetroList[0].tetro[i*2+1]*-1);\n                afterTetro.push(tetroList[0].tetro[i*2]);\n            }\n            afterTetro.push(tetroList[0].tetro[8]);\n        }\n        if(e.key==" "){                                 \/\/\u30b9\u30da\u30fc\u30b9\u30ad\u30fc(\u53cd\u6642\u8a08\u56de\u8ee2)\n            afterTetro = [];\n            for(let i=0; i<4; i++){\n                afterTetro.push(tetroList[0].tetro[i*2+1]);\n                afterTetro.push(tetroList[0].tetro[i*2]*-1);\n            }\n            afterTetro.push(tetroList[0].tetro[8]);\n        }\n        if(e.key=="ArrowDown" || e.key=="Down"){        \/\/\u4e0b\u30ad\u30fc(\u62bc\u4e0b\u4e2d\u843d\u4e0b\u52a0\u901fTrue)\n            tetroDown = true;        \n        }\n        let isMove = judgeMove(afterTetro, positionX, positionY);\n        if(isMove){\n            tetroList[0].tetro = afterTetro;\n            tetroList[0].x = positionX;\n            tetroList[0].y = positionY;\n        }\n    }\n    function keyUp(e){                                  \/\/\u30ad\u30fc\u304c\u96e2\u3055\u308c\u305f\u3068\u304d\n        if(e.key=="ArrowDown" || e.key=="Down"){        \/\/\u4e0b\u30ad\u30fc(\u30ea\u30ea\u30fc\u30b9\u3067\u843d\u4e0b\u52a0\u901fFalse)\n            tetroDown = false;\n        }\n    }\n\n    \/\/\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc(\u30b9\u30de\u30db\u30bf\u30c3\u30d7)\n    let startX = 0;\n    let startY = 0;\n    function touchStart(e){\n        e.preventDefault();\n        startX = e.touches[0].pageX;\n        startY = e.touches[0].pageY;\n\n        let afterTetro = tetroList[0].tetro.concat();\n        let positionX = tetroList[0].x;\n        let positionY = tetroList[0].y;     \n\n        if(startY<500 && startY>200 && startX>85 && startX<165){\n            afterTetro = [];\n            for(let i=0; i<4; i++){\n                afterTetro.push(tetroList[0].tetro[i*2+1]*-1);\n                afterTetro.push(tetroList[0].tetro[i*2]);\n            }\n            afterTetro.push(tetroList[0].tetro[8]);\n        }\n        if(startY>200 && startX<80){\n            positionX = tetroList[0].x-1;\n        }\n        if(startY>200 && startX>170){\n            positionX = tetroList[0].x+1;\n        }\n        if(startY>500 && startX>85 && startX<165){\n            tetroDown = true;\n        }     \n        let isMove = judgeMove(afterTetro, positionX, positionY);\n        if(isMove){\n            tetroList[0].tetro = afterTetro;\n            tetroList[0].x = positionX;\n            tetroList[0].y = positionY;   \n        }\n    }\n    function touchEnd(e){\n        e.preventDefault();\n        tetroDown = false;     \n    }\n\n    \/\/\u9ad8\u901f\u843d\u4e0b\u3092\u5236\u5fa1\u3059\u308b\u95a2\u6570\n    function highSpeedDown(){\n        if(tetroDown){\n            let afterTetro = tetroList[0].tetro.concat();\n            let positionX = tetroList[0].x;\n            let positionY = tetroList[0].y+1;\n            let isMove = judgeMove(afterTetro, positionX, positionY);\n            if(isMove){\n                tetroList[0].tetro = afterTetro;\n                tetroList[0].x = positionX;\n                tetroList[0].y = positionY;   \n                score += 1;\n                sc.textContent = "SCORE: " + score;\n            }\n            else{fixedTetro();}\n        }\n    }\n\n    \/\/\u81ea\u7136\u843d\u4e0b\u3092\u5236\u5fa1\u3059\u308b\u95a2\u6570\n    function nomalDown(){\n        let afterTetro = tetroList[0].tetro.concat()\n        let positionX = tetroList[0].x;\n        let positionY = tetroList[0].y+1;\n        let isMove = judgeMove(afterTetro, positionX, positionY);\n        if(isMove){\n            tetroList[0].tetro = afterTetro;\n            tetroList[0].x = positionX;\n            tetroList[0].y = positionY;\n        }\n        else{fixedTetro();}\n    }\n\n    \/\/\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u30c6\u30c8\u30ed\u30df\u30ce\u3092\u56fa\u5b9a\u3059\u308b\u95a2\u6570\n    function fixedTetro(){\n        let beforeX, beforeY, color;\n        for(let i=0; i<4; i++){\n            beforeX = tetroList[0].tetro[i*2] + tetroList[0].x;\n            beforeY = tetroList[0].tetro[i*2+1] + tetroList[0].y;\n            color = tetroList[0].tetro[8];\n            arrayField[beforeY][beforeX] = color;\n        }\n        checkLine();\n        changeTetro();\n    }\n\n    \/\/\u30e9\u30a4\u30f3\u304c\u305d\u308d\u3063\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3059\u308b\u95a2\u6570\n    function checkLine(){\n        let point = [0, 40, 100, 300, 1200];\n        let lineCount = 0;\n        for(let i=0; i<20; i++){\n            if(arrayField[i].indexOf("black")==-1){lineCount++;}\n        }\n        score += point[lineCount];\n        sc.textContent = "SCORE: " + score;\n\n        for(let i=19; i>=0; i--){\n            if(arrayField[i].indexOf("black")==-1){\n                arrayField.splice(i, 1);\n                delSound.play();\n            }\n        }\n        for(let i=0; i<lineCount; i++){\n            let sub = [];\n            for(let j=0; j<10; j++){\n                sub.push("black");\n            }\n            arrayField.unshift(sub);\n        }\n    }\n\n    \/\/\u56fa\u5b9a\u3057\u305f\u30c6\u30c8\u30ed\u30df\u30ce\u3092\u30ea\u30b9\u30c8\u304b\u3089\u524a\u9664\uff06\u65b0\u30c6\u30c8\u30ed\u30df\u30ce\u3092\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3059\u308b\u95a2\u6570\n    function changeTetro(){\n        tetroList.shift();\n        tetroList.push(new Tetro());\n        inSound.play();\n        let isMove = judgeMove(tetroList[0].tetro, 4, 1);\n        if(isMove==false){over();}\n        nextDraw();\n    }\n\n    \/\/\u30b2\u30fc\u30e0\u30aa\u30fc\u30d0\u30fc\u51e6\u7406\u306e\u95a2\u6570\n    function over(){\n        fieldDraw();\n        bgm.pause();\n        bgm.currentTime = 0;\n        gameOver.play();\n        clearInterval(timer1);\n        clearInterval(timer2);\n        clearInterval(timer3);\n        document.getElementById("start").style.visibility = "visible";\n        document.removeEventListener("keydown", keyDown); \n        document.removeEventListener("keyup", keyUp);\n        document.removeEventListener("touchstart", touchStart, {passive:false});\n        document.removeEventListener("touchend", touchEnd, {passive:false});\n    }\n\n<\/script>\n<\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n
\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8b1b\u5ea7\u3067\u4f5c\u3063\u305f\u300c\u7c21\u6613\u7248\u300d\u30c6\u30c8\u30ea\u30b9\u306e\u30b3\u30fc\u30c9\u306f\u30b3\u30c1\u30e9\u3002<\/p>\n\n\n
<!DOCTYPE html>\n<html lang="ja">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n<\/head>\n<body style="background-color:blue">\n    <canvas id="canvas1" width="250px" height="500px"><\/canvas>\n    <script>\n        let x=4, y=0, moveDown=false;\n        let can = document.getElementById("canvas1").getContext("2d");\n\n        \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u30c7\u30fc\u30bf\n        let arrayTetros = [[-1, 0, 0, 0, 1, 0, 0, 1, "magenta"],    \/\/T\u578b\n                           [ 0, 0, 1, 0,-1, 1, 0, 1, "green"  ],    \/\/S\u578b\n                           [-1, 0, 0, 0, 1, 0,-1, 1, "orange" ],    \/\/L\u578b\n                           [-1, 0, 0, 0, 1, 0, 1, 1, "blue"   ],    \/\/J\u578b\n                           [-1, 0, 0, 0, 1, 0, 2, 0, "cyan"   ],    \/\/I\u578b\n                           [-1, 0, 0, 0,-1, 1, 0, 1, "yellow" ],    \/\/O\u578b\n                           [-1, 0, 0, 0, 0, 1, 1, 1, "red"    ]];   \/\/Z\u578b\n                    \n        \/\/\u30d5\u30a3\u30fc\u30eb\u30c9\u30c7\u30fc\u30bf \u2192 all"black"\n        let arrayField = []\n        for(let y=0; y<20; y++){\n            let sub = [];\n            for(let x=0; x<10; x++){\n                sub.push("black");\n            }\n            arrayField.push(sub);\n        }\n\n        \/\/\u6700\u521d\u306e\u30c6\u30c8\u30ed\u30df\u30ce\u3092\u30e9\u30f3\u30c0\u30e0\u306b\u9078\u629e\n        let arrayTetro = arrayTetros[Math.floor(Math.random()*arrayTetros.length)];\n\n        \/\/\u30d6\u30ed\u30c3\u30af\u3092\u63cf\u753b\u3059\u308b\u95a2\u6570\n        function draw(){\n            if(moveDown==true){                 \/\/\u4e0b\u30ad\u30fc\u304c\u62bc\u3055\u308c\u3066\u3044\u308c\u3070\u4e0b\u79fb\u52d5\n                let afterTetro=arrayTetro, afterX=x, afterY=y;\n                afterY+=1;\n                let result = judgeMove(afterTetro, afterX, afterY);\n                if(result){\n                arrayTetro = afterTetro, x = afterX, y = afterY;\n                }\n            }\n            for(let y=0; y<arrayField.length; y++){     \/\/\u30af\u30ea\u30a2\n                for(let x=0; x<arrayField[y].length; x++){\n                    can.fillStyle = arrayField[y][x];            \n                    can.fillRect(x*25, y*25, 25,25);\n                    can.strokeStyle = "black";\n                    can.strokeRect(x*25, y*25, 25, 25);\n                }\n            }\n            for(let i=0; i<4; i++){             \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u63cf\u753b\n                can.fillStyle = arrayTetro[8];\n                can.strokeStyle = "black";\n                can.fillRect((arrayTetro[i*2]+x)*25,(arrayTetro[i*2+1]+y)*25,25,25);\n                can.strokeRect((arrayTetro[i*2]+x)*25,(arrayTetro[i*2+1]+y)*25,25,25);\n            }\n        }\n\n        \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u3092\u30ad\u30fc\u5165\u529b\u3068\u306f\u95a2\u4fc2\u306a\u304f\u843d\u4e0b\u3055\u305b\u308b\u95a2\u6570\n        function dropTetro(){\n            let afterTetro=arrayTetro, afterX=x, afterY=y+1;\n                let result = judgeMove(afterTetro, afterX, afterY);\n                if(result){\n                arrayTetro = afterTetro, x = afterX, y = afterY;\n                }\n                else if(result==false){         \/\/\u30c6\u30c8\u30ed\u30df\u30ce\u3092\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u56fa\u5b9a\u3059\u308b\n                    for(let i=0; i<4; i++){\n                        let fixX = arrayTetro[i*2]+x;\n                        let fixY = arrayTetro[i*2+1]+y;\n                        let color = arrayTetro[8];\n                        arrayField[fixY][fixX] = color;\n                    }\n\n                    lineDelete();       \/\/\u305d\u308d\u3063\u305f\u5217\u3092\u524a\u9664\u3059\u308b\u95a2\u6570\u3092\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\n\n                    \/\/\u65b0\u3057\u3044\u30c6\u30c8\u30ed\u30df\u30ce\u9078\u629e\u3068\u521d\u671f\u5316\n                    arrayTetro = arrayTetros[Math.floor(Math.random()*arrayTetros.length)];\n                    x=4, y=0, moveDown=false;\n\n                    \/\/\u30b2\u30fc\u30e0\u30aa\u30fc\u30d0\u30fc\u306e\u5224\u5b9a\n                    afterTetro=arrayTetro, afterX=x, afterY=y+1;\n                    result = judgeMove(afterTetro, afterX, afterY);\n                    if(result==false){\n                        clearInterval(timer1);\n                        clearInterval(timer2);\n                        window.alert("Game Over!");\n                    }\n                }\n        }\n\n        \/\/\u305d\u308d\u3063\u305f\u30e9\u30a4\u30f3\u3092\u524a\u9664\u3059\u308b\u95a2\u6570\n        function lineDelete(){\n            for(let i=0; i<20; i++){\n                if(arrayField[i].indexOf("black")==-1){\n                    arrayField.splice(i,1);\n                    let sub = []\n                    for(let j=0; j<10; j++){\n                        sub.push("black");\n                    }\n                    arrayField.unshift(sub);\n                }\n            }\n        }\n\n        \/\/\u30bb\u30c3\u30c8\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb(\u7e70\u308a\u8fd4\u3057\u51e6\u7406)\n        let timer1 = setInterval(draw, 50);\n        let timer2 = setInterval(dropTetro, 1000);\n\n        \/\/\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u8a2d\u5b9a\n        document.addEventListener("keydown", keyDown);\n        document.addEventListener("keyup", keyUp);\n        \n        \/\/\u30ad\u30fc\u304c\u62bc\u3055\u308c\u305f\u3068\u304d\u306e\u95a2\u6570\n        function keyDown(e){\n            let afterTetro=arrayTetro.concat(), afterX=x, afterY=y;\n            \/\/\u4e0b\u79fb\u52d5\n            if(e.key=="ArrowDown"){moveDown=true;}\n            \/\/\u5de6\u53f3\u79fb\u52d5\n            if(e.key=="ArrowRight"){afterX+=1;}\n            if(e.key=="ArrowLeft"){afterX-=1;}\n            \/\/\u56de\u8ee2(\u6642\u8a08\u56de\u308a)\n            if(e.key=="ArrowUp" && arrayTetro[8]!="yellow"){\n                for(let i=0; i<4; i++){\n                    afterTetro[i*2] = arrayTetro[i*2+1]*-1;\n                    afterTetro[i*2+1] = arrayTetro[i*2];\n                }\n            }\n            \/\/\u56de\u8ee2(\u53cd\u6642\u8a08\u56de\u308a)\n            if(e.key==" " && arrayTetro[8]!="yellow"){\n                for(let i=0; i<4; i++){\n                    afterTetro[i*2] = arrayTetro[i*2+1];\n                    afterTetro[i*2+1] = arrayTetro[i*2]*-1;\n                }\n            }\n            \/\/\u79fb\u52d5\u53ef\u80fd\u5224\u5b9a\u3092\u3059\u308b\u95a2\u6570\u3092\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\n            let result = judgeMove(afterTetro, afterX, afterY);\n            if(result){\n                arrayTetro = afterTetro, x = afterX, y = afterY;\n            }\n        }\n\n        \/\/\u30ad\u30fc\u304c\u96e2\u3055\u308c\u305f\u3068\u304d\u306e\u95a2\u6570\n        function keyUp(e){\n            if(e.key=="ArrowDown"){moveDown=false;}\n        }\n\n        \/\/\u79fb\u52d5\u53ef\u80fd\u5224\u5b9a\u3092\u3059\u308b\u95a2\u6570\n        function judgeMove(afterTetro, afterX, afterY){\n            for(let i=0; i<4; i++){\n                if(afterTetro[i*2]+afterX<0 || afterTetro[i*2]+afterX>9 ||\n                    afterTetro[i*2+1]+afterY<0 || afterTetro[i*2+1]+afterY>19){\n                    return false;\n                }\n                let moveX = afterTetro[i*2]+afterX, moveY = afterTetro[i*2+1]+afterY;\n                if(arrayField[moveY][moveX]!="black"){\n                    return false;\n                }\n            }\n            return true;\n        }\n        \n    <\/script>\n<\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30dc\u30af\u306e\u904b\u55b6\u3059\u308bYouTube\u30c1\u30e3\u30f3\u30cd\u30eb\u306e\u3072\u3068\u3064\u300c\u305f\u3051\u3061\u3083\u3093\u306d\u308b \u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u300d\u3002 JavaScript\u5165\u9580\u30b7\u30ea\u30fc\u30ba\u300e\u5b8c\u5168\u521d\u5fc3\u8005\u304c\u30c6\u30c8\u30ea\u30b9\u3092\u4f5c\u308c\u308b\u3088\u3046\u306b\u306a\u308b\u52d5\u753b\u300f\u3082\u3059\u3067\u306b\u5927\u8a70\u3081\u3002 \u3042\u3068\u306f\u5b9f\u969b\u306b\u30c6\u30c8\u30ea\u30b9 […]<\/p>\n","protected":false},"author":1,"featured_media":11588,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[350,340],"tags":[351,304],"class_list":["post-11573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming","tag-tetris","tag-youtube"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts\/11573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11573"}],"version-history":[{"count":17,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts\/11573\/revisions"}],"predecessor-version":[{"id":11631,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts\/11573\/revisions\/11631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/media\/11588"}],"wp:attachment":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}