日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這一回我們讓熊動(dòng)起來。

目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、莫力達(dá)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

預(yù)期達(dá)到效果：http://www.html5china.com/html5games/mogu/index2.html

一、先定義全局變量

 
 
 

  
  
  
var bearEyesClosedImg = new Image();//閉著眼睛的熊熊       
  
  
  
var horizontalSpeed = 2;//水平速度      
  
  
  
var verticalSpeed = -2; //垂直速度,開始肯定是要向上飄，所以要負(fù)數(shù)      
  
  
  
var bearAngle = 2;//熊旋轉(zhuǎn)的速度    
 
 
 

二、定義熊

首先定義一只公用熊

 
 
 

  
  
  
//定義動(dòng)物熊 Animal 繼承 游戲?qū)ο驡ameObject      
  
  
  
function Animal() {};      
  
  
  
Animal.prototype = new GameObject();//游戲?qū)ο驡ameObject      
  
  
  
Animal.prototype.angle = 0;//旋轉(zhuǎn)的角度，（用來改變熊的旋轉(zhuǎn)速度)    
 
 
 

定義我們使用的熊

 
 
 

  
  
  
//定義熊實(shí)例       
  
  
  
var animal = new Animal();    
 
 
 

初始化熊

 
 
 

  
  
  
bearEyesClosedImg.src = "images/bear_eyesclosed.png";//閉著眼睛的      
  
  
  
animal.image = bearEyesClosedImg;//熊圖片      
  
  
  
animal.x = parseInt(screenWidth/2);//x坐標(biāo)      
  
  
  
animal.y = parseInt(screenHeight/2); //y坐標(biāo)    
 
 
 

三、描繪熊在畫布上

因?yàn)樾苁窍鄬?duì)移動(dòng)的，所以我們要加一個(gè)基準(zhǔn)

 
 
 

  
  
  
//以當(dāng)前熊的中心位置為基準(zhǔn)      
  
  
  
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
//描繪熊      
  
  
  
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));    
 
 
 

但是熊要旋轉(zhuǎn)啊，好的，想要改變它的角度，上面的代碼中加入旋轉(zhuǎn)

 
 
 

  
  
  
//以當(dāng)前熊的中心位置為基準(zhǔn)      
  
  
  
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
//根據(jù)當(dāng)前熊的角度輪換      
  
  
  
ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
//描繪熊      
  
  
  
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));    
 
 
 

上面的熊是不動(dòng)的，為什么呢，因?yàn)閤,y軸和角度沒變，因此我們?cè)偌由细淖儀,y和角度的代碼,于是上面的代碼變成了

 
 
 

  
  
  
//改變移動(dòng)動(dòng)物X和Y位置      
  
  
  
animal.x += horizontalSpeed;      
  
  
  
animal.y += verticalSpeed;      
  
  
  
//改變翻滾角度      
  
  
  
animal.angle += bearAngle;      
  
  
  
//以當(dāng)前熊的中心位置為基準(zhǔn)      
  
  
  
        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
//根據(jù)當(dāng)前熊的角度輪換      
  
  
  
    ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
//描繪熊      
  
  
  
    ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));    
 
 
 

到現(xiàn)目前為止熊已經(jīng)能滾動(dòng)和移動(dòng)了，最終代碼如下：

 
 
 

  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
     
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
            
  
  
  
               
  
  
  
        瀏覽器不支持html5,請(qǐng)下載支持html5的瀏覽器來觀看