炮弹游戏1
2016-02-21 12:31
302 查看
<html>
<head>
<title>Cannonball</title>
<style>
form{
width:330px;
margin:20px;
background-color:brown;
padding:20px;
}
</style>
<script>
var cwidth=600;//设置画布宽度，用于清除
var cheight=400;//设置画布高度，用于清除
var ctx;//保存画布上下文的变量
var everything=[];//这个数组包含所要绘制的对象
var tid;//保存定时事件的标识符
var horvelocity;//水平速度
var verticalvel1;//开始时的垂直位移
var verticalvel2;//结束时的垂直位移
var gravity=2;//垂直位移的改变两
var cannonx=10;//大炮的x位置
var cannony=280;//大炮的y位置
var cannonlength=200;//大炮长度
var cannonht=20;//大炮高度
var ballrad=10;
var targetx=500;
var targety=50;
var targetw=85;
var targeth=280;
var htargetx=450;//命中目标的x位置
var htargety=220;//命中目标的y位置
var htargetw=355;
var htargeth=96;
function Ball(sx,sy,rad,stylestring){
this.sx=sx;
this.sy=sy;
this.rad=rad;
this.draw=drawball;
this.moveit=moveball;
this.fillstyle=stylestring;
}
function drawball(){
ctx.fillStyle=this.fillstyle;
ctx.beginPath();
ctx.arc(this.sx,this.sy,this.rad,0,Math.PI*2,true);
ctx.fill();
}
function moveball(dx,dy){
this.sx+=dx;
this.sy+=dy;
}
var cball=new Ball(cannonx+cannonlength,cannony+cannonht*.5,ballrad,"rgb(250,0,0)");//创建一个新的Ball对象
function Myrectangle(sx,sy,swidth,sheight,stylestring){
this.sx=sx;
this.sy=sy;
this.swidth=swidth;
this.sheight=sheight;
this.fillstyle=stylestring;
this.draw=drawrects;
this.moveit=moveball;
}
function drawrects(){
ctx.fillStyle=this.fillstyle;
ctx.fillRect(this.sx,this.sy,this.swidth,this.sheight);
}
function Picture(sx,sy,swidth,sheight,filen){
var imga=new Image();
imga.src=filen;
this.sx=sx;
this.sy=sy;
this.img=imga;
this.swidth=swidth;
this.sheight=sheight;
this.draw=drawAnImage;
this.moveit=moveball;
}
function drawAnImage(){
ctx.drawImage(this.img,this.sx,this.sy,this.swidth,this.sheight);
}
var target=new Picture(targetx,targety,targetw,targeth,"t.jpg");
var htarget=new Picture(htargetx,htargety,htargetw,htargeth,"r.jpg");
var ground=new Myrectangle(0,300,600,30,"rgb(10,250,0)");
var cannon=new Myrectangle(cannonx,cannony,cannonlength,cannonht,"rgb(40,40,0)");
var targetindex=everything.length;
everything.push([target,false]);
everything.push([ground,false]);
var ballindex=everything.length;
everything.push([cball,false]);
var cannonindex=everything.length;
everything.push([cannon,true,0,cannonx,cannony+cannonht*.5]);
function init(){
ctx=document.getElementById('canvas').getContext('2d');
drawall();//绘制所有对象
}
function fire(){
var angle=Number(document.f.ang.value);
var outofcannon=Number(document.f.vo.value);
var angleradians=angle*Math.PI/180;//转为弧度
horvelocity=outofcannon*Math.cos(angleradians);
verticalvel1=-outofcannon*Math.sin(angleradians);
everything[cannonindex][2]=-angleradians;
cball.sx=cannonx+cannonlength*Math.cos(angleradians);
cball.sy=cannony+cannonht*.5-cannonlength*Math.sin(angleradians);
drawall();
tid=setInterval(change,100);
return false;//返回false，避免页面刷新
}
function drawall(){
ctx.clearRect(0,0,cwidth,cheight);
var i;
for(i=0;i<everything.length;i++)
{
var ob=everything[i];
if(ob[1]){
//需要平移还是旋转
ctx.save();
ctx.translate(ob[3],ob[4]);//完成指定的平移
ctx.rotate(ob[2]);//完成指定的旋转
ctx.translate(-ob[3],-ob[4]);//平移回到原位
ob[0].draw();//绘制对象
ctx.restore();
}
else{
ob[0].draw();
}
}
}
function change(){
var dx=horvelocity;
verticalvel2=verticalvel1+gravity;
var dy=(verticalvel1+verticalvel2)*.5;
verticalvel1=verticalvel2;
cball.moveit(dx,dy);//按计算的量移动
var bx=cball.sx;
var by=cball.sy;
if((bx>=target.sx) && (bx<=(target.sx+target.swidth)) && (by>=target.sy) && (by<=(target.sy+target.sheight))){
clearInterval(tid);//如果子弹在目标范围内，停止运动
everything.splice(targetindex,1,[htarget,false]);
everything.splice(ballindex,1);
drawall();
}
if(by>=ground.sy){
9bf3
clearInterval(tid);//如果子弹超出地面，停止运动
}
drawall();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="600" height="400">
Your Browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<form name="f" id="f" onsubmit="return fire();">
Set velocities and fire cannonball.<br/>
Velocity out of cannon<input name="vo" id="vo" value="10" type="number" min="-100" max="100"></input>
<br/>
Angle<input name="ang" id="ang" value="0" type="number" min="0" max="80"></input>
<input type="submit" value="FIRE"></input>
</form>
</body>
</html>
<head>
<title>Cannonball</title>
<style>
form{
width:330px;
margin:20px;
background-color:brown;
padding:20px;
}
</style>
<script>
var cwidth=600;//设置画布宽度，用于清除
var cheight=400;//设置画布高度，用于清除
var ctx;//保存画布上下文的变量
var everything=[];//这个数组包含所要绘制的对象
var tid;//保存定时事件的标识符
var horvelocity;//水平速度
var verticalvel1;//开始时的垂直位移
var verticalvel2;//结束时的垂直位移
var gravity=2;//垂直位移的改变两
var cannonx=10;//大炮的x位置
var cannony=280;//大炮的y位置
var cannonlength=200;//大炮长度
var cannonht=20;//大炮高度
var ballrad=10;
var targetx=500;
var targety=50;
var targetw=85;
var targeth=280;
var htargetx=450;//命中目标的x位置
var htargety=220;//命中目标的y位置
var htargetw=355;
var htargeth=96;
function Ball(sx,sy,rad,stylestring){
this.sx=sx;
this.sy=sy;
this.rad=rad;
this.draw=drawball;
this.moveit=moveball;
this.fillstyle=stylestring;
}
function drawball(){
ctx.fillStyle=this.fillstyle;
ctx.beginPath();
ctx.arc(this.sx,this.sy,this.rad,0,Math.PI*2,true);
ctx.fill();
}
function moveball(dx,dy){
this.sx+=dx;
this.sy+=dy;
}
var cball=new Ball(cannonx+cannonlength,cannony+cannonht*.5,ballrad,"rgb(250,0,0)");//创建一个新的Ball对象
function Myrectangle(sx,sy,swidth,sheight,stylestring){
this.sx=sx;
this.sy=sy;
this.swidth=swidth;
this.sheight=sheight;
this.fillstyle=stylestring;
this.draw=drawrects;
this.moveit=moveball;
}
function drawrects(){
ctx.fillStyle=this.fillstyle;
ctx.fillRect(this.sx,this.sy,this.swidth,this.sheight);
}
function Picture(sx,sy,swidth,sheight,filen){
var imga=new Image();
imga.src=filen;
this.sx=sx;
this.sy=sy;
this.img=imga;
this.swidth=swidth;
this.sheight=sheight;
this.draw=drawAnImage;
this.moveit=moveball;
}
function drawAnImage(){
ctx.drawImage(this.img,this.sx,this.sy,this.swidth,this.sheight);
}
var target=new Picture(targetx,targety,targetw,targeth,"t.jpg");
var htarget=new Picture(htargetx,htargety,htargetw,htargeth,"r.jpg");
var ground=new Myrectangle(0,300,600,30,"rgb(10,250,0)");
var cannon=new Myrectangle(cannonx,cannony,cannonlength,cannonht,"rgb(40,40,0)");
var targetindex=everything.length;
everything.push([target,false]);
everything.push([ground,false]);
var ballindex=everything.length;
everything.push([cball,false]);
var cannonindex=everything.length;
everything.push([cannon,true,0,cannonx,cannony+cannonht*.5]);
function init(){
ctx=document.getElementById('canvas').getContext('2d');
drawall();//绘制所有对象
}
function fire(){
var angle=Number(document.f.ang.value);
var outofcannon=Number(document.f.vo.value);
var angleradians=angle*Math.PI/180;//转为弧度
horvelocity=outofcannon*Math.cos(angleradians);
verticalvel1=-outofcannon*Math.sin(angleradians);
everything[cannonindex][2]=-angleradians;
cball.sx=cannonx+cannonlength*Math.cos(angleradians);
cball.sy=cannony+cannonht*.5-cannonlength*Math.sin(angleradians);
drawall();
tid=setInterval(change,100);
return false;//返回false，避免页面刷新
}
function drawall(){
ctx.clearRect(0,0,cwidth,cheight);
var i;
for(i=0;i<everything.length;i++)
{
var ob=everything[i];
if(ob[1]){
//需要平移还是旋转
ctx.save();
ctx.translate(ob[3],ob[4]);//完成指定的平移
ctx.rotate(ob[2]);//完成指定的旋转
ctx.translate(-ob[3],-ob[4]);//平移回到原位
ob[0].draw();//绘制对象
ctx.restore();
}
else{
ob[0].draw();
}
}
}
function change(){
var dx=horvelocity;
verticalvel2=verticalvel1+gravity;
var dy=(verticalvel1+verticalvel2)*.5;
verticalvel1=verticalvel2;
cball.moveit(dx,dy);//按计算的量移动
var bx=cball.sx;
var by=cball.sy;
if((bx>=target.sx) && (bx<=(target.sx+target.swidth)) && (by>=target.sy) && (by<=(target.sy+target.sheight))){
clearInterval(tid);//如果子弹在目标范围内，停止运动
everything.splice(targetindex,1,[htarget,false]);
everything.splice(ballindex,1);
drawall();
}
if(by>=ground.sy){
9bf3
clearInterval(tid);//如果子弹超出地面，停止运动
}
drawall();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="600" height="400">
Your Browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<form name="f" id="f" onsubmit="return fire();">
Set velocities and fire cannonball.<br/>
Velocity out of cannon<input name="vo" id="vo" value="10" type="number" min="-100" max="100"></input>
<br/>
Angle<input name="ang" id="ang" value="0" type="number" min="0" max="80"></input>
<input type="submit" value="FIRE"></input>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【Linux 基础篇】之软件管理.
- JAVA中的集合与泛型整理总结
- 《转》 浅谈C# 多态的魅力（虚方法，抽象，接口实现）
- Html5大文件断点续传
- 二叉树——二叉树的遍历
- Cocos2d-x PageView的使用
- [Python] re(正则表达式) 模块使用方法
- 基于AJAX的长轮询（long-polling）方式实现简单的聊天室程序
- maven核心概念--生命周期
- 函数参数传递
- maven核心概念--生命周期
- 如何用AndroidStudio导入github项目
- 程序结构&&程序设计（三）
- Javascript自学-6
- reverse mapping checking getaddrinfo for bogon failed – POSSIBLE BREAK-IN ATTEMPT! 错误
- 骗骗骗！教会你创业的8大成功骗术
- 360将推出视频版的“今日头条”
- 一个工作快八年的老IT人士这几年沉浮总结的职场经验教训
- LaTeX学习记录
- Linux 基金会发布面向IoT设备的实时OS「Zephyr 项目」