面向對象其實理解起來，說容易也容易，說難也確實很難，而且，明白什麼是面向對象，卻未必能寫出來好的代碼：
下面是一個簡單的例子，大家可以參考一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
button {
margin: 80px auto 0;
padding: 5px 10px;
}
canvas {
margin: 10px auto 0;
background: #000;
}
</style>
</head>
<body>
<button>走你</button>
<button>停止</button>
<br>
<canvas height="300" width="500"></canvas>
<script>
window.onload = function(){
//UI設置
var canvas = document.getElementsByTagName('canvas')[0],
btnGo = document.getElementsByTagName('button')[0],
btnStop = document.getElementsByTagName('button')[1];
// 獲取畫布
var ctx = canvas.getContext("2d");
//畫布尺寸
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
//變量聲明
var planetArr = [];
var timer = null
//遊戲設置
var playGames;
//類定義
var Planet = function (x, y, vx, vy, r) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.r = r;
};
Planet.prototype.move = function () {
this.x += this.vx;
this.y += this.vy;
if (this.x > canvasWidth - this.r) {
this.x = canvasWidth - this.r;
this.vx = -this.vx;
} else if (this.x < this.r) {
this.x = this.r;
this.vx = -this.vx;
}
if (this.y > canvasHeight - this.r) {
this.y = canvasHeight - this.r;
this.vy = -this.vy;
} else if (this.y < this.r) {
this.y = this.r;
this.vy = -this.vy;
}
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.fill();
};
//重置和重啓遊戲
function startGame() {
//遊戲設置，初始化
var x, y, vx, vy, r, planet;
for (var i = 0; i < 100; i++) {
x = Math.random() * canvasWidth;
y = Math.random() * canvasWidth;
vx = Math.random() * 5 * (Math.random() > 0.5 ? 1 : -1);
vy = Math.random() * 5 * (Math.random() > 0.5 ? 1 : -1);
r = Math.random() * 8 + 2;
planet = new Planet(x, y, vx, vy, r);
planetArr.push(planet);
}
ctx.fillStyle = 'white';
// 遊戲事件綁定
//開始遊戲循環
animate();
};
//初始化遊戲環境
function init() {
btnGo.onclick = function (e) {
playGames = true;
animate();
};
btnStop.onclick = function () {
playGames = false;
}
startGame();
};
//動畫循環
function animate() {
//清除
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
//動畫設置
for (var i = 0; i < planetArr.length; i++) {
planetArr[i].move();
}
if (playGames) {
//設置循環時間
clearTimeout(timer);
timer = setTimeout(animate, 33);
}
}
//開始遊戲
init();
}
</script>
</body>
</html>