- <!DOCTYPE html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <div id="gameArea"><canvas id="gameCanvas"></canvas></div>
- <script>
- var gameHeight = window.innerHeight; //取得瀏覽器內容的高度，放進設定的遊戲視窗高度。
- var gameWidth = window.innerWidth; //取得瀏覽器內容的寬度，放進設定的遊戲視窗寬度。
- var gameArea = document.getElementById("gameArea"); //利用"gameArea"這個ID來取得該Div
- var gameCanvas = document.getElementById("gameCanvas"); //利用"gameCanvas"這個ID來取得該Canvas
- gameArea.style.height = gameHeight; //設定gameArea的高度為遊戲視窗高度
- gameArea.style.width = gameWidth; //設定gameArea的寬度為遊戲視窗寬度
- gameCanvas.height = gameHeight; //設定gameCanvas的高度為遊戲視窗高度
- gameCanvas.width = gameWidth; //設定gameCanvas的高度為遊戲視窗寬度
- gameCanvas.addEventListener("mousedown",doMouseDown,false);
- function doMouseDown(event)
- {
- alert("x="+event.pageX+";y="+event.pageY);
- }
- var ctx = gameCanvas.getContext("2d"); //取得gameCanvas的2D容器(Context)
- function clearScreen()
- {
- ctx.fillStyle = "rgb(255,255,255)";
- ctx.fillRect(0,0,gameWidth,gameHeight);
- }
- function drawArc(x,y,r,color)
- {
- ctx.beginPath();
- ctx.fillStyle = color;
- ctx.arc(x,y,r,0,Math.PI*2,true);
- ctx.fill();
- }
- var x = 500;
- var y = 100;
- var r = 30;
- var d = 7;
- var balls = 7;
- var seats = new Array(balls);
- for(var i=0;i<balls;i++)
- seats[i] = new Array(balls);
- function initGame()
- {
- for(var i=0;i<balls;i++)
- for(var j=0;j<i;j++)
- seats[i][j] = 0;
- }
- function gameLoop()
- {
- clearScreen();
- for(var i = 0;i < balls;i++)
- {
- for(var j=0;j<=i;j++)
- {
- if(seats[i][j]==0)
- drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,255,128)");
- else
- drawArc(x-i*(r*2+d)/2+(r*2+d)*j,y+r*2*i,r,"rgb(0,128,128)");
- }
- }
-
- setTimeout(gameLoop,200);
- }
- initGame();
- gameLoop();
- </script>
- </body>
|
