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

这一回我们让熊动起来。

目前创新互联已为上千家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、莫力达网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

预期达到效果：http://www.html5china.com/html5games/mogu/index2.html

一、先定义全局变量

 
 
 

  
  
  
var bearEyesClosedImg = new Image();//闭着眼睛的熊熊       
  
  
  
var horizontalSpeed = 2;//水平速度      
  
  
  
var verticalSpeed = -2; //垂直速度,开始肯定是要向上飘，所以要负数      
  
  
  
var bearAngle = 2;//熊旋转的速度    
 
 
 

二、定义熊

首先定义一只公用熊

 
 
 

  
  
  
//定义动物熊 Animal 继承 游戏对象GameObject      
  
  
  
function Animal() {};      
  
  
  
Animal.prototype = new GameObject();//游戏对象GameObject      
  
  
  
Animal.prototype.angle = 0;//旋转的角度，（用来改变熊的旋转速度)    
 
 
 

定义我们使用的熊

 
 
 

  
  
  
//定义熊实例       
  
  
  
var animal = new Animal();    
 
 
 

初始化熊

 
 
 

  
  
  
bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的      
  
  
  
animal.image = bearEyesClosedImg;//熊图片      
  
  
  
animal.x = parseInt(screenWidth/2);//x坐标      
  
  
  
animal.y = parseInt(screenHeight/2); //y坐标    
 
 
 

三、描绘熊在画布上

因为熊是相对移动的，所以我们要加一个基准

 
 
 

  
  
  
//以当前熊的中心位置为基准      
  
  
  
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));    
 
 
 

但是熊要旋转啊，好的，想要改变它的角度，上面的代码中加入旋转

 
 
 

  
  
  
//以当前熊的中心位置为基准      
  
  
  
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
//根据当前熊的角度轮换      
  
  
  
ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
//描绘熊      
  
  
  
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));    
 
 
 

上面的熊是不动的，为什么呢，因为x,y轴和角度没变，因此我们再加上改变x,y和角度的代码,于是上面的代码变成了

 
 
 

  
  
  
//改变移动动物X和Y位置      
  
  
  
animal.x += horizontalSpeed;      
  
  
  
animal.y += verticalSpeed;      
  
  
  
//改变翻滚角度      
  
  
  
animal.angle += bearAngle;      
  
  
  
//以当前熊的中心位置为基准      
  
  
  
        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
//根据当前熊的角度轮换      
  
  
  
    ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
//描绘熊      
  
  
  
    ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));    
 
 
 

到现目前为止熊已经能滚动和移动了，最终代码如下：

 
 
 

  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
     
  
  
  
        
  
  
  
        
  
  
  
    //全局变量         
  
  
  
    var backgroundForestImg = new Image();//森林背景图         
  
  
  
    var mushroomImg = new Image();//蘑菇       
  
  
  
    var bearEyesClosedImg = new Image();//闭着眼睛的熊熊       
  
  
  
    var ctx;//2d画布         
  
  
  
    var screenWidth;//画布宽度         
  
  
  
    var screenHeight;//画布高度       
  
  
  
    var speed = 2;//不变常量,从新开始的速度        
  
  
  
    var horizontalSpeed = speed;//水平速度,随着熊的碰撞会发生改变      
  
  
  
    var verticalSpeed = -speed; //垂直速度,开始肯定是要向上飘，所以要负数，随着熊的碰撞会发生改变      
  
  
  
    var bearAngle = 2;//熊旋转的速度      
  
  
  
    //公用 定义一个游戏物体戏对象         
  
  
  
    function GameObject()         
  
  
  
    {         
  
  
  
        this.x = 0;         
  
  
  
        this.y = 0;         
  
  
  
        this.image = null;         
  
  
  
    }         
  
  
  
             
  
  
  
    //定义蘑菇Mushroom 继承游戏对象GameObject         
  
  
  
    function Mushroom() {};         
  
  
  
    Mushroom.prototype = new GameObject();//游戏对象GameObject         
  
  
  
    //蘑菇实例         
  
  
  
    var mushroom = new Mushroom();        //循环描绘物体        
  
  
  
           
  
  
  
    //定义动物熊 Animal 继承 游戏对象GameObject      
  
  
  
    function Animal() {};      
  
  
  
    Animal.prototype = new GameObject();//游戏对象GameObject      
  
  
  
    Animal.prototype.angle = 0;//动物的角度，目前中（即作为动物它在屏幕上旋转退回）      
  
  
  
    //定义熊实例       
  
  
  
    var animal = new Animal();      
  
  
  
          
  
  
  
    function GameLoop()         
  
  
  
    {         
  
  
  
        //清除屏幕         
  
  
  
        ctx.clearRect(0, 0, screenWidth, screenHeight);         
  
  
  
        ctx.save();         
  
  
  
        //绘制背景         
  
  
  
        ctx.drawImage(backgroundForestImg, 0, 0);         
  
  
  
        //绘制蘑菇         
  
  
  
        ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
  
  
  
        //绘制熊      
  
  
  
        //改变移动动物X和Y位置      
  
  
  
        animal.x += horizontalSpeed;      
  
  
  
        animal.y += verticalSpeed;      
  
  
  
        //改变翻滚角度      
  
  
  
        animal.angle += bearAngle;      
  
  
  
        //以当前熊的中心位置为基准      
  
  
  
        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
        //根据当前熊的角度轮换      
  
  
  
        ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
        //描绘熊      
  
  
  
        ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));      
  
  
  
        ctx.restore();      
  
  
  
        }         
  
  
  
    //加载图片         
  
  
  
    function LoadImages()         
  
  
  
    {         
  
  
  
        mushroomImg.src = "images/mushroom.png";//蘑菇         
  
  
  
        backgroundForestImg.src = "images/forest1.jpg";//森林背景图        
  
  
  
        bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的      
  
  
  
              
  
  
  
        mushroom.image = mushroomImg;         
  
  
  
        animal.image = bearEyesClosedImg;      
  
  
  
    }       
  
  
  
    //事件处理         
  
  
  
    function AddEventHandlers()         
  
  
  
    {         
  
  
  
        //鼠标移动则蘑菇跟着移动         
  
  
  
        $("#container").mousemove(function(e){         
  
  
  
            mushroom.x = e.pageX - (mushroom.image.width/2);         
  
  
  
        });          
  
  
  
                 
  
  
  
    }       
  
  
  
    //初始化         
  
  
  
    $(window).ready(function(){          
  
  
  
        AddEventHandlers();//添加事件        
  
  
  
        LoadImages();                 
  
  
  
        ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布            
  
  
  
        screenWidth = parseInt($("#canvas").attr("width")); //画布宽度       
  
  
  
        screenHeight = parseInt($("#canvas").attr("height"));         
  
  
  
        //初始化蘑菇      
  
  
  
        mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标        
  
  
  
        mushroom.y = screenHeight - 40;//蘑菇Y坐标         
  
  
  
        //初始化熊      
  
  
  
        animal.x = parseInt(screenWidth/2);      
  
  
  
        animal.y = parseInt(screenHeight/2);       
  
  
  
        setInterval(GameLoop, 10);         
  
  
  
    });         
  
  
  
       
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
            
  
  
  
               
  
  
  
        浏览器不支持html5,请下载支持html5的浏览器来观看