# 【canvas游戏初级开发】大炮打堡垒

```<!doctype html5>
<html>
<body>
<canvas id="mycanvas" width=1200 height=620>请更换你的浏览器，谢谢！</canvas><br />
大炮的角度：<input value=20 type="number" id="cannonAngle" />
小球的速度: <input value=15 type="number" id="ballSpeed" />
<input type="button" value="修改" id="submit" />
<script>
var mycanvas = document.getElementById("mycanvas");
var submit = document.getElementById("submit");
var cannonAngle = document.getElementById("cannonAngle");
var ballSpeed = document.getElementById("ballSpeed");

var ctx = mycanvas.getContext("2d");
var angle = Number(cannonAngle.value);
var frame = 100;                        //帧数
var vX;                                 //水平速度
var vY;                                 //垂直速度

ctx.strokeRect(0,0,1200,620);
//ctx.stroke();

var cannon1 = new Cannon(200,400,100,35,20,11);

initial(ctx);
cball.draw(ctx);
cannon1.draw1();
cannon1.draw2();

submit.onclick = function drawCannon(){
ctx.clearRect(0,0,1197,617);
angle = Number(cannonAngle.value);
speed = Number(ballSpeed.value);

vX = speed * Math.cos(angle*Math.PI/180);
vY = speed * Math.sin(angle*Math.PI/180);
initial(ctx);
cannon1.draw1();
cannon1.draw2();

stopSign = setInterval(cball.move,1000/frame);
};

function initial(o){
o.beginPath();
o.lineWidth = 3;
o.strokeStyle = "black";
o.moveTo(20,20);
o.lineTo(1100,20);
o.moveTo(20,20);
o.lineTo(20,600);
o.moveTo(1100,10);
o.lineTo(1110,20);
o.lineTo(1100,30);
o.moveTo(10,600);
o.lineTo(20,610);
o.lineTo(30,600);
o.stroke();

o.fillStyle = "#478d8d";

o.fillStyle = "#ff0f0f";
}

this.bx = bx;
this.by = by;
this.init = ballInit;
this.move = horizontalThrow;
this.draw = drawBall;
}

function ballInit(iniX,iniY){
cball.bx = iniX;
cball.by = iniY;
}

function horizontalThrow(){
ctx.clearRect(0,0,1197,617);
cball.bx += vX/frame;
cball.by -= vY/frame;
vY -= 10/frame;
initial(ctx);
cannon1.draw1();
cannon1.draw2();
cball.draw(ctx);
checkTouch();
}

function checkTouch(){
clearInterval(stopSign);
return;
clearInterval(stopSign);

return;
clearInterval(stopSign);
return;
}
}

function drawBall(o){
o.beginPath();
o.fillStyle = "#ff870f";
o.fill();
}

this.positionX = positionX;
this.positionY = positionY;
this.draw1 = drawBody;
this.draw2 = drawWheel;
}

function drawBody(){
ctx.beginPath();

ctx.rotate(-angle*Math.PI/180);

//cball.draw(ctx);
//ctx.fill();

ctx.fillStyle = "RGB(82,29,79)";

ctx.rotate(angle*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle = "RGB(190,162,189)";
ctx.fillStyle = "RGB(190,162,189)";
ctx.lineWidth = 5;
ctx.lineTo(1.34*cannon1.positionX,cannon1.positionY-10);
ctx.closePath();
ctx.stroke();
ctx.fill();
//ctx.beginPath();
ctx.fillStyle = "RGB(126,24,0)";
}

function drawWheel(){
(function wheel(){
ctx.beginPath();
ctx.strokeStyle = "RGB(124,65,119)";
ctx.lineWidth = 20;
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "RGB(182,140,180)";
ctx.lineWidth = 11;
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "RGB(134,82,136)";
ctx.lineWidth = 20;
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "RGB(152,111,152)";
ctx.fill();

ctx.translate(cannon1.positionX,cannon1.positionY);
for(i=0;i<10;i++){
ctx.beginPath();
ctx.strokeStyle = "#fd5b00";
ctx.fillStyle = "#fcff02";
ctx.lineWidth = 3;
ctx.lineTo(-5,-40);
ctx.lineTo(5,-40);
ctx.stroke();
ctx.rotate(Math.PI/5);
}
ctx.translate(-cannon1.positionX,-cannon1.positionY);
}());
}

</script>
</body>
</html>
//该片段来自于http://outofmemory.cn
```

0人收藏

0

0

1. 木頭 发表 2014-09-26 18:05:00 使用 PureMVC 和 Cocos2d-js 构建游戏项目
2. dwqs 发表 2015-06-24 04:13:19 【译】Top 10：HTML5、JavaScript 3D游戏引擎和框架
3. 博主 发表 2014-07-19 10:14:19 开源HTML5游戏引擎Kiwi.js
4. tommy 发表 2015-11-17 06:01:56 Top 10：HTML5、JavaScript 3D游戏引擎和框架
5. zhu329599788@126 发表 2016-05-18 01:18:21 史上最短小精悍的javascript编写的俄罗斯方块游戏，仅仅60行代码
6. 博主 发表 2014-11-18 09:27:46 Peertc和五子棋
7. govo 发表 2015-01-23 13:40:05 用JavaScript开发HTML5与C++游戏
8. 歪脖骇客 发表 2016-04-21 03:28:07 趣味游戏：请画一个小人
9. 博主 发表 2012-09-08 05:43:18 JS扫雷游戏
10. 博主 发表 2015-04-18 16:05:24 前端动画对比
11. 博主 发表 2012-09-08 05:43:18 JS扫雷游戏
12. 木頭 发表 2014-09-20 17:02:00 可在 html5 游戏中使用的 js 工具库