Làm thế nào để cung cấp cho javascript bóng của tôi một hình ảnh động lăn khi nó di chuyển?

Question

Tôi có đoạn code HTML sau:

<img src="game_files/ball.png" id="ball" /> Đó là một div chứa một hình ảnh của một quả bóng (nhìn từ trên xuống của một quả bóng)

bóng này tôi có thể di chuyển với các phím mũi tên của tôi và một số javacript để đi lên, trái, phải, xuống, vv v.v. Tôi làm điều này với mã này:

var ball = function () { 
    var inited = false, 
     el, 
     xcheck = 50, 
     x = 50, 
     ycheck = 50, 
     y = 50, 
     xspeed = 0, 
     yspeed = 0, 
     power = 0.4, 
     friction = 0.99, 
     xwind = 0, 
     ywind = 0, 
     dead = true, 
     timer = function(keys) { 
      if (dead === true) { 
       return; 
      } 
      if (keys[38] === true) { 
       yspeed += power; 
      } 
      if (keys[40] === true) { 
       yspeed -= power; 
      } 
      if (keys[37] === true) { 
       xspeed += power; 
      } 
      if (keys[39] === true) { 
       xspeed -= power; 
      } 
      xspeed = xspeed * friction - xwind; 
      yspeed = yspeed * friction - ywind; 
      if (Math.abs(xspeed) < 0.004) { 
       xspeed = 0; 
      } 
      if (Math.abs(xspeed) < 0.004) { 
       xspeed = 0; 
      } 
      x -= xspeed; 
      y -= yspeed; 
      plane.move(x,y); 
     }; 
    return { 
     init: function() { 
      if (inited != true) { 
       inited = true; 
       el = document.getElementById('ball'); 
       roller.register(timer, 'time'); 
      } 
     } 
    }; 
}(); 

Tất cả đều hoạt động, nhưng quả bóng không có hình động lăn! Hình ảnh chỉ trượt sang trái hoặc phải Làm cách nào để thêm hình ảnh này? Tôi tìm thấy hướng dẫn này: http://www.emanueleferonato.com/2007/06/10/creation-of-realistic-spheres-in-flash-with-textures-and-masking/ mà tôi nghĩ có thể giúp tôi.

Thật không may, đây là cho một quả bóng đèn flash (tôi đã hy vọng điều này sẽ áp dụng trong một số loại để JS quá). Hướng dẫn này cho thấy chính xác những gì tôi muốn: một quả bóng với hình động lăn (xem trang hướng dẫn gần cuối hướng dẫn bóng với làn da beo, ngay bên dưới: Đường 26-37: Nếu vị trí của kết cấu tương đối với quả bóng. ..).

Tôi có thể áp dụng điều này cho quả bóng JS của mình bằng cách nào? Có suy nghĩ gì không?

liên quan Kind và một năm mới hạnh phúc

ps tôi sử dụng/jquery tải cũng

--edit --------

Tạo một fiddle: http://jsfiddle.net/mauricederegt/dhUw5/

1- mở fiddle

2- nhấp vào 1

3 - sử dụng các phím mũi tên để di chuyển quả bóng xung quanh, ở trên cánh đồng xanh!

4- xem, không có hiệu ứng cán

Answer 1

Để có tác dụng tương tự như trong ví dụ Flash bạn đã liên kết, bạn chỉ cần thêm nền cho phần tử và di chuyển tương ứng.

Tôi đã thay thế phần tử img bằng một khoảng và cho nó hình nền qua CSS và bán kính đường viền để làm tròn. Trong chức năng plane.move của bạn tôi đã thêm dòng sau:

document.getElementById('ball').style.backgroundPosition = x + 'px ' + y +'px'; 

Voila, cùng hiệu ứng như trong ví dụ Flash: http://jsfiddle.net/dhUw5/1/

Answer 2

Có thể bạn sẽ sử dụng canvas HTML5. Bạn sẽ cắt một phần của hình ảnh được sử dụng làm bề mặt của quả bóng bằng cách sử dụng drawImage và sau đó mask it to get a circle shape. Sau đó, bạn có thể tạo hiệu ứng động bằng cách vẽ lại canvas, với vị trí cắt (sx, sy) được thay đổi theo cách tương tự như ví dụ flash bạn đã liên kết. (Sau đây là không được kiểm tra; làm cho một jsfiddle với mã ban đầu của bạn nếu bạn muốn thử nó.)

// ... when the user moves 
this.sy += yspeed; 
this.sx += xspeed; 
if (this.sx > textureSize) { 
    this.sx -= textureSize; 
} 
else if (this.sx < 0) { 
    this.sx += textureSize; 
} 
if (this.sy > textureSize) { 
    this.sy -= textureSize; 
} 
else if (this.sy < 0) { 
    this.sy += textureSize; 
} 

// ... redraw the ball once every frame 
context.clearRect(0, 0, canvasWidth, canvasHeight); // clear the canvas 
context.save(); 
context.beginPath(); 
context.arc(this.x, this.y, ballRadius, Math.PI * 2, false); 
context.clip();  
context.drawImage(ballImage, this.sx, this.sy, 
        ballDiameter, ballDiameter, 
        this.x, this.y, 
        ballDiameter, ballDiameter);  // redraw the ball  
context.restore(); 

Hoặc bạn có thể sử dụng một div với kết cấu như hình nền, và mặt nạ nó để thực hiện một vòng tròn sử dụng CSS3 hoặc bằng cách phủ một hình ảnh khác (xem Best way to mask an image in HTML5). Sau đó, bạn sẽ thay đổi tọa độ của hình nền (texture) sử dụng

ballElement.style.backgroundPosition = this.sx + 'px ' + this.sy + 'px';

Answer 3

này là khá dễ dàng nếu bạn sử dụng CSS biến. Trong ví dụ này, tốc độ luân chuyển được xác định theo giá trị vô hướng của tốc độ bóng hiện đang đi du lịch tại địa chỉ:

var increment = Math.round(Math.sqrt(Math.pow(xspeed, 2) + Math.pow(yspeed, 2))); 
    if (!isNaN(increment)) { 
     currangle = currangle + ((xspeed < 0 ? 1 : -1) * increment); 
    } 

    $('#ball').css({ 
     '-webkit-transform': 'rotate(' + currangle + 'deg)' 
    }); 

    $('#ball').css({ 
     '-moz-transform': 'rotate(' + currangle + 'deg)' 
    }); 

Mã này đi trong move phương pháp trong plane.Đây là một minh họa: http://jsfiddle.net/BahnU/show/