無需Flash Java的網頁動畫遊戲程式語言

banq發表於2009-08-17
Java網頁動畫遊戲
Processing.js是一個開放的程式語言，在不使用Flash或Java小程式的前提下, 可以實現程式影像、動畫和互動的應用。

Processing.js使用JavaScript繪製形狀sharp和操作HTML5 canvas元素產生影像動畫。

Processing.js是輕量，易於瞭解掌握，並提出一個理想的工具，視覺化的資料，建立使用者介面和開發基於Web的遊戲。

Processing.js可以執行在FireFox, Safari, Opera, Chrome(因為支援HTML5 canvas)，將也會工作Internet Explorer(透過ExplorerCanvas(http://excanvas.sourceforge.net/)).


Processing 語法非常類似Java，主要有setup() draw() exit() mouseMoved()/mousePressed()幾個函式。

// Global variables 全域性變數
int radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas初始化設定
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = width / 2;
  nX = X;
  nY = Y;  
}

// Main draw loop 主要繪畫函式功能
void draw(){
  
  radius = radius + sin( frameCount / 4 );
  
  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
  
  // Fill canvas grey
  background( 100 );
  
  // Set fill-color to blue
  fill( 0, 121, 184 );
  
  // Set stroke-color white
  stroke(255); 
  
  // Draw circle
  ellipse( X, Y, radius, radius );                  
}


// Set circle's next destination 當使用者滑鼠在 Canvas移動時產生的action
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}
<p class="indent">

Processing.js網站:

http://processingjs.org/

案例原始碼下載：http://processingjs.org/source/basic-example/processingjs_basic-example.zip

[該貼被admin於2009-08-19 10:10修改過]

相關文章