Question

我想通过添加CSS属性

来设置此数组中的第二个元素的样式

这是一个定义数组的全局变量

<canvas id="canvas"></canvas>
<script>
    var paddles = [2], // Array containing two paddles
function update() {
    // Update scores

    updateScore(); 
    // Move the paddles on mouse move
    // Here we will add another condition to move the upper paddle in Y-Axis
    if(mouse.x && mouse.y) {
        for(var i = 1; i < paddles.length; i++) {

        p = paddles[i];

        // the botoom paddle
        if (i ==1){
            p.x = mouse.x - p.w/2;
        }else{
        // the top paddle
                    //paddles[2].x = mouse.x - p.w/2;
                    debugger
                 paddles[2].style.backgroundColor="red"; 

    }



        }       
    }

这就是我想要的风格

         paddles[2].style.backgroundColor="red";

当我使用调试器时，我遇到了这个问题

TypeError: paddles[2].style is undefined

enter image description here

Answer 1

<强>更新

因为看起来你正在创建某种“乒乓”或“突破”游戏，所以我决定首先尝试HTML画布并自己动手做。这是一个简单的版本，展示了如何：

在画布上绘制两个拨片（原作者）
跟踪数组中的拨片的“框”（原作者）
通过setInterval使用循环来重绘画布（原作者）
使用键盘在HTML画布上移动形状（我的代码）

查看工作演示和完整代码的小提琴：http://jsfiddle.net/z4ckpcLc/1/

我不会发布完整的代码，因为我没有写大部分内容。我使用了这个网站上的示例来绘制框的代码并在数组中跟踪它们：http://simonsarris.com/project/canvasdemo/demo1.html

我在此示例中添加的功能是arrowKeyMove()处理程序，通过以下行连接到onkeydown document.body事件：document.body.onkeydown = arrowKeyMove;

function arrowKeyMove(e) {
    var direction = 0; // -1 means left, 1 means right, 0 means no change
    var moveFactor = 10; // higher factor = more movement when arrow keys pressed
    var arrowKeyUsed = false; // to indicate which 'paddle' we are moving
    switch (e.which) {
        case 37:
            // left arrow (upper paddle)
            direction = -1;
            arrowKeyUsed = true;
            break;
        case 39:
            // right arrow (upper paddle)
            direction = 1;
            arrowKeyUsed = true;
            break;
        case 65:
            // "a" key for left strafe (lower paddle)
            direction = -1;
            break;
        case 68: 
            // "d" key for right strafe (lower paddle)
            direction = 1;
            break;
    }
    var boxIndex = 1; // box index defaults to lower paddle
    if (arrowKeyUsed) { // if using arrow keys, we are moving upper paddle
        boxIndex = 0; 
    }
    var maxX = 240; // constrain movement to within 10px of box borders (240 == canvas width minus paddle width minus padding)
    var minX = 20;
    var box = boxes[boxIndex]; // grab the box; we will update position and redraw canvas
    if((direction < 0 && box.x >= minX) || (direction > 0 && box.x <= maxX))
    {
      // move the box in the desired direction multiplied by moveFactor
      box.x = box.x + (direction * moveFactor);
      invalidate(); // invalidate canvas since graphic elements changed
    }
}

原始答案：

数组项使用从零开始的索引。

如果您只有两条拨片，则必须使用索引1，而不是2。如果您想访问第一个拨片，请使用0，而不是1。您可能希望for循环使用var i=0代替，并且基本上将您正在检查的地点1更改为0。

例如：

paddles[0].style.backgroundColor="red";  // paddle 1
paddles[1].style.backgroundColor="red";  // paddle 2

此外，var array = [2]不会创建双数组元素。它创建一个整数值为2

对于DOM元素，您可能需要以下内容：

<div id='paddle1'></div>
<div id='paddle2'></div>

<script type='text/javascript'>
var paddles = [];
paddles[0] = document.getElementById('paddle1');
paddles[1] = document.getElementById('paddle2');
paddles[0].style.backgroundColor="red";  // paddle 1 is red
paddles[1].style.backgroundColor="orange";  // paddle 2 is orange
</script>

Answer 2

我不确定，但也许你可以使用这样的东西：

＆＃13;

paddles[2].css('background-color','red');

＆＃13;

编辑：现在我看到你没有使用jQuery，所以我的解决方案无法运作

未定义JS数组元素的CSS属性

2 个答案: