HTML5（三）canvas（3）
簡易祖瑪遊戲
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{margin: 0;padding: 0;}
body{ background:black;}
#div1{ background:white;width: 600px;margin: 20px auto; }
</style>
<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var yImg = new Image();
yImg.src = 'person.png';
yImg.onload = function(){
var i = 0;
// 重新繪製路徑和小球運動位置
setInterval(function(){
oGC.clearRect(0, 0, oC.width, oC.height)
// 第一段圓弧
oGC.beginPath();
oGC.arc(300, 200, 200, -90*Math.PI/180, 180*Math.PI/180, false);
oGC.stroke();
// 第二段圓弧
oGC.beginPath();
oGC.arc(250, 200, 150, 180*Math.PI/180, 360*Math.PI/180, false);
oGC.stroke();
// 第三段圓弧
oGC.beginPath();
oGC.arc(400, 200, 20, 0*Math.PI/180, 360*Math.PI/180, false);
oGC.stroke();
// 繪製球
for(var i=0; i<balls.length; i++){
oGC.beginPath();
var x = balls[i].x;
var y = balls[i].y;
oGC.moveTo(x, y);
oGC.arc(x, y, 20, 0*Math.PI/180, 360*Math.PI/180, false)
oGC.fill();
}
oGC.save();
oGC.translate(300, 200);
oGC.rotate(iRotate);
oGC.translate(-40, -40);
oGC.drawImage(yImg, 0, 0);
oGC.restore();
// 繪製子彈
for(var i=0; i<bullets.length; i++){
oGC.save();
oGC.fillStyle = 'red';
oGC.beginPath();
var x = bullets[i].x;
var y = bullets[i].y;
oGC.moveTo(x, y);
oGC.arc(x, y, 20, 0*Math.PI/180, 360*Math.PI/180, false)
oGC.fill();
oGC.restore();
}
// 文字
oGC.save();
oGC.font = '60px impact';
oGC.textBaseline = 'top';
oGC.fillStyle = 'red';
oGC.shadowOffsetX = 10;
oGC.shadowOffsetY = 10;
oGC.shadowColor = 'green';
oGC.shadowBlur = 5;
var w = oGC.measureText('簡易祖瑪').width;
var h = 60;
oGC.fillText('簡易祖瑪', (oC.width - w)/2 , 450 );
oGC.restore();
}, 1000/60);
// 繪製小球位置 && 更新子彈
setInterval(function(){
// 繪製小球位置
for(var i=0; i<balls.length; i++){
balls[i].num++;
if(balls[i].num === 270){
balls[i].r = 150;
balls[i].startX = 250;
balls[i].startY = 50;
}
if(balls[i].num === 270 + 180){
alert('Game over !!!');
window.location.reload();
}
var r = balls[i].r
balls[i].x = Math.sin(balls[i].num*Math.PI/180)*r + balls[i].startX;
balls[i].y = balls[i].r - Math.cos(balls[i].num*Math.PI/180)*r + balls[i].startY;
}
for(var i=0; i<bullets.length; i++){
bullets[i].x = bullets[i].x + bullets[i].xSpeed;
bullets[i].y = bullets[i].y + bullets[i].ySpeed;
}
for(var i=0; i<bullets.length; i++){
for(var j=0; i<balls.length; j++){
if(collision(bullets[i].x, bullets[i].y, balls[j].x, balls[j].y)){
bullets.splice(i, 1);
balls.splice(j, 1);
break;
}
}
}
}, 30);
// 建立小球
var balls = [];
setInterval(function(){
balls.push({
x: 300,
y: 0,
r: 200,
num: 0,
startX: 300,
startY: 0
})
}, 350);
// 滑鼠移動的位置控制祖瑪旋轉位置
var iRotate = 0;
oC.onmousemove = function(ev){
var ev = ev || window.event;
var x = ev.clientX - oC.offsetLeft;
var y = ev.clientY - oC.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b);
if(a>0 && b>0){
iRotate = Math.asin(b/c) + 90*Math.PI/180;
}else if(a>0){
iRotate = Math.asin(a/c);
}
if(a<0 && b>0){
iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
}else if(a<0){
iRotate = Math.asin(a/c);
}
}
// 子彈建立
var bullets = [];
oC.onmousedown = function(ev){
var ev = ev || window.event;
var x = ev.clientX - oC.offsetLeft;
var y = ev.clientY - oC.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b);
var speed = 5;
var xSpeed = speed * a/c;
var ySpeed = speed * b/c;
bullets.push({
x: 300,
y: 200,
xSpeed: xSpeed,
ySpeed: ySpeed
});
}
}
// 碰撞
function collision(x1, y1, x2, y2){
var a = x1 - x2;
var b = y1 - y2;
var c = Math.sqrt(a*a + b*b);
if(c < 40){
return true;
}else{
return false;
}
}
};
</script>
</head>
<body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>