讲真，说是简易祖玛游戏，可是还是很有难道的，js高手话也许能马上上手，代码全部看的懂，可是自己写的话还是写不下来，主要是这个步骤还没有理清楚，后期的目标就是能轻松写这样的小游戏。先上了代码，后面慢慢研究，把步骤给分解出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
/*
window.onload = function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
var r=30;
var num=0;
var ball=[];
ball[0]={
x:300,
y:0,
r:200,
num:0,
startX:300,//初始x坐标
startY:0//初始y坐
};
//h画弧度的半圆
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.closePath();
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<ball.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();
}
},1000/60)
setInterval(function(){
for(var i=0;i<ball.length;i++){
ball[i].num++;//添变量
ball[i].x=Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startX;//初始值为，球的中心x坐标,sin值一根据num变化改变x的坐标
ball[i].y=ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startY;//球的中心y坐标
}
},30);
};*/
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var i = 0;
var yImg = new Image();//创建一个图片对象
yImg.src = 'person.png';//图片链接
yImg.onload = function(){//图片函数
setInterval(function(){
oGC.clearRect(0,0,oC.width,oC.height);//清除画布
oGC.beginPath();
//弧度 = 角度 * Math.PI/180
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);//画一个3/4圆
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<ball.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();//保存当前状态
oGC.translate(300,200);//平移
oGC.rotate(iRotate);//运行坐标轨迹
oGC.translate(-40,-40);
oGC.drawImage(yImg,0,0);
oGC.restore();//复用当前
for(var i=0;i<bullet.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();
}
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<ball.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('游戏结束');
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;i<bullet.length;i++){
bullet[i].x = bullet[i].x + bullet[i].sX;
bullet[i].y = bullet[i].y + bullet[i].sY;
}
for(var i=0;i<bullet.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.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 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;
}
}
};
</script>
</head>
<body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>
