質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

2098閲覧

htmlでの15パズル

corum117

総合スコア9

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/07/23 02:03

java eclipseのhtmlでこんな感じの15パズルを作ったのですがこれを画像を並び替えるようにしたいです。

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title>15 puzzle</title> 5 <meta charset="UTF-8"> 6 <style> 7 .tile { 8 width: 70px; 9 height: 70px; 10 border: 1px solid blue; 11 border-radius: 10px; 12 text-align: center; 13 font-size: 36px; 14 background-color: white; 15 box-shadow: rgb(128, 128, 128) 5px 5px; 16 } 17 </style> 18 <script> 19 "use strict"; 20 21 22 var tiles = []; 23 24 25 function init() { 26 var table = document.getElementById("table"); 27 28 for (var i = 0 ; i < 4 ; i++) { 29 var tr = document.createElement("tr"); 30 for (var j = 0 ; j < 4 ; j++) { 31 var td = document.createElement("td"); 32 var index = i * 4 + j; 33 td.className = "tile"; 34 td.index = index; 35 td.value = index; 36 td.textContent = index == 0 ? "" : index; 37 td.onclick = click; 38 tr.appendChild(td); 39 tiles.push(td); 40 } 41 table.appendChild(tr); 42 } 43 44 for (var i = 0 ; i < 1000 ; i++) { 45 click({ srcElement: {index: Math.floor(Math.random() * 16)}}) 46 } 47 } 48 49 function click(e) { 50 var i = e.srcElement.index; 51 52 if (i - 4 >= 0 && tiles[i - 4].value == 0) { 53 swap(i, i - 4); 54 } else if (i + 4 < 16 && tiles[i + 4].value == 0) { 55 swap(i, i + 4); 56 } else if (i % 4 != 0 && tiles[i - 1].value == 0) { 57 swap(i, i - 1); 58 } else if (i % 4 != 3 && tiles[i + 1].value == 0) { 59 swap(i, i + 1); 60 } 61 } 62 63 function swap(i, j) { 64 var tmp = tiles[i].value; 65 tiles[i].textContent = tiles[j].textContent; 66 tiles[i].value = tiles[j].value; 67 tiles[j].textContent = tmp; 68 tiles[j].value = tmp; 69 } 70 </script> 71</head> 72<body onload="init()"> 73 <table id="table"></table> 74</body> 75</html>

ここからどういじれば良いでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/07/23 04:20

質問タグが「JAVA」になっていますが「JavaScript」の間違いではないでしょうか?また、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
guest

回答3

0

8パズルを作ってるサイトがあるのでそちらを参考にしてください8パズル 応用してみてください

投稿2022/07/29 12:07

ibuki_rei

総合スコア95

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

背景画像にでもすればいいのですが、一枚絵のまま行いたい場合は CSS のbackground-position で調整する方法があります。
https://developer.mozilla.org/ja/docs/Web/CSS/background-position

よくアイコン表示に使われる手法で、「CSSスプライト」で検索すればたくさん出てくると思います
例:https://parashuto.com/rriver/development/css-sprite

投稿2018/08/24 06:32

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

もし本当に、クリック時に並べ替え処理をきちんと動かしたいだけなら1行の修正でOKです。

Javascript

1 function click(e) { 2 //var i = e.srcElement.index; <- verをletに変更 3 let i = e.srcElement.index; 4 5 if (i - 4 >= 0 && tiles[i - 4].value == 0) { 6 swap(i, i - 4); 7 } else if (i + 4 < 16 && tiles[i + 4].value == 0) { 8 swap(i, i + 4); 9 } else if (i % 4 != 0 && tiles[i - 1].value == 0) { 10 swap(i, i - 1); 11 } else if (i % 4 != 3 && tiles[i + 1].value == 0) { 12 swap(i, i + 1); 13 } 14 }

投稿2018/08/24 06:00

nekoniki

総合スコア2409

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問