蘑菇与熊游戏开发第二回（让蘑菇动起来）

用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把蘑菇绘制出来

 
 
 
  
  
  
//循环描绘物体          
  
  
  
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();          
  
  
  
    }       
 
 

好了，到这里蘑菇也定义了，背景图也定义了，绘图也定义了，下面就开始整合上面的代码写一个完整的把蘑菇和背景描述在画布上

 
 
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
   
  
  
  
     
  
  
  
     
  
  
  
    //全局变量      
  
  
  
    var backgroundForestImg = new Image();//森林背景图      
  
  
  
    var mushroomImg = new Image();//蘑菇      
  
  
  
    var ctx;//2d画布      
  
  
  
    var screenWidth;//画布宽度      
  
  
  
    var screenHeight;//画布高度      
  
  
  
          
  
  
  
    //公用 定义一个游戏物体戏对象      
  
  
  
    function GameObject()      
  
  
  
    {      
  
  
  
        this.x = 0;      
  
  
  
        this.y = 0;      
  
  
  
        this.image = null;      
  
  
  
    }      
  
  
  
          
  
  
  
    //定义蘑菇Mushroom 继承游戏对象GameObject      
  
  
  
    function Mushroom() {};      
  
  
  
    Mushroom.prototype = new GameObject();//游戏对象GameObject      
  
  
  
          
  
  
  
    //蘑菇实例      
  
  
  
    var mushroom = new Mushroom();      
  
  
  
    //循环描绘物体      
  
  
  
    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();      
  
  
  
        }      
  
  
  
    //加载图片      
  
  
  
    function loadImages()      
  
  
  
    {      
  
  
  
        mushroomImg.src = "images/mushroom.png";//蘑菇      
  
  
  
        backgroundForestImg.src = "images/forest1.jpg";//森林背景图      
  
  
  
    }         
  
  
  
    //初始化      
  
  
  
    $(window).ready(function(){       
  
  
  
        loadImages();              
  
  
  
        ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布         
  
  
  
        screenWidth = parseInt($("#canvas").attr("width")); //画布宽度    
  
  
  
        screenHeight = parseInt($("#canvas").attr("height"));      
  
  
  
        mushroom.image = mushroomImg;      
  
  
  
        mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标     
  
  
  
        mushroom.y = screenHeight - 40;//蘑菇Y坐标       
  
  
  
        setInterval(gameLoop, 10);      
  
  
  
    });