Board logo

標題: 20121013 [打印本頁]
作者: ray    時間: 2012-10-13 11:11     標題: 20121013

本帖最後由 ray 於 2012-10-13 11:37 編輯

按下該棋子變色,其他的復原
  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. var x = 500;
  20. var y = 100;
  21. var r = 30;
  22. var d = 7;
  23. var balls = 7;

  25. function doMouseDown(event)
  26. {
  27.         //alert("x="+event.pageX+";y="+event.pageY);
  28.                 for(var i=0;i<balls;i++)
  29.                 {
  30.                 for(var j=0;j<=i;j++)
  31.                                 {
  32.                                         if(event.pageX > x-i*(r*2+d)/2+(r*2+d)*j-r && event.pageX < x-i*(r*2+d)/2+(r*2+d)*j+r && event.pageY > y+r*2*i-r && event.pageY < y+r*2*i+r)
  33.                         seats[i][j] = 1;
  34.                                         else
  35.                                                 seats[i][j] = 0;
  36.                                 }
  37.                 }
  38. }

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

  42. function clearScreen()
  43. {
  44.         ctx.fillStyle = "rgb(255,255,255)";
  45.         ctx.fillRect(0,0,gameWidth,gameHeight);
  46. }

  48. function drawArc(x,y,r,color)
  49. {
  50.         ctx.beginPath();
  51.         ctx.fillStyle = color;
  52.         ctx.arc(x,y,r,0,Math.PI*2,true);
  53.         ctx.fill();
  54. }

  56. var seats = new Array(balls);
  57. for(var i=0;i<balls;i++)
  58.         seats[i] = new Array(balls);

  60. function initGame()
  61. {
  62.         for(var i=0;i<balls;i++)
  63.                 for(var j=0;j<=i;j++)
  64.                         seats[i][j] = 0;
  65. }

  67. function gameLoop()
  68. {
  69.         clearScreen();
  70.         for(var i = 0;i <balls;i++)
  71.         {
  72.         for(var j=0;j<=i;j++)
  73.         {
  74.                 if(seats[i][j]==0)
  75.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,255,128)");
  76.                 else
  77.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,128,128)");
  78.                 }
  79.         }
  80.         
  81.         setTimeout(gameLoop,200);
  82. }        
  83. initGame();
  84. gameLoop();
  85. </script>
  86. </body>
複製代碼
作者: ray    時間: 2012-10-13 11:33

本帖最後由 ray 於 2012-10-13 11:36 編輯

按一次變深色，再按一次變回淺色
  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. var x = 500;
  20. var y = 100;
  21. var r = 30;
  22. var d = 7;
  23. var balls = 7;

  25. function doMouseDown(event)
  26. {
  27.         //alert("x="+event.pageX+";y="+event.pageY);
  28.                 for(var i=0;i<balls;i++)
  29.                 {
  30.                 for(var j=0;j<=i;j++)
  31.                                 {
  32.                                         if(event.pageX > x-i*(r*2+d)/2+(r*2+d)*j-r && event.pageX < x-i*(r*2+d)/2+(r*2+d)*j+r && event.pageY > y+r*2*i-r && event.pageY < y+r*2*i+r)
  33.                     {
  34.                                                 if(seats[i][j] == 0)
  35.                                                         seats[i][j] = 1;
  36.                                                 else
  37.                                                         seats[i][j] = 0;
  38.                                         }
  39.                                 }
  40.                 }
  41. }

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

  45. function clearScreen()
  46. {
  47.         ctx.fillStyle = "rgb(255,255,255)";
  48.         ctx.fillRect(0,0,gameWidth,gameHeight);
  49. }

  51. function drawArc(x,y,r,color)
  52. {
  53.         ctx.beginPath();
  54.         ctx.fillStyle = color;
  55.         ctx.arc(x,y,r,0,Math.PI*2,true);
  56.         ctx.fill();
  57. }

  59. var seats = new Array(balls);
  60. for(var i=0;i<balls;i++)
  61.         seats[i] = new Array(balls);

  63. function initGame()
  64. {
  65.         for(var i=0;i<balls;i++)
  66.                 for(var j=0;j<=i;j++)
  67.                         seats[i][j] = 0;
  68. }

  70. function gameLoop()
  71. {
  72.         clearScreen();
  73.         for(var i = 0;i <balls;i++)
  74.         {
  75.         for(var j=0;j<=i;j++)
  76.         {
  77.                 if(seats[i][j]==0)
  78.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,255,128)");
  79.                 else
  80.                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,128,128)");
  81.                 }
  82.         }
  83.         
  84.         setTimeout(gameLoop,200);
  85. }        
  86. initGame();
  87. gameLoop();
  88. </script>
  89. </body>
複製代碼
作者: ray    時間: 2012-10-13 11:51

在棋子上面畫上字
  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. var x = 500;
  20. var y = 100;
  21. var r = 30;
  22. var d = 7;
  23. var balls = 7;

  25. function doMouseDown(event)
  26. {
  27.         //alert("x="+event.pageX+";y="+event.pageY);
  28.                 for(var i=0;i<balls;i++)
  29.                 {
  30.                 for(var j=0;j<=i;j++)
  31.                                 {
  32.                                         if(event.pageX > x-i*(r*2+d)/2+(r*2+d)*j-r && event.pageX < x-i*(r*2+d)/2+(r*2+d)*j+r && event.pageY > y+r*2*i-r && event.pageY < y+r*2*i+r)
  33.                     {
  34.                                                 if(seats[i][j] == 0)
  35.                                                         seats[i][j] = 1;
  36.                                                 else
  37.                                                         seats[i][j] = 0;
  38.                                         }
  39.                                 }
  40.                 }
  41. }

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

  45. function clearScreen()
  46. {
  47.         ctx.fillStyle = "rgb(255,255,255)";
  48.         ctx.fillRect(0,0,gameWidth,gameHeight);
  49. }

  51. function drawArc(x,y,r,color)
  52. {
  53.         ctx.beginPath();
  54.         ctx.fillStyle = color;
  55.         ctx.arc(x,y,r,0,Math.PI*2,true);
  56.         ctx.fill();
  57. }

  59. var seats = new Array(balls);
  60. for(var i=0;i<balls;i++)
  61.         seats[i] = new Array(balls);

  63. function initGame()
  64. {
  65.         for(var i=0;i<balls;i++)
  66.                 for(var j=0;j<=i;j++)
  67.                         seats[i][j] = 0;
  68. }

  70. function gameLoop()
  71. {
  72.         clearScreen();
  73.         for(var i = 0;i <balls;i++)
  74.         {
  75.                         for(var j=0;j<=i;j++)
  76.                         {
  77.                                         if(seats[i][j]==0)
  78.                                                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,255,128)");
  79.                                         else
  80.                                         {
  81.                                                         drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,128,128)");
  82.                                                         ctx.fillStyle = "rgb(0,0,0)";
  83.                                                         ctx.font = "italic bold 30px sans-serif";
  84.                                                         ctx.textBaseline = "bottom";
  85.                                                         ctx.fillText(seats[i][j],x-i*(r*2+d)/2+(r*2+d)*j-r/2,y+r*2*i+r/2);
  86.                                         }
  87.                         }
  88.                           
  89.                 }
  90.         
  91.         setTimeout(gameLoop,200);
  92. }        
  93. initGame();
  94. gameLoop();
  95. </script>
  96. </body>
複製代碼




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