蘑菇與熊游戲開發第二回（讓蘑菇動起來）

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

定義蘑菇實例：由于在畫布上的物體全部都有3個共同的屬性：x、y坐標，素材image。所以我們定義一個公用的游戲物體。為了方便拓展，定義一個公用的蘑菇。

上回分析了游戲，在這一回我們將讓蘑菇跟隨鼠標動起來~

達到這個效果：http://www.html5china.com/html5games/mogu/index1.html

一、寫html代碼

<body>         
    <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">         
        <canvas id="canvas" width="480" height="320" >         
        </canvas>         
    </div>         
</body>

用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();          
    }

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

<!DOCTYPE>     
<html>     
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>蘑菇動起來-html5中文網</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 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);      
    });      
    
     
</script>     
</head>     
     
<body>     
    <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">     
        <canvas id="canvas" width="480" height="320" >     
        </canvas>     
    </div>     
       </body>     
</html>

蘑菇圖片下載地址：http://www.html5china.com/html5games/mogu/images/mushroom.png

背景圖片下載地址：http://www.html5china.com/html5games/mogu/images/forest1.jpg

你試著在支持html5的瀏覽器上運行上面代碼試看~是不是蘑菇描繪出來了~

假如你能看到效果了，那祝賀你~你有了個很好的開端~

上面的步驟只是將蘑菇和場景繪出來了，那么接下來我們讓他隨鼠標動起來~

給DIV#container添加放上鼠標的事件

當鼠標放在DIV#container上面時，蘑菇的X軸坐標等與鼠標的X軸坐標

//事件處理      
function addEventHandlers()      
{      
    //鼠標移動則蘑菇跟著移動      
    $("#container").mousemove(function(e){      
        mushroom.x = e.pageX - (mushroom.image.width/2);      
    });       
          
}

我們只要在剛才的演示代碼中的 $(window).ready(function(){ }); 里面加上addEventHandlers();就可以了，如下

//初始化      
$(window).ready(function(){     
    addEventHandlers();//加上事件   
    loadImages();         
    ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫布         
    mushroom.image = mushroomImg;      
    screenWidth = parseInt($("#canvas").attr("width"));      
    screenHeight = parseInt($("#canvas").attr("height"));      
    mushroom.x = parseInt(screenWidth/2);      
    mushroom.y = screenHeight - 40;       
    setInterval(gameLoop, 10);      
});

你再運行代碼試下，是不是蘑菇跟著鼠標動起來了~

第二回就講到這了，第三回講怎么繪制一只熊并讓他滾動起來~

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

【編輯推薦】

蘑菇與熊游戲開發***回（游戲分析）
蘑菇與熊游戲開發第三回（讓熊動起來）
蘑菇與熊游戲開發第四回（熊碰撞邊界處理）
蘑菇與熊游戲開發第五回（熊碰撞蘑菇處理）
蘑菇與熊游戲開發第六回（繪制獎品）
蘑菇與熊游戲開發第七回（熊碰到獎品處理）
蘑菇與熊游戲開發第八回（完善游戲）

責任編輯：張偉來源： HTML5China

HTML5