html5 Canvas實現的小球彈跳游戲

2024-09-05 12:19:04

字體：大中小

來源：轉載

供稿：網友

html5 Canvas實現的小球彈跳游戲，其實不能算是游戲，僅是實現了小球彈跳的整個過程，要想成為游戲，還需要添加一些游戲控制模塊。現在HTML5網頁游戲很流行，從小游戲開始，多看一些小游戲代碼，對于HTML5網頁游戲開發是有幫助的。本代碼亮點：注釋豐富。測試請使用FF/OPERA/CHROME瀏覽器。

<!DOCTYPE html><head><meta charset="UTF-8"><title>HTML5小球彈跳游戲</title><script type="text/javascript">var BallX,BallY; //小球在canvas元素中的橫坐標與縱坐標var AddX,AddY; //小球每次移動時的橫向移動距離與縱向移動距離var width,height;//canvas元素的寬度與高度var canvas;//canvas元素var context;//canvas元素的圖形上下文對象var functionId;//用來停止動畫函數的整型變量//點擊開始游戲按鈕function btnBegin_onclick(){    canvas=document.getElementById("canvas");//獲取canvas元素    width=canvas.width;//獲取canvas元素的寬度    height=canvas.height;//獲取canvas元素的高度    context=canvas.getContext('2d'); //獲取canvas元素的圖形上下文對象    BallX=parseInt(Math.random()*canvas.width);//隨機設置小球的當前橫坐標    BallY=parseInt(Math.random()*canvas.height);//隨機設置小球的當前縱坐標    AddX=-5;//設置小球每次橫向移動距離為5    AddY=-5;//設置小球每次縱向移動距離為5    draw();//繪制矩形桌面與小球　　//使開始游戲按鈕變為無效    document.getElementById("btnBegin").disabled="disabled";    //每0.1秒重繪矩形桌面與小球，改變小球位置以產生動畫效果    functionId=setInterval("draw()",100);}//重繪矩形桌面與小球function draw(){    context.clearRect(0,0,width,height);//清除canvas元素中的內容    context.save();//保存當前繪制狀態    context.fillStyle="lightgreen"; //設置桌面為淡綠色    context.strokeStyle="black";//設置桌面邊框為黑色    context.linewidth=3; //設置桌面邊框寬度    context.fillRect(3,3,width-5,height-5);//繪制淡綠色桌面    context.strokeRect(3,3,width-5,height-5);//繪制桌面黑色邊框。    context.beginPath();//開始創建路徑    context.fillStyle="blue";//設置小球為藍色    context.arc(BallX,BallY,5,0,Math.PI * 2,false);//創建小球路徑    BallX+=AddX;//計算小球移動后的下次繪制時的橫坐標    BallY+=AddY;//計算小球移動后的下次繪制時的縱坐標    if(BallX<5)//小球向左移動時位置超過左邊框    {	BallX=5;//將小球移到桌面內        AddX=-AddX;//改變小球移動方向，使其向右移動    }    else if(BallX>width-5)//小球向右移動時位置超過右邊框    {        BallX=width-5;//將小球移到桌面內        AddX=-AddX;//改變小球移動方向，使其向左移動    }    if(BallY<5)//小球向上移動時位置超過上邊框    {        BallY=5;//將小球移到桌面內        AddY=-AddY;//改變小球移動方向，使其向下移動    }    else if(BallY>height-5)//小球向下移動時位置超過下邊框    {        BallY=height-5;//將小球移到桌面內        AddY=-AddY;//改變小球移動方向，使其向上移動    }    context.closePath();//關閉路徑    context.fill(); //繪制小球    context.restore();//恢復上次保存的繪制狀態}function canvas_mouseup(ev){    var differenceX;//鼠標擊中點與小球中心點的橫向偏差    var differenceY; //鼠標擊中點與小球中心點的縱向偏差    //計算鼠標擊中點與小球中心點的橫向偏差    differenceX=ev.pageX-document.getElementById("canvas").offsetLeft-BallX;   //計算鼠標擊中點與小球中心點的縱向偏差    differenceY=ev.pageY-document.getElementById("canvas").offsetTop-BallY;    //如果橫向偏差與縱向偏差均在5個像素之內即為擊中小球，因為小球的半徑為5    if(-5<=differenceX&&differenceX<=5)        if(-5<=differenceY&&differenceY<=5)        {            alert("您獲勝了！游戲結束");            clearInterval(functionId);//停止動畫            //恢復開始游戲按鈕為有效狀態            document.getElementById("btnBegin").disabled="";        }}//畫面打開時添加鼠標點擊canvas元素時的事件處理function window_onload(){    document.getElementById("canvas").onmouseup=canvas_mouseup;}</script></head><body onload="window_onload()"><h1>html5 Canvas實現的小球彈跳游戲</h1><input type="button" id="btnBegin" value="開始游戲"onclick="btnBegin_onclick()"/><br/><canvas id="canvas" width=400px height=200px></canvas></body></html>

上一篇：CSS實現的網頁水平翻轉效果

下一篇：HTML5使用canvas元素繪制指針式動畫時鐘