HTML5打磚塊游戲canvas_第1頁
HTML5打磚塊游戲canvas_第2頁
HTML5打磚塊游戲canvas_第3頁
HTML5打磚塊游戲canvas_第4頁
HTML5打磚塊游戲canvas_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、使用canvas + js <!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><div id="" style="text-align: center;"><canvas id="" width="480" height="320"></canv

2、as></div><script type="text/javascript">var canvas = document.querySelector("canvas");var paint = canvas.getContext("2d");/畫出游戲畫布：黑色paint.fillStyle="black"paint.fillRect(0,0,canvas.width,canvas.height);/* * 游戲中每個(gè)元素：1，小球、2，磚塊、3，擋板； */小球：先畫一個(gè)小球，讓小

3、球滾動(dòng)起來；var ball_x=40;var ball_y=190;var ball_r=10;var ball_speed_x=5;var ball_speed_y=5;/磚塊：定義磚塊類，創(chuàng)建磚塊對象；function Brick(x,y,width,height)this.x = x;this.y = y;this.width = width;this.height = height;this.isShow = true;/創(chuàng)建磚塊var brick_x = 23;var brick_y = 20;var brick_width = 50;var brick_height = 10;v

4、ar x_off = 5;var y_off = 5;/首先，創(chuàng)建一個(gè)磚塊/var brick = new Brick(brick_x,brick_y,brick_width,brick_height);/創(chuàng)建50個(gè)磚塊var bricks = new Array();for(i=0;i<50;i+)/focuson: 注意if里面的條件if(brick_x + brick_width > canvas.width)brick_x = 23;brick_y += brick_height + y_off;/focuson:注意順序，先創(chuàng)建一個(gè)磚塊，然后再給x坐標(biāo)+;var bric

5、k = new Brick(brick_x,brick_y,brick_width,brick_height);brick_x += brick_width + x_off;bricks.push(brick);/擋板：創(chuàng)建擋板var box_x = 10;var box_y = 280;var box_width = 80;var box_height = 15;/定義方法，讓擋板跟隨鼠標(biāo)移動(dòng)canvas.onmousemove = function(e)box_x = e.pageX - canvas.width + 200;/清除小球軌跡function clearcanvas()pai

6、nt.beginPath();paint.fillStyle="black"paint.fillRect(0,0,canvas.width,canvas.height);paint.closePath();setInterval(function()/清除小球移動(dòng)痕跡clearcanvas();/繪制小球paint.fillStyle="aqua"paint.arc(ball_x,ball_y,ball_r,0,2*Math.PI,false);paint.fill();/繪制一個(gè)磚塊/paint.fillStyle="aqua"/p

7、aint.fillRect(brick.x,brick.y,brick.width,brick.height);/繪制50個(gè)磚塊paint.fillStyle="aqua"for(i=0;i<bricks.length;i+)/如果磚塊是顯示狀態(tài)，才顯示；if(bricksi.isShow)paint.fillRect(bricksi.x,bricksi.y,bricksi.width,bricksi.height);/* * 判斷并設(shè)置磚塊的顯示狀態(tài) * 1，判斷 if(磚.顯示 && 球_x + 球_r > 磚.x && 球_

8、x - 球_r < 磚.x + 磚.width)2，再判斷 if(球_y + 球_r > 磚.y && 球_y - 球_r < 磚.y + 磚.height)球_速_y = -球_速_y;磚.顯示 = false; */if(bricksi.isShow &&ball_x+ball_r > bricksi.x && ball_x-ball_r<bricksi.x + bricksi.width)if(ball_y+ball_r > bricksi.y && ball_y-ball_r<br

9、icksi.y + bricksi.height)bricksi.isShow = false;ball_speed_y = - ball_speed_y;/focuson:下面代碼不需要！因?yàn)椴恍枰淖儀方向/ball_speed_x = - ball_speed_x;/繪制擋板paint.fillRect(box_x,box_y,box_width,box_height);/paint.fillRect(40,300,80,15);/判斷小球是否與擋板碰撞if(ball_x+ball_r > box_x && ball_x-ball_r<box_x + box_width)if(ball_y+ball_r > box_y && ball_y-ball_r<box_y + box_height)ball_speed_y = - ball_speed_y;/讓小球動(dòng)起來；改變其x y坐標(biāo)ball_x += ball_speed_x;ball_y += ball_speed_y;/讓小球碰到周邊后,反彈if(ball_x>=canvas.width | ball_x<=0)ball_sp

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論