javascriptで表に画像を貼る

締切済

質問者：ゆきんこゆき
質問日時：2021/01/23 15:34
回答数：1件

すごろくゲームを作るのに
18マスの表を作って0.png～17.pngまでの18枚の画像を
各セルに貼りたいと思っています。
(0ます目に0.png、1ます目に1.png...)
1枚ずつ貼らずにforループで設定できるかなと
思いましたが、いまいちやり方がわかりません。
どこになにを記述したらよいでしょうか。
下にコードをすべて記述しています。

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

<head>
<meta charset="UTF-8">
<title>sugoroku</title>
<style>
table td {
border-collapse: collapse;
border: 3px solid white;

background-color: #ff7fa5;

}

</style>
</head>

<body>
<input type="button" value='1' onclick='dice(0)'></input>
<input type="button" value='2' onclick='dice(1)'></input>
<input type="button" value='3' onclick='dice(2)'></input>
<input type="button" value='4' onclick='dice(3)'></input>
<table id="table"></table>
<p id="result"></p>

</body>

<script>
const playerNum = 4; // 4人
const MASU = 18; // 18マス
let players = new Array(playerNum);
for (let i = 0; i < players.length; i++) {
players[i] = new Array(18);
players[i][0] = 1; // 全員スタート
}
// テーブル
let tbl = document.getElementById("table");
let tr = document.createElement('tr');

for (let i = 0; i < MASU; i++) {
let td = document.createElement('td');

td.index = i; // 各セルが何マス目かindex属性に記録しておく

tr.appendChild(td)
}
tbl.appendChild(tr);

updateScreen();

function move(playerNum) {
let pos = players[playerNum].indexOf(1);
players[playerNum][pos] = 0;
players[playerNum][++pos] = 1;
updateScreen();
}

function makeString(masu) {
let str = '';
for (let i = 0; i < playerNum; i++)
if (players[i][masu] == 1)
str = `${str} Player${i + 1}`;
return str;
}
// 画面描画を更新
function updateScreen() {
let tbl = document.getElementById('table');
let tr = tbl.firstChild;
let tds = tr.childNodes;
for (let j = 0; j < tds.length; j++) {
let str = makeString(j);
if (str == '') {
tds[j].textContent = '0000000000';
tds[j].style.color = '#ff7fa5';
} else {
tds[j].textContent = str;
tds[j].style.color = 'black';
}

}
}

function dice(i) { // iはプレイヤー番号
let d = document.getElementById("result");
let r = Math.ceil(Math.random() * 6); // playerをrマス動かしたい！

d.textContent = r;
let currentPos = players[i].indexOf(1); // 今いるマス目をゲット
players[i][currentPos] = 0; // 今いるマス目をクリア
if (currentPos + r < 17) {
players[i][currentPos + r] = 1; // マス目分進める
}
else if (currentPos + r > 17) {
players[i][34 - (currentPos + r)] = 1;
}
else if (currentPos + r == 17) {
alert('ゴール！！')
}

updateScreen();
}

function showMessage(str) {
document.getElementById("message").textContent = str;
setTimeout(function () {
document.getElementById("message").textContent = "";
}, 2000);
}

</script>
</head>

</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2021/01/23 18:23

こんばんは

あれっ？　（↓）じゃ、お気に召さなかったのかな？
https://oshiete.goo.ne.jp/qa/12157431.html

＞画像を各セルに貼りたいと思っています。
前回も書きましたが、背景画像にするのと、子要素に入れる方法とが考えられます。
どうやら、後からセルに書き込んでいるようなので、背景画像にしておいたほうが便利そうに思いますけれど、背景画像はセルサイズに影響しませんから、サイズを別途きちんと確保しておくことが必要になりそうな気がします。

ご提示のスクリプトで行いたいのなら・・・
＞tr.appendChild(td)
の前に、
td.style.background = `url("./${i}.jpg") 0 0 / contain`;
を入れておくとか。
（実際は、適切なところであれば、どこでもかまいません）
（IEはテンプレートに対応していないかもしれませんのでご注意）
※ 画像はHTMLと同一階層にあるものと仮定。

画像を背景にすると「000000」とかが見えてきちゃいますけれど、それはまた別の問題なので・・・
また、td要素にはindex属性はありませんので、tabindexやid、classなどで代用するか、あるいはdata-index属性を利用したほうがよさそうに思います。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

その他にも、HTMLにおかしなところが散見されるので、Lintなどで文法チェックをしてみるのも一法かと。
http://www.htmllint.net/html-lint/htmllint.html