スクリプト・複数ファイルをひとつのファイルに
HTML・CSS・JavaScript等が複数ファイルに分かれたものをひとつのファイルにまとめられます。 使用用途としては、ノーコードサイト等ではCSSやJavaScriptを単体では置けないことがあります。故にCSSとJavaScriptも置きたい！って時 一応 HTMLを含めてひとつのファイルにまとめると設置できるようになります
1
0
203
4
投稿日時：
- プロンプト実行例
スクリプトをひとつのファイルにまとめます。
html1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>othello</title> 8 <link rel="stylesheet" href="style.css"> 9</head> 10 11<body> 12 <main> 13 <div id="modal"> 14 <h3>オセロ</h2> 15 <p>マスの数を選択してください</p> 16 <div id="menu"> 17 <p id="4" class="select">4x4</p> 18 <p id="6" class="select">6x6</p> 19 <p id="8" class="select">8x8</p> 20 </div> 21 </div> 22 <div id="restartBtn" class="hide">クリックするとスタート画面に戻ります</div> 23 <div id="content"> 24 25 <table id="board"></table> 26 </div> 27 <div id="counter" class="hide"> 28 <div id="numBlack"></div> 29 <h2></h2> 30 <div id="numWhite"></div> 31 </div> 32 </main> 33 34 <script src="main.js"></script> 35</body> 36 37</html> 38 39"use strict"; 40 41const BLACK = 1, 42 WHITE = -1; 43let data = []; 44let turn = true; 45const board = document.getElementById("board"); 46const h2 = document.querySelector("h2"); 47const counter = document.getElementById("counter"); 48const modal = document.getElementById("modal"); 49document.querySelectorAll(".select").forEach((value) => { 50 value.addEventListener("click", start); 51}); 52let cells = 8; // マスの数 53 54// スタート画面でマスの数が選択された時の処理 55function start(e) { 56 cells = Number(e.target.id); 57 board.innerHTML = ""; 58 init(); 59 modal.classList.add("hide"); 60} 61 62// 初期化 63function init() { 64 for (let i = 0; i < cells; i++) { 65 const tr = document.createElement("tr"); 66 data[i] = Array(cells).fill(0); 67 for (let j = 0; j < cells; j++) { 68 const td = document.createElement("td"); 69 const disk = document.createElement("div"); 70 tr.appendChild(td); 71 td.appendChild(disk); 72 td.className = "cell"; 73 td.onclick = clicked; 74 } 75 board.appendChild(tr); 76 } 77 // マスの数によって石の初期配置を変える 78 switch (cells) { 79 case 4: 80 board.classList.add("cell-4"); 81 putDisc(1, 1, WHITE); 82 putDisc(2, 2, WHITE); 83 putDisc(1, 2, BLACK); 84 putDisc(2, 1, BLACK); 85 break; 86 case 6: 87 board.classList.add("cell-6"); 88 putDisc(2, 2, WHITE); 89 putDisc(3, 3, WHITE); 90 putDisc(2, 3, BLACK); 91 putDisc(3, 2, BLACK); 92 break; 93 case 8: 94 putDisc(3, 3, WHITE); 95 putDisc(4, 4, WHITE); 96 putDisc(3, 4, BLACK); 97 putDisc(4, 3, BLACK); 98 } 99 showTurn(); 100} 101 102init(); 103 104// 石を描画 105function putDisc(x, y, color) { 106 board.rows[y].cells[x].firstChild.className = 107 color === BLACK ? "black" : "white"; 108 board.rows[y].cells[x].animate( 109 { opacity: [0.4, 1] }, 110 { duration: 700, fill: "forwards" } 111 ); 112 data[y][x] = color; 113} 114 115// 手番などの表示 116function showTurn() { 117 h2.textContent = turn ? "黒の番です" : "白の番です"; 118 let numWhite = 0, 119 numBlack = 0, 120 numEmpty = 0; 121 for (let x = 0; x < cells; x++) { 122 for (let y = 0; y < cells; y++) { 123 if (data[x][y] === WHITE) { 124 numWhite++; 125 } 126 if (data[x][y] === BLACK) { 127 numBlack++; 128 } 129 if (data[x][y] === 0) { 130 numEmpty++; 131 } 132 } 133 } 134 document.getElementById("numBlack").textContent = numBlack; 135 document.getElementById("numWhite").textContent = numWhite; 136 137 let blacDisk = checkReverse(BLACK); 138 let whiteDisk = checkReverse(WHITE); 139 140 if (numWhite + numBlack === cells * cells || (!blacDisk && !whiteDisk)) { 141 if (numBlack > numWhite) { 142 document.getElementById("numBlack").textContent = numBlack + numEmpty; 143 h2.textContent = "黒の勝ち!!"; 144 restartBtn(); 145 showAnime(); 146 } else if (numBlack < numWhite) { 147 document.getElementById("numWhite").textContent = numWhite + numEmpty; 148 h2.textContent = "白の勝ち!!"; 149 restartBtn(); 150 showAnime(); 151 } else { 152 h2.textContent = "引き分け"; 153 restartBtn(); 154 showAnime(); 155 } 156 return; 157 } 158 if (!blacDisk && turn) { 159 h2.textContent = "黒スキップ"; 160 showAnime(); 161 turn = !turn; 162 setTimeout(showTurn, 2000); 163 return; 164 } 165 if (!whiteDisk && !turn) { 166 h2.textContent = "白スキップ"; 167 showAnime(); 168 turn = !turn; 169 setTimeout(showTurn, 2000); 170 return; 171 } 172} 173 174// マスがクリックされた時の処理 175function clicked() { 176 const color = turn ? BLACK : WHITE; 177 const y = this.parentNode.rowIndex; 178 const x = this.cellIndex; 179 // マスに置けるかチェック 180 if (data[y][x] !== 0) { 181 return; 182 } 183 const result = checkPut(x, y, color); 184 if (result.length > 0) { 185 result.forEach((value) => { 186 putDisc(value[0], value[1], color); 187 }); 188 turn = !turn; 189 } 190 showTurn(); 191} 192 193// 置いたマスの周囲8方向をチェック 194function checkPut(x, y, color) { 195 let dx, dy; 196 const opponentColor = color == BLACK ? WHITE : BLACK; 197 let tmpReverseDisk = []; 198 let reverseDisk = []; 199 // 周囲8方向を調べる配列 200 const direction = [ 201 [-1, 0], // 左 202 [-1, 1], // 左下 203 [0, 1], // 下 204 [1, 1], // 右下 205 [1, 0], // 右 206 [1, -1], // 右上 207 [0, -1], // 上 208 [-1, -1], // 左上 209 ]; 210 211 // すでに置いてある 212 if (data[y][x] === BLACK || data[y][x] === WHITE) { 213 return []; 214 } 215 // 置いた石の周りに違う色の石があるかチェック 216 for (let i = 0; i < direction.length; i++) { 217 dx = direction[i][0] + x; 218 dy = direction[i][1] + y; 219 if ( 220 dx >= 0 && 221 dy >= 0 && 222 dx <= cells - 1 && 223 dy <= cells - 1 && 224 opponentColor === data[dy][dx] 225 ) { 226 tmpReverseDisk.push([x, y]); 227 tmpReverseDisk.push([dx, dy]); 228 // 裏返せるかチェック 229 while (true) { 230 dx += direction[i][0]; 231 dy += direction[i][1]; 232 if ( 233 dx < 0 || 234 dy < 0 || 235 dx > cells - 1 || 236 dy > cells - 1 || 237 data[dy][dx] === 0 238 ) { 239 tmpReverseDisk = []; 240 break; 241 } 242 if (opponentColor === data[dy][dx]) { 243 tmpReverseDisk.push([dx, dy]); 244 } 245 if (color === data[dy][dx]) { 246 reverseDisk = reverseDisk.concat(tmpReverseDisk); 247 tmpReverseDisk = []; 248 break; 249 } 250 } 251 } 252 } 253 return reverseDisk; 254} 255 256// 裏返せる場所があるか確認 257function checkReverse(color) { 258 for (let x = 0; x < cells; x++) { 259 for (let y = 0; y < cells; y++) { 260 const result = checkPut(x, y, color); 261 console.log(result); 262 if (result.length > 0) { 263 return true; 264 } 265 } 266 } 267 return false; 268} 269 270// ゲーム終了画面 271function restartBtn() { 272 const restartBtn = document.getElementById("restartBtn"); 273 restartBtn.classList.remove("hide"); 274 restartBtn.animate( 275 { opacity: [1, 0.5, 1] }, 276 { delay: 2000, duration: 3000, iterations: "Infinity" } 277 ); 278 279 restartBtn.addEventListener("click", () => { 280 document.location.reload(); 281 }); 282} 283function showAnime() { 284 h2.animate({ opacity: [0, 1] }, { duration: 500, iterations: 4 }); 285} 286 287body { 288 text-align: center; 289} 290main { 291 display: inline-block; 292 position: relative; 293} 294 295/* start */ 296#modal { 297 position: absolute; 298 top: 0; 299 left: 0; 300 width: 100%; 301 height: 100%; 302 background: rgba(31, 19, 19, 0.8); 303 color: white; 304} 305 306#menu { 307 display: flex; 308 justify-content: space-evenly; 309 margin-top: 220px; 310} 311h3, 312p { 313 color: white; 314} 315#menu p { 316 width: 100px; 317 font-size: 24px; 318 padding: 3px; 319 margin: 15px; 320 border: solid 1px white; 321 cursor: pointer; 322 background: black; 323 color: white; 324} 325 326/* game */ 327#board { 328 margin: 0 auto; 329 background: #555555; 330} 331td.cell { 332 background: rgb(128, 216, 154); 333 width: 46px; 334 height: 46px; 335 margin: 2px; 336} 337.cell div { 338 width: 35px; 339 height: 35px; 340 border-radius: 50%; 341 margin: 0 auto; 342} 343.cell-6 > tr > td { 344 width: 63px; 345 height: 63px; 346} 347.cell-6 > tr > td > div { 348 width: 50px; 349 height: 50px; 350} 351.cell-4 > tr > td { 352 width: 92px; 353 height: 92px; 354} 355.cell-4 > tr > td > div { 356 width: 70px; 357 height: 70px; 358} 359.black { 360 background: black; 361} 362.white { 363 background: white; 364} 365h2 { 366 text-align: center; 367 margin: 5px 0; 368} 369#counter { 370 margin: 0 auto; 371 width: 350px; 372 display: flex; 373 line-height: 50px; 374 font-weight: bold; 375 justify-content: space-between; 376} 377#numBlack { 378 font-size: 36px; 379 margin: 5px; 380 width: 100px; 381 height: 50px; 382 background: black; 383 color: white; 384 border-radius: 5px; 385} 386#numWhite { 387 font-size: 36px; 388 margin: 5px; 389 width: 100px; 390 height: 50px; 391 border: solid 1px black; 392 border-radius: 5px; 393} 394 395/* end */ 396#restartBtn { 397 z-index: 1; 398 opacity: 0; 399 position: absolute; 400 width: 100%; 401 height: 50px; 402 line-height: 50px; 403 font-weight: bold; 404 cursor: pointer; 405 top: 50%; 406 left: 50%; 407 transform: translate(-50%, -110%); 408 color: black; 409 background: white; 410} 411.hide { 412 display: none; 413}
html1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>othello</title> 8 <style> 9 /* CSS 코드をここに挿入 */ 10 body { 11 text-align: center; 12 } 13 14 main { 15 display: inline-block; 16 position: relative; 17 } 18 19 /* start */ 20 #modal { 21 position: absolute; 22 top: 0; 23 left: 0; 24 width: 100%; 25 height: 100%; 26 background: rgba(31, 19, 19, 0.8); 27 color: white; 28 } 29 30 #menu { 31 display: flex; 32 justify-content: space-evenly; 33 margin-top: 220px; 34 } 35 36 h3, 37 p { 38 color: white; 39 } 40 41 #menu p { 42 width: 100px; 43 font-size: 24px; 44 padding: 3px; 45 margin: 15px; 46 border: solid 1px white; 47 cursor: pointer; 48 background: black; 49 color: white; 50 } 51 52 /* game */ 53 #board { 54 margin: 0 auto; 55 background: #555555; 56 } 57 58 td.cell { 59 background: rgb(128, 216, 154); 60 width: 46px; 61 height: 46px; 62 margin: 2px; 63 } 64 65 .cell div { 66 width: 35px; 67 height: 35px; 68 border-radius: 50%; 69 margin: 0 auto; 70 } 71 72 .cell-6>tr>td { 73 width: 63px; 74 height: 63px; 75 } 76 77 .cell-6>tr>td>div { 78 width: 50px; 79 height: 50px; 80 } 81 82 .cell-4>tr>td { 83 width: 92px; 84 height: 92px; 85 } 86 87 .cell-4>tr>td>div { 88 width: 70px; 89 height: 70px; 90 } 91 92 .black { 93 background: black; 94 } 95 96 .white { 97 background: white; 98 } 99 100 h2 { 101 text-align: center; 102 margin: 5px 0; 103 } 104 105 #counter { 106 margin: 0 auto; 107 width: 350px; 108 display: flex; 109 line-height: 50px; 110 font-weight: bold; 111 justify-content: space-between; 112 } 113 114 #numBlack { 115 font-size: 36px; 116 margin: 5px; 117 width: 100px; 118 height: 50px; 119 background: black; 120 color: white; 121 border-radius: 5px; 122 } 123 124 #numWhite { 125 font-size: 36px; 126 margin: 5px; 127 width: 100px; 128 height: 50px; 129 border: solid 1px black; 130 border-radius: 5px; 131 } 132 133 /* end */ 134 #restartBtn { 135 z-index: 1; 136 opacity: 0; 137 position: absolute; 138 width: 100%; 139 height: 50px; 140 line-height: 50px; 141 font-weight: bold; 142 cursor: pointer; 143 top: 50%; 144 left: 50%; 145 transform: translate(-50%, -110%); 146 color: black; 147 background: white; 148 } 149 150 .hide { 151 display: none; 152 } 153 </style> 154</head> 155 156<body> 157 <main> 158 <div id="modal"> 159 <h3>オセロ</h2> 160 <p>マスの数を選択してください</p> 161 <div id="menu"> 162 <p id="4" class="select">4x4</p> 163 <p id="6" class="select">6x6</p> 164 <p id="8" class="select">8x8</p> 165 </div> 166 </div> 167 <div id="restartBtn" class="hide">クリックするとスタート画面に戻ります</div> 168 <div id="content"> 169 170 <table id="board"></table> 171 </div> 172 <div id="counter" class="hide"> 173 <div id="numBlack"></div> 174 <h2></h2> 175 <div id="numWhite"></div> 176 </div> 177 </main> 178 179 <script> 180 /* JavaScript コードをここに挿入 */ 181 "use strict"; 182 183 const BLACK = 1, 184 WHITE = -1; 185 let data = []; 186 let turn = true; 187 const board = document.getElementById("board"); 188 const h2 = document.querySelector("h2"); 189 const counter = document.getElementById("counter"); 190 const modal = document.getElementById("modal"); 191 document.querySelectorAll(".select").forEach((value) => { 192 value.addEventListener("click", start); 193 }); 194 let cells = 8; // マスの数 195 196 // スタート画面でマスの数が選択された時の処理 197 function start(e) { 198 cells = Number(e.target.id); 199 board.innerHTML = ""; 200 init(); 201 modal.classList.add("hide"); 202 } 203 204 // 初期化 205 function init() { 206 for (let i = 0; i < cells; i++) { 207 const tr = document.createElement("tr"); 208 data[i] = Array(cells).fill(0); 209 for (let j = 0; j < cells; j++) { 210 const td = document.createElement("td"); 211 const disk = document.createElement("div"); 212 tr.appendChild(td); 213 td.appendChild(disk); 214 td.className = "cell"; 215 td.onclick = clicked; 216 } 217 board.appendChild(tr); 218 } 219 // マスの数によって石の初期配置を変える 220 switch (cells) { 221 case 4: 222 board.classList.add("cell-4"); 223 putDisc(1, 1, WHITE); 224 putDisc(2, 2, WHITE); 225 putDisc(1, 2, BLACK); 226 putDisc(2, 1, BLACK); 227 break; 228 case 6: 229 board.classList.add("cell-6"); 230 putDisc(2, 2, WHITE); 231 putDisc(3, 3, WHITE); 232 putDisc(2, 3, BLACK); 233 putDisc(3, 2, BLACK); 234 break; 235 case 8: 236 putDisc(3, 3, WHITE); 237 putDisc(4, 4, WHITE); 238 putDisc(3, 4, BLACK); 239 putDisc(4, 3, BLACK); 240 } 241 showTurn(); 242 } 243 244 init(); 245 246 // 石を描画 247 function putDisc(x, y, color) { 248 board.rows[y].cells[x].firstChild.className = 249 color === BLACK ? "black" : "white"; 250 board.rows[y].cells[x].animate( 251 { opacity: [0.4, 1] }, 252 { duration: 700, fill: "forwards" } 253 ); 254 data[y][x] = color; 255 } 256 257 // 手番などの表示 258 function showTurn() { 259 h2.textContent = turn ? "黒の番です" : "白の番です"; 260 let numWhite = 0, 261 numBlack = 0, 262 numEmpty = 0; 263 for (let x = 0; x < cells; x++) { 264 for (let y = 0; y < cells; y++) { 265 if (data[x][y] === WHITE) { 266 numWhite++; 267 } 268 if (data[x][y] === BLACK) { 269 numBlack++; 270 } 271 if (data[x][y] === 0) { 272 numEmpty++; 273 } 274 } 275 } 276 document.getElementById("numBlack").textContent = numBlack; 277 document.getElementById("numWhite").textContent = numWhite; 278 279 let blacDisk = checkReverse(BLACK); 280 let whiteDisk = checkReverse(WHITE); 281 282 if (numWhite + numBlack === cells * cells || (!blacDisk && !whiteDisk)) { 283 if (numBlack > numWhite) { 284 document.getElementById("numBlack").textContent = numBlack + numEmpty; 285 h2.textContent = "黒の勝ち!!"; 286 restartBtn(); 287 showAnime(); 288 } else if (numBlack < numWhite) { 289 document.getElementById("numWhite").textContent = numWhite + numEmpty; 290 h2.textContent = "白の勝ち!!"; 291 restartBtn(); 292 showAnime(); 293 } else { 294 h2.textContent = "引き分け"; 295 restartBtn(); 296 showAnime(); 297 } 298 return; 299 } 300 if (!blacDisk && turn) { 301 h2.textContent = "黒スキップ"; 302 showAnime(); 303 turn = !turn; 304 setTimeout(showTurn, 2000); 305 return; 306 } 307 if (!whiteDisk && !turn) { 308 h2.textContent = "白スキップ"; 309 showAnime(); 310 turn = !turn; 311 setTimeout(showTurn, 2000); 312 return; 313 } 314 } 315 316 // マスがクリックされた時の処理 317 function clicked() { 318 const color = turn ? BLACK : WHITE; 319 const y = this.parentNode.rowIndex; 320 const x = this.cellIndex; 321 // マスに置けるかチェック 322 if (data[y][x] !== 0) { 323 return; 324 } 325 const result = checkPut(x, y, color); 326 if (result.length > 0) { 327 result.forEach((value) => { 328 putDisc(value[0], value[1], color); 329 }); 330 turn = !turn; 331 } 332 showTurn(); 333 } 334 335 // 置いたマスの周囲8方向をチェック 336 function checkPut(x, y, color) { 337 let dx, dy; 338 const opponentColor = color == BLACK ? WHITE : BLACK; 339 let tmpReverseDisk = []; 340 let reverseDisk = []; 341 // 周囲8方向を調べる配列 342 const direction = [ 343 [-1, 0], // 左 344 [-1, 1], // 左下 345 [0, 1], // 下 346 [1, 1], // 右下 347 [1, 0], // 右 348 [1, -1], // 右上 349 [0, -1], // 上 350 [-1, -1], // 左上 351 ]; 352 353 // すでに置いてある 354 if (data[y][x] === BLACK || data[y][x] === WHITE) { 355 return []; 356 } 357 // 置いた石の周りに違う色の石があるかチェック 358 for (let i = 0; i < direction.length; i++) { 359 dx = direction[i][0] + x; 360 dy = direction[i][1] + y; 361 if ( 362 dx >= 0 && 363 dy >= 0 && 364 dx <= cells - 1 && 365 dy <= cells - 1 && 366 opponentColor === data[dy][dx] 367 ) { 368 tmpReverseDisk.push([x, y]); 369 tmpReverseDisk.push([dx, dy]); 370 // 裏返せるかチェック 371 while (true) { 372 dx += direction[i][0]; 373 dy += direction[i][1]; 374 if ( 375 dx < 0 || 376 dy < 0 || 377 dx > cells - 1 || 378 dy > cells - 1 || 379 data[dy][dx] === 0 380 ) { 381 tmpReverseDisk = []; 382 break; 383 } 384 if (opponentColor === data[dy][dx]) { 385 tmpReverseDisk.push([dx, dy]); 386 } 387 if (color === data[dy][dx]) { 388 reverseDisk = reverseDisk.concat(tmpReverseDisk); 389 tmpReverseDisk = []; 390 break; 391 } 392 } 393 } 394 } 395 return reverseDisk; 396 } 397 398 // 裏返せる場所があるか確認 399 function checkReverse(color) { 400 for (let x = 0; x < cells; x++) { 401 for (let y = 0; y < cells; y++) { 402 const result = checkPut(x, y, color); 403 if (result.length > 0) { 404 return true; 405 } 406 } 407 } 408 return false; 409 } 410 411 // ゲーム終了画面 412 function restartBtn() { 413 const restartBtn = document.getElementById("restartBtn"); 414 restartBtn.classList.remove("hide"); 415 restartBtn.animate( 416 { opacity: [1, 0.5, 1] }, 417 { delay: 2000, duration: 3000, iterations: "Infinity" } 418 ); 419 420 restartBtn.addEventListener("click", () => { 421 document.location.reload(); 422 }); 423 } 424 425 function showAnime() { 426 h2.animate({ opacity: [0, 1] }, { duration: 500, iterations: 4 }); 427 } 428 </script> 429</body> 430 431</html>
コメント 0
他のプロンプトもチェック
GPTs
キャラクター作成
花押クリエイターは、日本の伝統的な署名や印「花押」のデザインをサポートするためのツールです。国内外のさまざまな文化背景を考慮し、名前やシンボルを基にした個性的で芸術的な花押デザインを提案します。 このツールは、歴史的な作法や文化的背景を尊重しながら、現代的なアプローチにも対応します。作成した花押のコンセプトや意図を分かりやすく説明し、カスタマイズや調整も簡単に行うことが出来ます。 初めての方から花押愛好家まで、どなたでもご利用いただける「花押クリエイター」で、あなただけの特別なデザインを作りませんか？ GPTsストアで高評価していただけると嬉しいです。 #画像作成 #花押 #サイン735.57K12.3KGPTs
キャラクター作成
【はてなブックマーク1位獲得！】【使用回数1000回以上！】プレゼン資料や広報、ポスターに利用可能な、かわいいイラストを生成します。001260
