canvas学习作业，模仿做一个祖玛的小游戏
这个游戏的原理我分为11个步骤，依次如下：
1、布局，
2、画曲线（曲线由两个半径不同的圆构成）
3、画曲线起点起始圆和曲线终点终止圆
4、起始的圆动起来，
5、起始的圆沿曲线走起来
6、起始的圆沿曲线走起来，并在曲线初始位置处产生新圆
7、添加图片，这个图片是为了发射子弹
8、让图片跟随鼠标动起来
9、让动起来的图片跟随鼠标的位置发送子弹，并让子弹的颜色变红
10、图片发射的子弹和轨迹上的小圆碰撞检测
11、碰撞检测后让发射的子弹和轨迹上的小圆消失
这就是该程序步骤的的分解。
第一点：布局
<div id="div1">
<canvas id="canvas1" width="800px" height="800px"></canvas>
</div>
*{margin:;padding:;}
#canvas1{background-color: #ccc;}
#div1{
width: 800px; margin: 20px auto;}
布局很简单。
第二点：画曲线
//外大圆
oCG.beginPath();
oCG.arc(400,400,250,-90*Math.PI/180,180*Math.PI/180,false);
oCG.stroke();
//内小圆
oCG.beginPath();
oCG.arc(350,400,200,180*Math.PI/180,0,false);
oCG.stroke();
//末尾圆
oCG.beginPath();
oCG.arc(550,400,30,0,360*Math.PI/180,false);
oCG.stroke();
外面的大圆圆心坐标为400,400，半径为250，从-90度到180度，顺时针。，内小圆的圆心坐标为350,400，半径为200，从180度到0度，瞬时针。曲线终点有一个小圆，圆心坐标为550,400，半径为30。三个圆都为空心圆。
第三点：画曲线起点起始圆和曲线终点末尾圆
曲线终点的末尾圆，在上面已经绘制了，下来就是曲线的起始点的圆如何绘制
oCG.beginPath();
oCG.moveTo(400,150);
oCG.arc(400,150，30,0,360*Math.PI/180,false);
oCG.fill();
第四点：起始的圆动起来
起始点的坐标为400,150，半径为30，但是要考虑到一点，小圆圆心坐标是变化的，为了方便数据的改变，使用json去存放数据
var ball=[];
ball[0]={
x:400, //小圆起始点横坐标
y:150, //小圆起始点纵坐标
r:250, //大圆的半径
num:0, //小圆转过的角度
//必须新建一个小圆的横纵坐标，否则小圆会飞出去。
X:400, //小圆起始点横坐标
Y:150 //小圆起始点纵坐标
}
计算运动后下一个圆心的坐标
setInterval(function(){
for(var i=0;i<ball.length;i++){
ball[i].num++; // 圆角度由0-360
ball[i].x=Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].X; //小圆横坐标
ball[i].y=ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].Y;//小圆的纵坐标
}
{，1000/60）
第五点：起始的圆沿曲线走起来
然后 ball[i].x ball[i].y 附给新画的圆，因为在定时器内，所以就能形成1000/60ms变化一次圆心的效果，进而让圆运动，但是这个运动仅仅是围绕大圆运动的。要想再围绕内小圆运动，就应该再加一个if判断
setInterval(function(){
for(var i=0;i<ball.length;i++){
ball[i].num++; // 圆角度由0-360
if(ball[i].num==270){// 如果角度变为270度，改变ball的起始点坐标，就是改变它的轨迹。
ball[i].r=200;
ball[i].X=350;
ball[i].Y=200;
}
else if(ball[i].num==360+45+45
){
confirm('你失败了！点击确定重来！');
window.location.reload()
}
ball[i].x=Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].X; //小圆横坐标
ball[i].y=ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].Y;//小圆的纵坐标
}
}，1000/60）
当小圆走到270度时，把ball的起始点坐标改变，就能改变ball 的轨迹。当ball[i].num=450度时，也就是走到末尾圆，代表游戏结束。
第六点：起始的圆沿曲线走起来，并在曲线初始位置处产生新圆。
为了产生新的圆，只是开一个定时器，让每隔一段时间产生一个新的json
var ball=[];
setInterval(function(){
ball.push({
x:400, //小圆起始点横坐标
y:150, //小圆起始点纵坐标
r:250, //大圆的半径
num:0, //小圆转过的角度
//必须新建一个小圆的横纵坐标，否则小圆会飞出去。
X:400, //小圆起始点横坐标
Y:150 //小圆起始点纵坐标
})
},400);
第七点：添加图片，这个图片是为了发射子弹
var oimg= new Image();
oimg.src='1.jpg' ;
oimg.onload=function(){
//让图片顺在中心转起来
var picX=(oC.width-oimg.offsetWidth)/2;
var picY=(oC.height-oimg.offsetHeight)/2;
oCG.save(); //为了不受定时器影响，sava起来
oCG.translate(picX,picY);
oCG.rotate(-iRotate);//里面的参数是为了控制让图片跟着鼠标旋转
oCG.translate(-30,-30); //为了让图片沿着图片中心转动
oCG.drawImage(oimg,0,0);
// oCG.drawImage(oimg,(oC.width-oimg.offsetWidth)/2,(oC.height-oimg.offsetHeight)/2)
oCG.restore();
},1000/60);
8、让图片跟随鼠标动起来
//让图片跟着鼠标转，原理就是求图片纵坐标与鼠标与图片中心的距离的夹角。把这个夹角附给
//图片旋转的角度
var iRotate=0;
oC.onmousemove=function(ev){
oEvent=ev||event;
var a=oEvent.clientX-oC.offsetLeft-(oC.width-oimg.offsetWidth)/2;
var b=oEvent.clientY-oC.offsetTop-(oC.height-oimg.offsetHeight)/2;
iRotate=Math.atan(a/b);
};
四角星代表鼠标，角度为a与b的夹角，红色方块代表图片，把获取到角度赋给 ”oCG.rotate(-iRotate);//里面的参数是为了控制让图片跟着鼠标旋转”
第九点：让动起来的图片跟随鼠标的位置发送子弹，并让子弹的颜色变红
//让图片吐子弹
var Buttle=[];
oC.onmousedown=function(ev){
oEvent=ev||event;
var a=oEvent.clientX-oC.offsetLeft-(oC.width-oimg.offsetWidth)/2;
var b=oEvent.clientY-oC.offsetTop-(oC.height-oimg.offsetHeight)/2;
var iSpeed=5;
var c=Math.sqrt(a*a+b*b); //鼠标距离图片中心的距离
var iSpeedX=iSpeed*a/c; //横轴分得到的速度
var iSpeedY=iSpeed*b/c; //纵轴分得到的速度
Buttle.push({
x:(oC.width-oimg.offsetWidth)/2,
y:(oC.height-oimg.offsetHeight)/2,
iSpeedX:iSpeedX,
iSpeedY:iSpeedY
})
}
//图片吐子弹的路径，获得吐到子弹终点的坐标
for(var i=0;i<Buttle.length;i++){
Buttle[i].x=Buttle[i].x+Buttle[i].iSpeedX; //子弹终点横坐标
Buttle[i].y=Buttle[i].y+Buttle[i].iSpeedY; //子弹终点纵坐标
}
for(var i=0;i<Buttle.length;i++){
oCG.save();
oCG.beginPath();
oCG.fillStyle='red';
oCG.moveTo(Buttle[i].x,Buttle[i].y);
oCG.arc(Buttle[i].x,Buttle[i].y,30,0,360*Math.PI/180,false);
oCG.fill();
oCG.restore();
}
利用新的坐标Buttle[i].x和Buttle[i].y绘制一个圆。
第10点：图片发射的子弹和轨迹上的小圆碰撞检测
//构建碰撞检测函数
function pz(x1,y1,x2,y2){
var a=x1-x2;
var b=y1-y2;
var c=Math.sqrt(a*a+b*b);
if(c<60){ //如果两圆心的距离小于60
return true
}
else{
return false
} }
第11点：碰撞检测后让发射的子弹和轨迹上的小圆消失
for(var i=0;i<Buttle.length;i++){
for(var j=0;j<ball.length;j++){
if(pz(Buttle[i].x,Buttle[i].y,ball[j].x,ball[j].y)){
Buttle.splice(i,1);
ball.splice(j,1);
break;
}
}
}
让子弹和轨迹上的小圆消失，让构建的两个json splice即可。
注意，每次绘画的时候，要clearRect，设置在一个1000/60ms定时器内，静态的图形clear后再绘制依旧是静态的，但是动态生成的图形，在经过定时器后，绘制的是1000/60ms后的图形。图片的dragImage必须是在 onload事件下的，为了不影响图片加载，程序也是在onload事件下的。
以上就是我对这道题的理解。因为时间仓促，里面难免有些语句有错误，恳请大家斧正。
下面是程序的源代码。
window.onload=function(){
var oC=document.getElementById('canvas1');
var oCG=oC.getContext('2d');
//设置图形
var oimg= new Image();
oimg.src='1.jpg' ;
oimg.onload=function(){
//重新绘制实现动画效果，每次先清空上次一次绘画的，过一段时间，然后再画下一次绘画的，静态不变，东西改变，实现了动的效果
setInterval(function(){
oCG.clearRect(0,0,oC.width,oC.height);
//外大圆
oCG.beginPath();
oCG.arc(400,400,250,-90*Math.PI/180,180*Math.PI/180,false);
oCG.stroke();
//内小圆
oCG.beginPath();
oCG.arc(350,400,200,180*Math.PI/180,0,false);
oCG.stroke();
//末尾圆
oCG.beginPath();
oCG.arc(550,400,30,0,360*Math.PI/180,false);
oCG.stroke();
//起始圆围绕曲线做圆周运动，把每一个已经动态变过的小圆的横纵坐标赋给新圆坐标，
// 达到到新位置1000/60ms，每350ms从原起点生成一个新的ball的效果
for(var i=0;i<ball.length;i++){
oCG.beginPath();
oCG.moveTo(400,150);
oCG.arc(ball[i].x,ball[i].y,30,0,360*Math.PI/180,false);
oCG.fill();
}
//设置字体
oCG.font="100px impact";
oCG.textBaseline='top';
oCG.fillText("hello",280,700);
//让图片顺在中心转起来
var picX=(oC.width-oimg.offsetWidth)/2;
var picY=(oC.height-oimg.offsetHeight)/2;
oCG.save(); //为了不受定时器影响，sava起来
oCG.translate(picX,picY);
oCG.rotate(-iRotate);
oCG.translate(-30,-30); //为了让图片沿着图片中心转动
oCG.drawImage(oimg,0,0);
// oCG.drawImage(oimg,(oC.width-oimg.offsetWidth)/2,(oC.height-oimg.offsetHeight)/2)
oCG.restore();
//子弹
for(var i=0;i<Buttle.length;i++){
oCG.save();
oCG.beginPath();
oCG.fillStyle='red';
oCG.moveTo(Buttle[i].x,Buttle[i].y);
oCG.arc(Buttle[i].x,Buttle[i].y,30,0,360*Math.PI/180,false);
oCG.fill();
oCG.restore();
}
},1000/60);
//循环每一个ball，动态去改变每一个原心的坐标，
setInterval(function(){
for(var i=0;i<ball.length;i++){
ball[i].num++; // 圆角度由0-360
if(ball[i].num==270){// 如果角度变为270度，改变ball的起始点坐标，就是改变它的轨迹。
ball[i].r=200;
ball[i].X=350;
ball[i].Y=200;
}
else if(ball[i].num==360+45+45
){
confirm('你失败了！点击确定重来！');
window.location.reload()
}
ball[i].x=Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].X; //小圆横坐标
ball[i].y=ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].Y;//小圆的纵坐标
}
//图片吐子弹的路径，获得吐到子弹终点的坐标
for(var i=0;i<Buttle.length;i++){
Buttle[i].x=Buttle[i].x+Buttle[i].iSpeedX; //子弹终点横坐标
Buttle[i].y=Buttle[i].y+Buttle[i].iSpeedY; //子弹终点纵坐标
}
//碰撞检测
for(var i=0;i<Buttle.length;i++){
for(var j=0;j<ball.length;j++){
if(pz(Buttle[i].x,Buttle[i].y,ball[j].x,ball[j].y)){
Buttle.splice(i,1);
ball.splice(j,1);
break;
}
}
}
},1000/60);
//开定时器，每350ms添加一个ball
var ball=[];
setInterval(function(){
ball.push({
x:400, //小圆起始点横坐标
y:150, //小圆起始点纵坐标
r:250, //大圆的半径
num:0, //小圆转过的角度
//必须新建一个小圆的横纵坐标，否则小圆会飞出去。
X:400, //小圆起始点横坐标
Y:150 //小圆起始点纵坐标
})
},400);
//让图片跟着鼠标转，原理就是求图片纵坐标与鼠标与图片中心的距离的夹角。把这个夹角附给
//图片旋转的角度
var iRotate=0;
oC.onmousemove=function(ev){
oEvent=ev||event;
var a=oEvent.clientX-oC.offsetLeft-(oC.width-oimg.offsetWidth)/2;
var b=oEvent.clientY-oC.offsetTop-(oC.height-oimg.offsetHeight)/2;
iRotate=Math.atan(a/b);
};
//让图片吐子弹
var Buttle=[];
oC.onmousedown=function(ev){
oEvent=ev||event;
var a=oEvent.clientX-oC.offsetLeft-(oC.width-oimg.offsetWidth)/2;
var b=oEvent.clientY-oC.offsetTop-(oC.height-oimg.offsetHeight)/2;
var iSpeed=5;
var c=Math.sqrt(a*a+b*b); //鼠标距离图片中心的距离
var iSpeedX=iSpeed*a/c; //横轴分得到的速度
var iSpeedY=iSpeed*b/c; //纵轴分得到的速度
Buttle.push({
x:(oC.width-oimg.offsetWidth)/2,
y:(oC.height-oimg.offsetHeight)/2,
iSpeedX:iSpeedX,
iSpeedY:iSpeedY
})
}
};
//构建碰撞检测函数
function pz(x1,y1,x2,y2){
var a=x1-x2;
var b=y1-y2;
var c=Math.sqrt(a*a+b*b);
if(c<60){ //如果两圆心的距离小于60
return true
}
else{
return false
}
}
}
canvas学习作业，模仿做一个祖玛的小游戏的更多相关文章
- html5面向对象做一个贪吃蛇小游戏
canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...
- 用Python做一个简单的小游戏
学习总是枯燥的,对于Python小白的我来讲,更是乏味的.为了提高学习的兴趣,今天我就来写一个小程序练练手. 数字猜谜游戏相信大家都不陌生,A给出最小值最大值,B写一个该范围内的数,A猜测写下的是多少 ...
- 用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
- 今天来做一个PHP电影小爬虫。
今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过 ...
- 跟我一起做一个vue的小项目（二）
这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...
- 【C语言探索之旅】 第一部分第八课：第一个C语言小游戏
内容简介 1.课程大纲 2.第一部分第八课:第一个C语言小游戏 3.第一部分第九课预告: 函数 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写 ...
- python小练习：使用循环和函数实现一个摇骰子小游戏。游戏规则如下：游戏开始，首先玩家选择Big or Small（押大小），选择完成后开始摇三个骰子，计算总值，11<=总值<=18为“大”，3<=总值<=10为“小”。然后告诉玩家猜对或者是猜错的结果。
python小练习:使用循环和函数实现一个摇骰子小游戏.游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“ ...
- 用Nodejs做一个简单的小爬虫
Nodejs将JavaScript语言带到了服务器端,作为js主力用户的前端们,因此获得了服务器端的开发能力,但除了用express搭建一个博客外,还有什么好玩的项目可以做呢?不如就做一个网络爬虫吧. ...
- Canvas学习实践：一款简单的动画游戏
最近学习了下Canvas绘图...突发奇想就有了下面这款简单的小游戏,纯属娱乐~ 废话不多说,直接上代码: <!DOCTYPE html> <html lang="zh&q ...
随机推荐
- 当Notification和Websocket遇到https、http
@ 目录 一.http转为https请求 (1)生成证书1(crt证书转tomcat使用的jks) (2)配置证书1 (3)生成证书2 (4)配置证书2 二.Websocket改为https连接 后言 ...
- 精确到小数点后n位的两种方法
引言:大家在写程序中多多少少会遇到这个问题,特别对一些初学者会出现这个问题,做个ACM竞赛的同学肯定都会用C语言的printf格式控制输出,但是习惯于用C++的同学也不是一点办法都没有啊,这篇blog ...
- 微信access token过期
两台服务器使用同一个微信账号(同一个app id) 时,当其中一台服务器向微信请求access token时,会造成另一台服务器的access token过期
- Mybatis入门（四）------联表查询
Mybatis联表查询 一.1对1查询 1.数据库建表 假设一个老师带一个学生 CREATE TABLE teacher( t_id INT PRIMARY KEY, t_name VARCHAR(3 ...
- 【Go】单链表
node.go // 链表节点 type Node struct { data interface{} next *Node } // 构造一个节点 func NewNode(data interfa ...
- 浅谈Docker(一)
注:由于别人写的太好了就转来基础介绍! 转自:http://www.infoq.com/cn/articles/docker-core-technology-preview Docker是PaaS供应 ...
- install-newton部署安装--------计算节点部署安装
#################################################################################################### ...
- sql 游标（理论）
游标是处理结果集的一种机制 --声明游标 --ISO 语法 DECLARE cursor_name [ INSENSITIVE ] [ SCROLL ] CURSOR FOR select_state ...
- html行内块元素之间的缝隙
关于html行内块元素之间缝隙的那点儿事情 事情是这样子的,我起初打算验证使用transform属性的标签是否会影响其他的标签的布局,于是写了下面一段代码: <!DOCTYPE html> ...
- 为何要做seo关键词排名
http://www.wocaoseo.com/thread-229-1-1.html 武汉seo百度指数在150左右,做seo的同仁们都知道这样的一件事情. 真正搜索武汉seo关键词能作为潜在客户的 ...