html 5 canvas 在線遊戲體驗

繪圖區尺寸，寬 480px 高 520px。瀏覽器未支援繪圖程式。
  1. optGame.dt={h:1.5,v:4}; optGame.ball={r:10,dx:optGame.dt.h,dy:-optGame.dt.v,color:'#fff'}; optGame.drawCircle=function (x,y,r) { optGame.canvas.ctx.beginPath(); optGame.canvas.ctx.arc(x, y, r, 0, Math.PI*2, true); optGame.canvas.ctx.closePath(); optGame.canvas.ctx.fill(); } /*繪製*/ function draw() { /*取得動畫速率*/ animaReq=requestAnimationFrame(draw); optGame.canvas.ctx.fillStyle = optGame.color.bg; optGame.clear(); /*畫球*/ optGame.canvas.ctx.fillStyle=optGame.ball.color; optGame.drawCircle(optGame.ball.x,optGame.ball.y,optGame.ball.r); /*移動球*/ if (optGame.ball.x + optGame.ball.dx + optGame.ball.r > optGame.canvas.width || optGame.ball.x + optGame.ball.dx - optGame.ball.r < 0) optGame.ball.dx = -optGame.ball.dx; if (optGame.ball.y + optGame.ball.dy + optGame.ball.r > optGame.canvas.height || optGame.ball.y + optGame.ball.dy - optGame.ball.r < 0) optGame.ball.dy = -optGame.ball.dy; optGame.ball.x += optGame.ball.dx; optGame.ball.y += optGame.ball.dy; } /*開始執行*/ (function(){ optGame.ball.x=Math.random()*optGame.canvas.width*.95; optGame.ball.y=Math.random()*(optGame.canvas.height/2)*.85+(optGame.canvas.height/2); draw(); })();
  2. optGame.dt={h:1.5,v:4}; optGame.ball={r:10,dx:optGame.dt.h,dy:-optGame.dt.v,color:'#fff'}; optGame.paddle={width:75,height:10,x:optGame.canvas.width/2,dx:5,color:'#ccc',rightDown:false,leftDown:false}; optGame.drawCircle=function (x,y,r) { optGame.canvas.ctx.beginPath(); optGame.canvas.ctx.arc(x, y, r, 0, Math.PI*2, true); optGame.canvas.ctx.closePath(); optGame.canvas.ctx.fill(); }; optGame.drawRect=function (x,y,w,h) { optGame.canvas.ctx.beginPath(); optGame.canvas.ctx.rect(x,y,w,h); optGame.canvas.ctx.closePath(); optGame.canvas.ctx.fill(); }; /*左右方向鍵控制拍子*/ optGame.paddle.onKeyDown=function(e){ if (e.keyCode == 39) optGame.paddle.rightDown=true; else if (e.keyCode == 37) optGame.paddle.leftDown = true; }; optGame.paddle.onKeyUp=function(e){ if (e.keyCode == 39) optGame.paddle.rightDown = false; else if (e.keyCode == 37) optGame.paddle.leftDown = false; }; /*滑鼠控制拍子*/ optGame.paddle.onMouseMove=function (e) { if(!e.offsetX){ e.offsetX=e.pageX-$(e.currentTarget).offset().left; } if(e.offsetX>0 && e.offsetX < optGame.canvas.width){ optGame.paddle.x=Math.max(e.offsetX-(optGame.paddle.width/2),0); optGame.paddle.x=Math.min(optGame.canvas.width-optGame.paddle.width,optGame.paddle.x); } }; $(document).on('keydown.boo',optGame.paddle.onKeyDown); $(document).on('keyup.boo',optGame.paddle.onKeyUp); optGame.canvas.jq.on('mousemove.boo',optGame.paddle.onMouseMove); /*繪製*/ function draw() { /*取得動畫速率*/ animaReq=requestAnimationFrame(draw); optGame.canvas.ctx.fillStyle = optGame.color.bg; optGame.clear(); /*畫球*/ optGame.canvas.ctx.fillStyle=optGame.ball.color; optGame.drawCircle(optGame.ball.x,optGame.ball.y,optGame.ball.r); /*畫拍子*/ if (optGame.paddle.rightDown && (optGame.paddle.x+optGame.paddle.width) < optGame.canvas.width) optGame.paddle.x += optGame.paddle.dx; if (optGame.paddle.leftDown && optGame.paddle.x > 0) optGame.paddle.x-= optGame.paddle.dx; optGame.canvas.ctx.fillStyle = optGame.paddle.color; optGame.drawRect(optGame.paddle.x, optGame.canvas.height-optGame.paddle.height, optGame.paddle.width, optGame.paddle.height); /*移動球*/ if (optGame.ball.x + optGame.ball.dx + optGame.ball.r > optGame.canvas.width || optGame.ball.x + optGame.ball.dx - optGame.ball.r < 0) optGame.ball.dx = -optGame.ball.dx; if (optGame.ball.y + optGame.ball.dy + optGame.ball.r > optGame.canvas.height || optGame.ball.y + optGame.ball.dy - optGame.ball.r < 0) optGame.ball.dy = -optGame.ball.dy; optGame.ball.x += optGame.ball.dx; optGame.ball.y += optGame.ball.dy; } /*開始執行*/ (function(){ optGame.ball.x=Math.random()*optGame.canvas.width*.95; optGame.ball.y=Math.random()*(optGame.canvas.height/2)*.85+(optGame.canvas.height/2); draw(); })();
  3. optGame.dt={h:1.5,v:4}; optGame.ball={r:10,dx:optGame.dt.h,dy:-optGame.dt.v,color:'#fff'}; optGame.paddle={width:75,height:10,x:optGame.canvas.width/2,dx:5,color:'#ccc',rightDown:false,leftDown:false}; optGame.bricks={rows:5,cols:8,gap:1,height:15,rowColors:["#c0f", "#c5f", "#c7f", "#c9f", "#caf"]}; optGame.bricks.width=(optGame.canvas.width/optGame.bricks.cols) - optGame.bricks.gap; optGame.bricks.rowHeight=optGame.bricks.height + optGame.bricks.gap; optGame.bricks.colWidth=optGame.bricks.width + optGame.bricks.gap; optGame.drawCircle=function (x,y,r) { optGame.canvas.ctx.beginPath(); optGame.canvas.ctx.arc(x, y, r, 0, Math.PI*2, true); optGame.canvas.ctx.closePath(); optGame.canvas.ctx.fill(); }; optGame.drawRect=function (x,y,w,h) { optGame.canvas.ctx.beginPath(); optGame.canvas.ctx.rect(x,y,w,h); optGame.canvas.ctx.closePath(); optGame.canvas.ctx.fill(); }; /*左右方向鍵控制拍子*/ optGame.paddle.onKeyDown=function(e){ if (e.keyCode == 39) optGame.paddle.rightDown=true; else if (e.keyCode == 37) optGame.paddle.leftDown = true; }; optGame.paddle.onKeyUp=function(e){ if (e.keyCode == 39) optGame.paddle.rightDown = false; else if (e.keyCode == 37) optGame.paddle.leftDown = false; }; /*滑鼠控制拍子*/ optGame.paddle.onMouseMove=function (e) { if(!e.offsetX){ e.offsetX=e.pageX-$(e.currentTarget).offset().left; } if(e.offsetX > 0 && e.offsetX < optGame.canvas.width){ optGame.paddle.x=Math.max(e.offsetX-(optGame.paddle.width/2),0); optGame.paddle.x=Math.min(optGame.canvas.width-optGame.paddle.width,optGame.paddle.x); } }; $(document).on('keydown.boo',optGame.paddle.onKeyDown); $(document).on('keyup.boo',optGame.paddle.onKeyUp); optGame.canvas.jq.on('mousemove.boo',optGame.paddle.onMouseMove); /*畫磚塊*/ optGame.bricks.init=function(){ optGame.bricks.flag = new Array(optGame.bricks.rows); for (var i=0; i < optGame.bricks.rows; i++) { optGame.bricks.flag[i] = new Array(optGame.bricks.cols); for (var j=0; j < optGame.bricks.cols; j++) { optGame.bricks.flag[i][j] = 1; } } }; optGame.bricks.draw=function () { for (i=0; i < optGame.bricks.rows; i++) { optGame.canvas.ctx.fillStyle = optGame.bricks.rowColors[i]; for (j=0; j < optGame.bricks.cols; j++) { if (optGame.bricks.flag[i][j] == 1) { optGame.drawRect((j * (optGame.bricks.width + optGame.bricks.gap)) + optGame.bricks.gap, (i * (optGame.bricks.height + optGame.bricks.gap)) + optGame.bricks.gap, optGame.bricks.width, optGame.bricks.height); } } } }; /*繪製*/ function draw() { /*取得動畫速率*/ animaReq=requestAnimationFrame(draw); optGame.canvas.ctx.fillStyle = optGame.color.bg; optGame.clear(); /*畫球*/ optGame.canvas.ctx.fillStyle=optGame.ball.color; optGame.drawCircle(optGame.ball.x,optGame.ball.y,optGame.ball.r); /*畫拍子*/ if (optGame.paddle.rightDown && (optGame.paddle.x+optGame.paddle.width) < optGame.canvas.width) optGame.paddle.x += optGame.paddle.dx; if (optGame.paddle.leftDown && optGame.paddle.x>0) optGame.paddle.x-= optGame.paddle.dx; optGame.canvas.ctx.fillStyle = optGame.paddle.color; optGame.drawRect(optGame.paddle.x, optGame.canvas.height-optGame.paddle.height, optGame.paddle.width, optGame.paddle.height); /*重畫磚塊*/ optGame.bricks.draw(); var row = (optGame.ball.y/optGame.bricks.rowHeight) << 0; var col = (optGame.ball.x/optGame.bricks.colWidth) << 0; /*移動球及移除磚塊*/ if (optGame.ball.y < optGame.bricks.rows * optGame.bricks.rowHeight && row >= 0 && col >= 0 && optGame.bricks.flag[row][col] == 1) { optGame.ball.dy = - optGame.ball.dy; optGame.bricks.flag[row][col] = 0; } if (optGame.ball.x + optGame.ball.dx + optGame.ball.r > optGame.canvas.width || optGame.ball.x + optGame.ball.dx - optGame.ball.r < 0) optGame.ball.dx = - optGame.ball.dx; if (optGame.ball.y + optGame.ball.dy - optGame.ball.r < 0) optGame.ball.dy = - optGame.ball.dy; else if (optGame.ball.y + optGame.ball.dy + optGame.ball.r > optGame.canvas.height - optGame.paddle.height) { if (optGame.ball.x > optGame.paddle.x && optGame.ball.x < optGame.paddle.x + optGame.paddle.width) { optGame.ball.dx = 8 * ((optGame.ball.x-(optGame.paddle.x+optGame.paddle.width/2))/optGame.paddle.width); optGame.ball.dy = - optGame.ball.dy; } /*出局，停止遊戲*/ else if (optGame.ball.y + optGame.ball.dy + optGame.ball.r > optGame.canvas.height){ cancelAnimationFrame(animaReq); } } optGame.ball.x += optGame.ball.dx; optGame.ball.y += optGame.ball.dy; } /*開始執行*/ (function(){ optGame.ball.x=Math.random()*optGame.canvas.width*.95; optGame.ball.y=Math.random()*(optGame.canvas.height/2)*.85+(optGame.canvas.height/2); optGame.bricks.init(); optGame.bricks.draw(); draw(); })();