1

三目並べゲームを作ろうとしています。X と O の代わりに画像を使用しているため、クリックされたときに td に画像を入力する必要があります。私はこれを試しました:

function makeDuck(place){
    //this is just so I know the other methods work
    alert("duck");            
    //This is the line I need help with 
    window.location.write('<img src="smallDuck.jpg" width="70" height="70"/>'); 
    squares[place] = 1;
}

function makeBeaver(place){
    //this is just so I know the other methods work
    alert("beaver"); 
    //This is the line I need help with           
    document.zero.write('<img src="smallBeaver.jpg" width="80" height="80"/>');
    squares[place] = 2;
}
4

3 に答える 3

2
function makeDuck(place){
    // first, we must create a new element in the DOM
    var img = document.createElement("IMG");
    // second, we must assign the right attributes
    img.src = "smallDuck.jpg";
    img.width = "70";
    img.height = "70";

    // finally, we append it to the document
    document.body.appendChild(img);

    squares[place] = 1;
}

function makeBeaver(place){
    // first, we must create a new element in the DOM
    var img = document.createElement("IMG");
    // second, we must assign the right attributes
    img.src = "smallBeaver.jpg";
    img.width = "80";
    img.height = "80";

    // finally, we append it to the document
    document.body.appendChild(img);

    squares[place] = 2;
}
于 2012-06-29T00:23:36.333 に答える
1

それを行う 1 つの方法は、javascript を使用して のソースを置き換えることIMGです。したがって、3 x 3 のグリッドがあると仮定すると、各セルには<img />タグが含まれます。それらはすべて一意idの が必要です。

そして、blank.jpg、X.jpg、Y.jpg の 3 つの画像が作成されます。すべてのセルは
<img src='blank.jpg' ... />

Javascript を使用して要素 (getDocumentById(id)) を見つけ、そのプロパティをX または Y 画像のsrcとして設定された URI に設定します。src

于 2012-06-29T00:49:18.683 に答える
0

以下は、最初にスタイルを取得する必要があります。

<style type="text/css">
table.game {
  border: none;
  border-collapse: collapse;
}
table.game td {
  height: 50px;
  width: 50px;
  margin: 0;
  padding: 0;
}
td.topLeft, td.topCenter, td.midLeft, td.midCenter {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

td.topRight, td.midRight {
  border-bottom: 1px solid black;
}

td.botLeft, td.botCenter {
  border-right: 1px solid black;
}

td.botRight { }

.naught {
  background-image: url('naught.jpg');
}
.cross {
  background-image: url('cross.png');
}

</style>

次に、ゲームの HTML

<table class="game" onclick="handleClick(event);">
  <tr>
    <td class="topLeft">
    <td class="topCenter">
    <td class="topRight">
  <tr>
    <td class="midLeft">
    <td class="midCenter">
    <td class="midRight">
  <tr>
    <td class="botLeft">
    <td class="botCenter">
    <td class="botRight">
</table>

次に、画像を交換する簡単なスクリプト:

<script>
var handleClick = (function() {
    var count = 0;

    return function(evt) {
      var el = evt.target || evt.srcElement;
      el.className += ' ' + (count++%2? 'naught' : 'cross');
    }
}());
</script>

同じセルでの複数回のクリックに対処する必要があることに注意してください(クラスにすでに「naught」または「cross」の値があるかどうかを確認し、ある場合は、ユーザーに他の場所をクリックするように指示します)。は。

于 2012-06-29T02:16:27.397 に答える