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

用ID為container 的DIV來獲取鼠標移動畫面的事件

canvas用來繪圖

二、定義全局變量

 
 
 
  
  
  
//全局變量             
  
  
  
var backgroundForestImg = new Image();//森林背景圖             
  
  
  
var mushroomImg = new Image();//蘑菇圖             
  
  
  
var ctx;//2d畫布             
  
  
  
var screenWidth;//畫布寬度             
  
  
  
var screenHeight;//畫布高度    
 
 

賦予全局變量值

 
 
 
  
  
  
mushroomImg.src = "images/mushroom.png";//蘑菇             
  
  
  
backgroundForestImg.src = "images/forest1.jpg";//森林背景圖             
  
  
  
ctx = document.getElementById('canvas').getContext('2d');             
  
  
  
screenWidth = parseInt($("#canvas").attr("width"));             
  
  
  
screenHeight = parseInt($("#canvas").attr("height"));     
 
 

三、定義蘑菇實例

由于在畫布上的物體全部都有3個共同的屬性：x、y坐標，素材image

所以我們定義一個公用的游戲物體

 
 
 
  
  
  
//公用 定義一個游戲物體戲對象          
  
  
  
function GameObject()          
  
  
  
{          
  
  
  
    this.x = 0;//x 坐標         
  
  
  
    this.y = 0;//y 坐標         
  
  
  
    this.image = null; //圖片         
  
  
  
}        
 
 

為了方便拓展，定義一個公用的蘑菇

 
 
 
  
  
  
//定義公用蘑菇Mushroom 繼承游戲對象GameObject          
  
  
  
function Mushroom() {};          
  
  
  
Mushroom.prototype = new GameObject();//游戲對象GameObject    
 
 

定義一個我們使用到的具體蘑菇

 
 
 
  
  
  
//蘑菇實例          
  
  
  
var mushroom = new Mushroom();      
 
 

初始化蘑菇的位置和圖片

 
 
 
  
  
  
mushroom.image = mushroomImg;             
  
  
  
mushroom.x = parseInt(screenWidth/2);             
  
  
  
mushroom.y = screenHeight - 40;      
 
 

四、用canvas把蘑菇繪制出來

 
 
 
  
  
  
//循環(huán)描繪物體          
  
  
  
function gameLoop()          
  
  
  
{          
  
  
  
    //清除屏幕          
  
  
  
    ctx.clearRect(0, 0, screenWidth, screenHeight);          
  
  
  
    ctx.save();          
  
  
  
    //繪制背景          
  
  
  
    ctx.drawImage(backgroundForestImg, 0, 0);          
  
  
  
    //繪制蘑菇          
  
  
  
    ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);          
  
  
  
    ctx.restore();          
  
  
  
    }       
 
 

好了，到這里蘑菇也定義了，背景圖也定義了，繪圖也定義了，下面就開始整合上面的代碼寫一個完整的把蘑菇和背景描述在畫布上