<html>
<head>
<title>坎农</title>
<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="mc" width="1350px" height="600px">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var cxt = canvas.getContext('2d');
//设置画布背景颜色
cxt.fillStyle = "#030303";
cxt.fillRect(0, 0, canvas.width, canvas.height);
//载入大炮图片
var img = new Image();
img.src = "artillery.png";
img.onload = function(){
cxt.drawImage(img,0,325);//将图片放在
}
var cyc = 10;
var a = 50;
var balls = [];
//随机生成的数据
function getRandomNumber(min,max){
return (min + Math.floor(Math.random() * (max - min + 1)));
}
//循环实现大炮的轰炸
var somethingAsync = eval(Jscex.compile("async", function () {
while (true) {
//模拟炮弹
var ball = {
x : 185,
y : 470,
r : getRandomNumber(0,20),
vx : getRandomNumber(190,3000),
vy : getRandomNumber(-3000,0)
};
balls.push(ball);
//当炮弹的数量大于100时，就会从浏览器里面移除一个小球，以防止浏览器的堆栈溢出
if(balls.length > 200){
balls.shift();
}
cxt.fillStyle = "rgba(0,0,0,.3)";
cxt.fillRect(0,0,canvas.width,canvas.height);
cxt.fillStyle = randomColor();
cxt.drawImage(img,0,425);
//绘制炮弹运动的路径
for (i in balls) {
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
balls[i].y += balls[i].vy * cyc / 1000;
balls[i].x += balls[i].vx * cyc / 1000;
//当全部的球都碰撞到地面时
if (balls[i].r + balls[i].y >= canvas.height) {
if (balls[i].vy > 0) {
balls[i].vy *= -0.9;
}
}
else {
balls[i].vy += a;
}
//当全部的球都碰到左右两墙壁时
if(balls[i].x >= canvas.width || balls[i].r >= balls[i].x){
balls[i].vx *= -1;
}
}
$await(Jscex.Async.sleep(cyc));
}
}));
//随机生成颜色
function randomColor(){
var arr = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","F"];
var str = "#";
var index;
for (var i = 0; i < 6; i++) {
index = Math.round(Math.random()*15);//随机生成一个下表
str += arr[index];
}
return str;
}
somethingAsync().start();
</script>
</body>
</html>
版权声明：本文博主原创文章，博客，未经同意不得转载。