返回列表 發帖

20121006=ok

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. </head>
  5. <body>
  6. <div id="gameArea"><canvas id="gameCanvas"></canvas></div>
  7. <script>
  8. var gameHeight = window.innerHeight; //取得瀏覽器內容的高度,放進設定的遊戲視窗高度。
  9. var gameWidth = window.innerWidth; //取得瀏覽器內容的寬度,放進設定的遊戲視窗寬度。

  10. var gameArea = document.getElementById("gameArea"); //利用"gameArea"這個ID來取得該Div
  11. var gameCanvas = document.getElementById("gameCanvas"); //利用"gameCanvas"這個ID來取得該Canvas
  12. gameArea.style.height = gameHeight; //設定gameArea的高度為遊戲視窗高度
  13. gameArea.style.width = gameWidth; //設定gameArea的寬度為遊戲視窗寬度
  14. gameCanvas.height = gameHeight; //設定gameCanvas的高度為遊戲視窗高度
  15. gameCanvas.width = gameWidth; //設定gameCanvas的高度為遊戲視窗寬度
  16. gameCanvas.addEventListener("mousedown",doMouseDown,false);

  17. function doMouseDown(event)
  18. {
  19.         alert("x="+event.pageX+";y="+event.pageY);
  20. }

  21. var ctx = gameCanvas.getContext("2d"); //取得gameCanvas的2D容器(Context)

  22. function clearScreen()
  23. {
  24.         ctx.fillStyle = "rgb(255,255,255)";
  25.         ctx.fillRect(0,0,gameWidth,gameHeight);
  26. }

  27. function drawArc(x,y,r,color)
  28. {
  29.         ctx.beginPath();
  30.         ctx.fillStyle = color;
  31.         ctx.arc(x,y,r,0,Math.PI*2,true);
  32.         ctx.fill();
  33. }

  34. var x = 500;
  35. var y = 100;
  36. var r = 30;
  37. var d = 7;
  38. var balls = 7;

  39. var seats = new Array(balls);
  40. for(var i=0;i<balls;i++)
  41.         seats[i] = new Array(balls);

  42. function initGame()
  43. {
  44.         for(var i=0;i<balls;i++)
  45.                 for(var j=0;j<i;j++)
  46.                         seats[i][j] = 0;
  47. }

  48. function gameLoop()
  49. {
  50.         clearScreen();
  51.         for(var i = 0;i < balls;i++)
  52.         {
  53.         for(var j=0;j<=i;j++)
  54.         {
  55.                 if(seats[i][j]==0)
  56.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,255,128)");
  57.                 else
  58.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,128,128)");
  59.                 }
  60.         }
  61.        
  62.         setTimeout(gameLoop,200);
  63. }       
  64. initGame();
  65. gameLoop();
  66. </script>
  67. </body>
複製代碼

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. </head>
  5. <body>
  6. <div id="gameArea"><canvas id="gameCanvas"></canvas></div>
  7. <script>
  8. var gameHeight = window.innerHeight; //取得瀏覽器內容的高度,放進設定的遊戲視窗高度。
  9. var gameWidth = window.innerWidth; //取得瀏覽器內容的寬度,放進設定的遊戲視窗寬度。

  10. var gameArea = document.getElementById("gameArea"); //利用"gameArea"這個ID來取得該Div
  11. var gameCanvas = document.getElementById("gameCanvas"); //利用"gameCanvas"這個ID來取得該Canvas
  12. gameArea.style.height = gameHeight; //設定gameArea的高度為遊戲視窗高度
  13. gameArea.style.width = gameWidth; //設定gameArea的寬度為遊戲視窗寬度
  14. gameCanvas.height = gameHeight; //設定gameCanvas的高度為遊戲視窗高度
  15. gameCanvas.width = gameWidth; //設定gameCanvas的高度為遊戲視窗寬度
  16. gameCanvas.addEventListener("mousedown",doMouseDown,false);
  17. var ctx = gameCanvas.getContext("2d"); //取得gameCanvas的2D容器(Context)

  18. var x = 500;
  19. var y = 100;
  20. var r = 20;
  21. var d = 10;
  22. var balls = 7;


  23. function clearScreen()
  24. {
  25. ctx.fillStyle = "rgb(255,255,255)";
  26. ctx.fillRect(0,0,gameWidth,gameHeight);
  27. }

  28. function doMouseDown(event)
  29. {
  30.         alert("x="+event.pageX+";y="+event.pageY);
  31. }

  32. function drawArc(x,y,r,color)
  33. {
  34. ctx.beginPath();
  35. ctx.fillStyle = color;
  36. ctx.arc(x,y,r,0,Math.PI*2,true);
  37. ctx.fill();
  38. }

  39. clearScreen();

  40. var steats = new Array(balls);

  41. for(var i=0;i<balls;i++)
  42. {
  43. steats[i]= new Array(balls);
  44. }
  45. function initGame()
  46. {
  47.         for(var i=0;i<balls;i++)
  48.         {
  49.                 for(var f=0;f<i;f++)
  50.                 {
  51.                 steats[i][f]=0;
  52.                 }
  53.         }
  54. }
  55. function gameLoop(){
  56. clearScreen();
  57. for(var i = 0;i < balls;i++)
  58. {
  59.         for(var f=0;f<=i;f++)
  60.         {
  61.                
  62.             if(steats[i][f]==1)
  63.                 {
  64.                 drawArc(x-i*(r*2+d)/2+(r*2+d)*f,y+r*2*i,r,"rgb(0,225,225)");
  65.                        
  66.                 }else
  67.                 {
  68.                 drawArc(x-i*(r*2+d)/2+(r*2+d)*f,y+r*2*i,r,"rgb(0,0,225)");
  69.                 }
  70.                        
  71.         }
  72.         setTimeout(gameLoop,200);
  73. }
  74. }
  75. initGame();
  76. gameLoop();
  77. </script>
  78. </body>
複製代碼
水桶小鄭,鯰魚

TOP

返回列表