参考妙趣课堂的视频，做了这个游戏，通过这个游戏可以了解到canvas的强大。废话不多说，直接上代码。
html代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>马祖</title> <link rel="stylesheet" type="text/css" href="css/mazu.css"> </head> <body> <div id="box"> <canvas id="mycanvas" width="600" height="600"></canvas> </div> <script type="text/javascript" src="js/mazu.js"></script> </body> </html>css代码：这里我用的是less
@black:#000;
@white:#fff;
* {
margin: 0;
padding: 0;
}
body {
background-color:@black;
}
#box {
background-color: @white;
width: 600px;
height: 600px;
margin: 20px auto;
}less转化为css：
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
}
#box {
background-color: #ffffff;
width: 600px;
height: 600px;
margin: 20px auto;
}
window.onload = function() {
var oc = document.getElementById("mycanvas");
var ogc = oc.getContext('2d');
var i = 0;
var img = new Image();
img.src = "images/cartIcon.jpg";
img.onload = function() {
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); //参数分别为x,y,r,弧度,旋转方向
// ogc.closePath();//首尾连接
// ogc.fill();
ogc.stroke();
ogc.beginPath();
ogc.arc(250, 200, 150, -180 * Math.PI / 180, 0 * Math.PI / 180, false); //参数分别为x,y,r,弧度,旋转方向
ogc.stroke();
ogc.beginPath();
ogc.arc(400, 200, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false); //参数分别为x,y,r,弧度,旋转方向
ogc.stroke();
for (var i = 0, length = ball.length; i < length; i++) {
ogc.beginPath();
ogc.moveTo(ball[i].x, ball[i].y);
ogc.arc(ball[i].x, ball[i].y, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ogc.fill();
}
ogc.save(); //独立出来，不执行计时器，否则计时器会让transform累加
ogc.translate(300,200);
ogc.rotate(iRotate);
ogc.translate(-23,-20);
ogc.drawImage(img,0,0);
ogc.restore();
for (var i = 0, length = bullet.length; i < length; i++) {
ogc.save();
ogc.fillStyle='red';
ogc.beginPath();
ogc.moveTo(bullet[i].x, bullet[i].y);
ogc.arc(bullet[i].x, bullet[i].y, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ogc.fill();
ogc.restore();
}
}, 1000 / 60);
setInterval(function() {
for (var i = 0, length = ball.length; i < length; i++) {
ball[i].num++;
if (ball[i].num == 270) {
ball[i].r = 150;
ball[i].startX = 250;
ball[i].startY = 50;
}
if (ball[i].num == 270 + 180) {
alert("boom!!!!!!!!!!!!!!!!!");
window.location.reload();
}
ball[i].x = Math.sin(ball[i].num * Math.PI / 180) * ball[i].r + ball[i].startX;
ball[i].y = ball[i].r - Math.cos(ball[i].num * Math.PI / 180) * ball[i].r + ball[i].startY;
}
for (var i=0,length=bullet.length;i<length;i++){
bullet[i].x =bullet[i].x+bullet[i].sX;
bullet[i].y =bullet[i].y+bullet[i].sY;
}
for (var i=0,length=bullet.length;i<length;i++){
for (var j = 0; j < ball.length; j++){
if(pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y)){
bullet.splice(i,1);
ball.splice(j,1);
break;
}
}
}
}, 30);
var ball = [];
setInterval(function() {
ball.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 bullet = [];
oc.onclick = 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 sX = speed*a/c;
var sY = speed*b/c;
bullet.push({
x :300,
y :200,
sX :sX,
sY :sY
});
}
};
function pz(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;
}
}
// setInterval(function(){
// ogc.clearRect(0,0,oc.width,oc.height)
// ogc.beginPath();
// ogc.arc(i++,i++,20,0*Math.PI/180,360*Math.PI/180,false);//参数分别为x,y,r,弧度,旋转方向
// ogc.stroke();
// }, 50)
}
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/u012763269/article/details/47396239
