蘑菇與熊游戲開(kāi)發(fā)第三回（讓熊動(dòng)起來(lái)）

作者：admin 2012-05-21 10:53:30

一、先定義全局變量、二、定義熊、三、描繪熊在畫布上，注意上面的熊是不動(dòng)的，為什么呢，因?yàn)閤,y軸和角度沒(méi)變，因此我們?cè)偌由细淖儀,y和角度的代碼。

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

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

一、先定義全局變量

var bearEyesClosedImg = new Image();//閉著眼睛的熊熊       
var horizontalSpeed = 2;//水平速度      
var verticalSpeed = -2; //垂直速度,開(kāi)始肯定是要向上飄，所以要負(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)的角度，（用來(lái)改變熊的旋轉(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軸和角度沒(méi)變，因此我們?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)了，最終代碼如下：

<!DOCTYPE>        
<html>        
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
<title>蘑菇動(dòng)起來(lái)-html5中文網(wǎng)</title>        
<!-- 要記得引用jquery-1.4.2.js -->     
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>        
<script type="text/javascript" >        
    //全局變量         
    var backgroundForestImg = new Image();//森林背景圖         
    var mushroomImg = new Image();//蘑菇       
    var bearEyesClosedImg = new Image();//閉著眼睛的熊熊       
    var ctx;//2d畫布         
    var screenWidth;//畫布寬度         
    var screenHeight;//畫布高度       
    var speed = 2;//不變常量,從新開(kāi)始的速度        
    var horizontalSpeed = speed;//水平速度,隨著熊的碰撞會(huì)發(fā)生改變      
    var verticalSpeed = -speed; //垂直速度,開(kāi)始肯定是要向上飄，所以要負(fù)數(shù)，隨著熊的碰撞會(huì)發(fā)生改變      
    var bearAngle = 2;//熊旋轉(zhuǎn)的速度      
    //公用 定義一個(gè)游戲物體戲?qū)ο?nbsp;        
    function GameObject()         
    {         
        this.x = 0;         
        this.y = 0;         
        this.image = null;         
    }         
             
    //定義蘑菇Mushroom 繼承游戲?qū)ο驡ameObject         
    function Mushroom() {};         
    Mushroom.prototype = new GameObject();//游戲?qū)ο驡ameObject         
    //蘑菇實(shí)例         
    var mushroom = new Mushroom();        //循環(huán)描繪物體        
           
    //定義動(dòng)物熊 Animal 繼承 游戲?qū)ο驡ameObject      
    function Animal() {};      
    Animal.prototype = new GameObject();//游戲?qū)ο驡ameObject      
    Animal.prototype.angle = 0;//動(dòng)物的角度，目前中（即作為動(dòng)物它在屏幕上旋轉(zhuǎn)退回）      
    //定義熊實(shí)例       
    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);       
        //繪制熊      
        //改變移動(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));      
        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()         
    {         
        //鼠標(biāo)移動(dòng)則蘑菇跟著移動(dòng)         
        $("#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坐標(biāo)        
        mushroom.y = screenHeight - 40;//蘑菇Y(jié)坐標(biāo)         
        //初始化熊      
        animal.x = parseInt(screenWidth/2);      
        animal.y = parseInt(screenHeight/2);       
        setInterval(GameLoop, 10);         
    });         
       
        
</script>        
</head>        
        
<body>        
    <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">        
        <canvas id="canvas" width="480" height="320" >       
        瀏覽器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">請(qǐng)下載</a>支持html5的瀏覽器來(lái)觀看       
        </canvas>        
    </div>        
       </body>        
</html>

第三回就講到這了，第四回講熊碰撞邊界和蘑菇的事件

原文鏈接：http://www.html5china.com/course/20110101_899.html

【編輯推薦】

蘑菇與熊游戲開(kāi)發(fā)***回（游戲分析）
蘑菇與熊游戲開(kāi)發(fā)第二回（讓蘑菇動(dòng)起來(lái)）
蘑菇與熊游戲開(kāi)發(fā)第四回（熊碰撞邊界處理）
蘑菇與熊游戲開(kāi)發(fā)第五回（熊碰撞蘑菇處理）
蘑菇與熊游戲開(kāi)發(fā)第六回（繪制獎(jiǎng)品）
蘑菇與熊游戲開(kāi)發(fā)第七回（熊碰到獎(jiǎng)品處理）
蘑菇與熊游戲開(kāi)發(fā)第八回（完善游戲）

責(zé)任編輯：張偉來(lái)源： HTML5China

HTML5

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

蘑菇與熊游戲開(kāi)發(fā)第三回（讓熊動(dòng)起來(lái)）