Board logo

標題: 20121006=ok [打印本頁]
作者: ray    時間: 2012-10-6 12:01     標題: 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; //取得瀏覽器內容的寬度，放進設定的遊戲視窗寬度。

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

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

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

  26. function clearScreen()
  27. {
  28.         ctx.fillStyle = "rgb(255,255,255)";
  29.         ctx.fillRect(0,0,gameWidth,gameHeight);
  30. }

  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. }

  40. var x = 500;
  41. var y = 100;
  42. var r = 30;
  43. var d = 7;
  44. var balls = 7;

  46. var seats = new Array(balls);
  47. for(var i=0;i<balls;i++)
  48.         seats[i] = new Array(balls);

  50. function initGame()
  51. {
  52.         for(var i=0;i<balls;i++)
  53.                 for(var j=0;j<i;j++)
  54.                         seats[i][j] = 0;
  55. }

  57. function gameLoop()
  58. {
  59.         clearScreen();
  60.         for(var i = 0;i < balls;i++)
  61.         {
  62.         for(var j=0;j<=i;j++)
  63.         {
  64.                 if(seats[i][j]==0)
  65.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,255,128)");
  66.                 else
  67.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,128,128)");
  68.                 }
  69.         }
  70.        
  71.         setTimeout(gameLoop,200);
  72. }       
  73. initGame();
  74. gameLoop();
  75. </script>
  76. </body>
複製代碼
作者: TOM    時間: 2012-10-6 12:04

  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; //取得瀏覽器內容的寬度，放進設定的遊戲視窗寬度。

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

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


  27. function clearScreen()
  28. {
  29. ctx.fillStyle = "rgb(255,255,255)";
  30. ctx.fillRect(0,0,gameWidth,gameHeight);
  31. }

  33. function doMouseDown(event)
  34. {
  35.         alert("x="+event.pageX+";y="+event.pageY);
  36. }

  38. function drawArc(x,y,r,color)
  39. {
  40. ctx.beginPath();
  41. ctx.fillStyle = color;
  42. ctx.arc(x,y,r,0,Math.PI*2,true);
  43. ctx.fill();
  44. }

  46. clearScreen();

  48. var steats = new Array(balls);

  50. for(var i=0;i<balls;i++)
  51. {
  52. steats[i]= new Array(balls);
  53. }
  54. function initGame()
  55. {
  56.         for(var i=0;i<balls;i++)
  57.         {
  58.                 for(var f=0;f<i;f++)
  59.                 {
  60.                 steats[i][f]=0;
  61.                 }
  62.         }
  63. }
  64. function gameLoop(){
  65. clearScreen();
  66. for(var i = 0;i < balls;i++)
  67. {
  68.         for(var f=0;f<=i;f++)
  69.         {
  70.                
  71.             if(steats[i][f]==1)
  72.                 {
  73.                 drawArc(x-i*(r*2+d)/2+(r*2+d)*f,y+r*2*i,r,"rgb(0,225,225)");
  74.                        
  75.                 }else
  76.                 {
  77.                 drawArc(x-i*(r*2+d)/2+(r*2+d)*f,y+r*2*i,r,"rgb(0,0,225)");
  78.                 }
  79.                        
  80.         }
  81.         setTimeout(gameLoop,200);
  82. }
  83. }
  84. initGame();
  85. gameLoop();
  86. </script>
  87. </body>
複製代碼




歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2