炮弹与弹弓应用开发详解
立即解锁
发布时间: 2025-08-16 01:18:30 阅读量: 1 订阅数: 7 


HTML5与JavaScript游戏开发入门
# 炮弹与弹弓应用开发详解
## 1. 炮弹应用介绍
炮弹应用在之前的基础上进行了改进,添加了代表大炮的矩形、用图片代替简单矩形作为目标,还加入了击中目标后的图片。大炮可根据表单输入进行旋转,为了添加旋转和平移信息,将 `everything` 数组设为数组的数组。当炮弹击中目标时,效果更加显著。
### 1.1 函数调用关系
| 函数 | 调用者 | 调用的函数 |
| --- | --- | --- |
| init | body 标签的 onLoad 事件 | drawall |
| drawall | init、fire、change 直接调用 | 调用 `everything` 数组中所有对象的 draw 方法(如 drawball、drawrects) |
| fire | 表单的 onSubmit 属性事件 | drawall |
| change | fire 中调用的 setInterval 函数 | drawall、调用 cball 的 moveit 方法(即 moveball) |
| Ball | var 语句直接调用 | 无 |
| Myrectangle | var 语句直接调用 | 无 |
| drawball | Ball 对象的 draw 方法调用 | 无 |
| drawrects | 目标对象的 draw 方法调用 | 无 |
| moveball | Ball 对象的 moveit 方法调用 | 无 |
| Picture | var 语句直接调用 | 无 |
| drawAnImage | Picture 对象的 draw 方法调用 | 无 |
### 1.2 完整代码及解释
```html
<html>
<head>
<title>Cannonball</title>
<style>
form {
width: 330px;
margin: 20px;
background-color: brown;
padding: 20px;
}
</style>
<script type="text/javascript">
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 location of cannon
var cannony = 280; // y location of cannon
var cannonlength = 200; // Cannon length (i.e., width)
var cannonht = 20; // Cannon height
var ballrad = 10;
var targetx = 500; // x position of target
var targety = 50; // y position of target
var targetw = 85; // Target width
var targeth = 280; // Target height
var htargetx = 450; // x position of the hit target
var htargety = 220; // y position of the hit target
var htargetw = 355; // Hit target width
var htargeth = 96; // Hit target height
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.fillStyle= rgb(0,0,0);
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)");
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, "hill.jpg");
var htarget = new Picture(htargetx, htargety, htargetw, htargeth, "plateau.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;
}
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();
```
0
0
复制全文
相关推荐









