[英]User interaction with javascript?
我有以下代碼,該代碼允許用戶與表格進行交互以創建井字游戲,如何更改它以將“ X”和“ O”文本替換為圖像? 這樣,當用戶單擊正方形時,將顯示圖像而不是純文本?
<!DOCTYPE html>
<html>
<head>
<title>tic-tac-toe</title>
<style>
td { border: 1px solid black;
width: 2em;
height: 2em;
margin: 0em;
text-align: center;
vertical-align: middle;
}
div.RedBG { background-color: #f00; }
td.BlueBG { background-color: white; }
</style>
</head>
<body>
<center><table id="t1"></table></center>
<div id="m1"></div>
<script>
var board = var board = [[0,0,0],[0,0,0],[0,0,0]];
var free = 9;
var turn = 0;
function numToLetter(num) {
switch (num) {
case 0: return " "
case 1: return "O"
case 2: return "X"
}
}
function clearMessage() {
m1 = document.getElementById("m1");
m1.style.display = "none";
}
function showMessage(message,style) {
m1 = document.getElementById("m1");
m1.innerHTML = message;
m1.style.display = "block";
m1.className = style;
}
...
更改numToLetter函數以返回td中包含的圖像的源或將該源分配給該圖像...
我認為歸還貨源會更容易,更清潔。
在這種情況下:在numToLetter調用代碼中,將源分配給適當的網格正方形...
function numToSource(num) {
switch (num) {
case 0: return "path/to/blank.png";
case 1: return "path/to/O.png";
case 2: return "path/to/X.png";
}
}
function assignImageSource(gridId, num){
var element = document.getElementById(gridId);
var source = numberToSource(num);
element.src = source;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.