[Canvas]空战游戏进阶 增加发射子弹 敌机中弹爆炸功能
点此下载源码。
图例：
源码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>飞越河谷的战机1.06 19.3.14 9:45 by:逆火狂飙 horn19782016@163.com</title>
<style>
*{
margin:1px;
padding:1px;
}
#canvas{
background:#ffffff;
}
#controls{
float:left;
}
</style>
</head>
<body onload="init()">
<table border="0px">
<tr>
<td width="50px"valign="top">
<div id="controls">
<input id='animateBtn' type='button' value='运动'/>
</div>
</td>
<td width="100%" align="center">
<canvas id="canvas" width="1200px" height="562px" >
出现文字表示你的浏览器不支持HTML5
</canvas>
</td>
</tr>
</table>
<div>
</div>
</body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
paused=! paused;
if(paused){
animateBtn.value="运动";
}else{
animateBtn.value="暂停";
window.requestAnimationFrame(animate);
}
}
var ctx; // 绘图环境
var bg; // 背景
var lastTime=0;
var fps=0;
var myPlane;
var myShells;
var enemyPlaneMng;
function init(){
// 创建背景对象
bg=new Background();
// 初始化CTX
var canvas=document.getElementById('canvas');
canvas.width=bg.width*6;
canvas.height=bg.height*4;
ctx=canvas.getContext('2d');
lastTime=+new Date;
// 创建本机对象
myPlane=new MyPlane(ctx.canvas.width/2,canvas.height-100);
myShells=new Array();
enemyPlaneMng=new EnemyPlaneMng();
// 响应键盘按下事件
canvas.addEventListener('keydown', doKeyDown, true);
window.addEventListener('keydown', doKeyDown, true);
// 响应键盘弹起事件
canvas.addEventListener('keyup', doKeyUp, true);
window.addEventListener('keyup', doKeyUp, true);
canvas.focus();
};
//------------------------------------
// 响应键盘按下事件
//------------------------------------
function doKeyDown(e) {
var keyID = e.keyCode ? e.keyCode :e.which;
if(keyID === 38 || keyID === 87) { // up arrow and W
myPlane.toUp=true;
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // down arrow and S
myPlane.toDown=true;
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // right arrow and D
myPlane.toRight=true;
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // left arrow and A
myPlane.toLeft=true;
e.preventDefault();
}
if(keyID === 32 ) { // SpaceBar
myPlane.isShoot=true;
e.preventDefault();
}
}
//------------------------------------
// 响应键盘弹起事件
//------------------------------------
function doKeyUp(e) {
var keyID = e.keyCode ? e.keyCode :e.which;
if(keyID === 38 || keyID === 87) { // up arrow and W
myPlane.toUp=false;
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // down arrow and S
myPlane.toDown=false;
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // right arrow and D
myPlane.toRight=false;
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // left arrow and A
myPlane.toLeft=false;
e.preventDefault();
}
if(keyID === 32 ) { // SpaceBar
myPlane.isShoot=false;
e.preventDefault();
}
}
// 更新各对象状态
function update(){
myPlane.move();
for(var i=0;i<myShells.length;i++){
var myShell=myShells[i];
if(myShell.destroyed==false){
if(enemyPlaneMng.isShooted(myShell.x,myShell.y)==true){
myShell.destroyed=true;
}
}
myShell.move();
}
enemyPlaneMng.move();
}
// 在CTX画出各个对象
function draw(){
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
fps=calculateFps(new Date);
bg.setOffset(fps);
var bgImg=bg.getImage();
ctx.drawImage(bgImg,0,bg.height-bg.Offset,bg.width,bg.Offset,0,0,ctx.canvas.width,4*bg.Offset);
ctx.drawImage(bgImg,0,0,bg.width,bg.height-bg.Offset,0,4*bg.Offset,canvas.width,canvas.height-4*bg.Offset);
myPlane.paint(ctx);
for(var i=0;i<myShells.length;i++){
var myShell=myShells[i];
myShell.paint(ctx);
}
enemyPlaneMng.paint(ctx);
}
function calculateFps(now){
var retval=1000/(now-lastTime);
lastTime=now;
// console.log("fps",retval)
return retval;
}
function animate(){
if(!paused){
update();
draw();
}
window.requestAnimationFrame(animate);
}
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>点类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Point=function(x,y){
this.x=x;
this.y=y;
}
Point.prototype={
x:0, // 横坐标
y:0, // 纵坐标
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<点类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>背景类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Background=function(){
this.width=104;
this.height=156;
this.files=['bgBlue.jpg','bgRiver.jpg','bgSky.jpg','bgVolcano.jpg'];
this.Offset=0;
this.velocity=40;
}
Background.prototype={
width:104, // 背景图片原始宽度
height:156, // 背景图片原始高度
files:[], // 图片数组
Offset:0, // 偏移值
velocity:40, // 背景移动速度
loopValue:0, // 循环累加值,用来确定时哪一张图片
getImage:function(){
this.loopValue++;
if(this.loopValue>=3999){
this.loopValue=0;
}
var index=Math.floor(this.loopValue/1000);
var img=new Image();
img.src=this.files[index];
return img;
},
setOffset:function(fps){
this.Offset=this.Offset<this.height?this.Offset+this.velocity/fps:0;
},
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<背景类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>我方战机类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
MyPlane=function(x,y){
Point.apply(this,arguments);
this.types=[
{width:56,height:41,file:'m1.png'},
{width:56,height:41,file:'m2.png'},
{width:80,height:54,file:'m3.png'},
{width:109,height:83,file:'m4.png'},
{width:109,height:81,file:'m5.png'},
{width:109,height:91,file:'m6.png'},
];
}
MyPlane.prototype={
files:[], // 存储图片的数组
step:4, // 每次移动多远
toLeft:false, // 是否向左移动
toRight:false, // 是否向右移动
toUp:false, // 是否向上移动
toDown:false, // 是否向下移动
level:3, // 等级
isShoot:false, // 是否开炮
paint:function(ctx){
var img=new Image();
var index=this.level;
img.src=this.types[index].file;
ctx.drawImage(img,this.x-this.types[index].width/2,this.y-this.types[index].height/2);
var img2=new Image();
img2.src="shoot.png";
ctx.drawImage(img2,this.x-5.5,this.y-5.5);
},
move:function(){
// 加入边界判断 2019年3月13日19点16分
var type=this.types[this.level].file;
if(this.x<0){
this.x=0;
this.toLeft=false;
}
if(this.x>ctx.canvas.width){
this.x=ctx.canvas.width;
this.toRight=false;
}
if(this.y<0){
this.y=0;
this.toUp=false;
}
if(this.y>ctx.canvas.height){
this.y=ctx.canvas.height;
this.toDown=false;
}
// 运动
if(this.toLeft==true){
this.x-=this.step;
}
if(this.toRight==true){
this.x+=this.step;
}
if(this.toUp==true){
this.y-=this.step;
}
if(this.toDown==true){
this.y+=this.step;
}
// 开炮
if(this.isShoot==true){
var myShell=new MyShell(this.x,this.y);
myShells.push(myShell);
}
},
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<我方战机类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>我方炮弹类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
MyShell=function(x,y){
Point.apply(this,arguments);
//this.files=['shell0.png','shell1.png','shell2.png','shell3.png','shell4.png','shell5.png','shell6.png','shell7.png',];
this.types=[
{width:11,height:11,file:'shell0.png'},
{width:11,height:11,file:'shell1.png'},
{width:11,height:11,file:'shell2.png'},
{width:11,height:11,file:'shell3.png'},
{width:11,height:11,file:'shell4.png'},
{width:11,height:11,file:'shell5.png'},
{width:11,height:11,file:'shell6.png'},
{width:18,height:18,file:'shell7.png'},
];
}
MyShell.prototype={
types:[], // 炮弹型号
destroyed:false,// 是否被敌机撞毁
visible:true, // 是否在CTX显示范围内
level:3, // 等级，用以决定炮弹型号
paint:function(ctx){
if(this.visible==false){
return;
}
if(this.destroyed==false){
//var img2=new Image();
//img2.src=this.files[0];
//ctx.drawImage(img2,this.x-5.5,this.y-5.5);
// 没被击毁显示飞机型号
var img=new Image();
var index=this.level;
img.src=this.types[index].file;
ctx.drawImage(img,this.x-this.types[index].width/2,this.y-this.types[index].height/2);
}
},
move:function(){
// 设置越界不可见
if(this.x<0){
this.visible=false;
}
if(this.x>ctx.canvas.width){
this.visible=false;
}
if(this.y<0){
this.visible=false;
}
if(this.y>ctx.canvas.height){
this.visible=false;
}
if(this.visible==true){
this.y-=18;
}
},
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<我方炮弹类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>敌方飞机类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
EnemyPlane=function(x,y,level){
Point.apply(this,arguments);
this.level=level;
this.types=[
{width:117,height:64,file:'e0.png'},
{width:117,height:64,file:'e1.png'},
{width:100,height:77,file:'e2.png'},
{width:117,height:85,file:'e3.png'},
{width:117,height:93,file:'e4.png'},
{width:117,height:93,file:'e5.png'},
{width:117,height:96,file:'e6.png'},
{width:117,height:99,file:'e7.png'},
];
this.explosions=[
{width:105,height:100,file:'explosion0.png'},
{width:105,height:100,file:'explosion1.png'},
{width:105,height:100,file:'explosion2.png'},
{width:105,height:100,file:'explosion3.png'},
{width:105,height:100,file:'explosion4.png'},
{width:105,height:100,file:'explosion5.png'},
];
}
EnemyPlane.prototype={
types:[], // 飞机型号数组
destroyed:false, // 是否被击毁
level:7, // 等级，用此取飞机型号
visible:true, // 是否在ctx显示范围内
explosions:[], // 爆炸图片
destroyTime:0, // 被摧毁时间
paint:function(ctx){
// 不可见则不显示
if(this.visible==false){
return;
}
if(this.destroyed==false){
// 没被击毁显示飞机型号
var img=new Image();
var index=this.level;
img.src=this.types[index].file;
ctx.drawImage(img,this.x-this.types[index].width/2,this.y-this.types[index].height/2);
var img2=new Image();
img2.src="shoot.png";
ctx.drawImage(img2,this.x-5.5,this.y-5.5);
}else{
var index=Math.floor(this.destroyTime);
if(index<this.explosions.length){
this.destroyTime+=0.05;
var img=new Image();
img.src=this.explosions[index].file;
ctx.drawImage(img,this.x-this.explosions[index].width/2,this.y-this.explosions[index].height/2);
}
}
},
move:function(){
// 设置越界不可见
if(this.x<0){
this.visible=false;
}
if(this.x>ctx.canvas.width){
this.visible=false;
}
if(this.y<0){
this.visible=false;
}
if(this.y>ctx.canvas.height){
this.visible=false;
}
if(this.visible){
this.y+=1;
}
},
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<敌方飞机类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>敌方飞机管理类定义开始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
EnemyPlaneMng=function(x,y){
Point.apply(this,arguments);
this.planes=new Array();
this.planes.push(new EnemyPlane(ctx.canvas.width/2,20,0));
this.planes.push(new EnemyPlane(ctx.canvas.width/2-80,20,1));
this.planes.push(new EnemyPlane(ctx.canvas.width/2+80,20,3));
}
EnemyPlaneMng.prototype={
planes:[],
paint:function(ctx){
for(var i=0;i<this.planes.length;i++){
var plane=this.planes[i];
plane.paint(ctx);
}
},
move:function(){
for(var i=0;i<this.planes.length;i++){
var plane=this.planes[i];
plane.move();
}
},
isShooted:function(x,y){
for(var i=0;i<this.planes.length;i++){
var plane=this.planes[i];
if(plane.visible==true && plane.destroyed==false){
var xDiff=x-plane.x;
var yDiff=y-plane.y;
var distance=Math.sqrt(Math.pow(xDiff,2)+Math.pow(yDiff,2));
console.log(distance);
if(distance<5){
plane.destroyed=true;
return true;
}
}
}
return false;
},
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<敌方飞机管理类定义结束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//-->
</script>
2019年3月14日19点54分
[Canvas]空战游戏进阶 增加发射子弹 敌机中弹爆炸功能的更多相关文章
- [Canvas]空战游戏进阶 增加己方子弹管理类
点此下载源码,可用Chrome打开观看. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http ...
- [Canvas]空战游戏进阶 增加爆炸管理类
点此下载源码,欲观看效果请用Chrome打开index.html 图例: 源码: <!DOCTYPE html> <html lang="utf-8"> & ...
- [canvas]空战游戏1.18
空战游戏到今天可以玩了,玩法还是方向键(或AWSD)控制飞机位置,空格键开炮,吃五星升级,被敌机打中降级直到击落,与敌机相撞则GG. 点此下载程序1.16版,用CHrome打开index.html试玩 ...
- [Canvas]空战游戏 已经可以玩了 1.13Playable
空战游戏做到这里,己方运动,己方发射子弹,敌方运动,敌方发射子弹,子弹与飞机碰撞,飞机与飞机碰撞都已经具备了,换言之已经可以玩了. 还需要一个奖励升级系统,在上面显示击落敌机数量等,还有己方不幸被击落 ...
- Demo_敌军坦克生成，坦克移动（可以拓展发射子弹，敌军消失获取分数或者添加动画，声音功能）
using UnityEngine; using System.Collections; public class Tank : MonoBehaviour { //坦克面积结构体对象 public ...
- [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第4讲（创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机，小飞机死亡）
一.创建敌方飞机 1.思考创建思路: 创建敌方飞机思路与创建玩家飞机思路一样: (1)思考敌方飞机具备什么属性: 敌方飞机的图片.坐标.飞行速度.状态(是否被击中) 设置小飞机被击中时消失时间.飞机可 ...
- unity零基础开始学习做游戏（四）biu~biu~biu发射子弹打飞机
-------小基原创,转载请给我一个面子 主角都能移动了,那不得做点什么伸张正义,守护世界和平的事嘛,拿起家伙biu~biu~biu~ 首先得做一个好人和一个坏人 老规矩,Canvas下创建两个Im ...
- 用JS制作《飞机大作战》游戏_第4讲（创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机，小飞机死亡）-陈远波
一.创建敌方飞机 1.思考创建思路: 创建敌方飞机思路与创建玩家飞机思路一样: (1)思考敌方飞机具备什么属性: 敌方飞机的图片.坐标.飞行速度.状态(是否被击中) 设置小飞机被击中时消失时间.飞机可 ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇03：子弹发射》
3.子弹发射 子弹发射概述: 在打飞机游戏中,子弹是自动发射的.子弹与子弹之间间隔一定的时间,玩家通过上下左右控制游戏角色,来达到躲避敌人及击中敌人的操作. 发射原理: 抽象理解为有两个容器存放子弹, ...
随机推荐
- 并发研究之Java内存模型（Java Memory Model)
Java内存模型JMM java内存模型定义 上一遍文章我们讲到了CPU缓存一致性以及内存屏障问题.那么Java作为一个跨平台的语言,它的实现要面对不同的底层硬件系统,设计一个中间层模型来屏蔽底层的硬 ...
- android app 流量统计
https://blog.csdn.net/yzy9508/article/details/48300265 | android 数据流量统计 - CSDN博客https://blog.csdn.ne ...
- CSP 地铁修建 Kruskal (最小生成树+并查集)
问题描述 A市有n个交通枢纽,其中1号和n号非常重要,为了加强运输能力,A市决定在1号到n号枢纽间修建一条地铁. 地铁由很多段隧道组成,每段隧道连接两个交通枢纽.经过勘探,有m段隧道作为候选,两个交通 ...
- [Wc]Dface双面棋盘（）
题解: 一道维护奇怪信息的线段树... 我刚开始看了标签想的是删去图上一个点后求连通性 发现不会 于是退化成一般图支持删除 插入 维护连通性 发现有2两种做法 1.lct维护 按照结束顺序先后排序,给 ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象，事件委托，事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
- zstu 4247-萌新的旅行
题目大意: zstu的萌新们准备去自助旅行,他们租了一辆吉普车,然后选择了n个城市作为游览地点.然后他们惊喜的发现他们选择的城市刚好绕城一个环. 也就是说如果给所有城市按照0,1,2,……,n-1编号 ...
- 【noip模拟赛5】细菌
描述 近期,农场出现了D(1<=D<=15)种细菌.John要从他的 N(1<=N<=1,000)头奶牛中尽可能多地选些产奶.但是如果选中的奶牛携带了超过 K (1<=K ...
- 093实战 Nginx日志切割，以及脚本上传nginx的切割日志
一:日志切割步骤 命令都在root下进行 1.创建目录 mkdir -p /etc/opt/modules/bin ## 创建文件夹 2.上传cut 3.观察目录 4.修改的cut文件 5.检测 需要 ...
- 076 Apache的HBase与cdh的sqoop集成（不建议不同版本之间的集成）
1.修改sqoop的配资文件 2.从mysql导入到hbase(import) bin/sqoop import \ --connect jdbc:mysql://linux-hadoop3.ibei ...
- C#连接数据库MD5数据库加密
创建StringHelper类 首先数据库里的资料是加密了的. 创建将指定的字符串加密为MD5密文方法 public static string ToMD5(string source){ Strin ...