JS微信打飞机游戏（三）

最新推荐文章于 2022-11-12 21:12:07 发布

乔爷

最新推荐文章于 2022-11-12 21:12:07 发布

阅读量2.1k

点赞数

分类专栏： JS游戏文章标签： JavaScript 打飞机微信游戏 HTML5

本文链接：https://blog.csdn.net/samwang822/article/details/10051801

版权

JS游戏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这个版本里面有三个更新:

1. 玩家飞机，子弹和背景用了微信打飞机里面的图片。无奈抠图水平差。子弹过大。

2.玩家飞机不允许出界面

3.子弹飞机界面外就移除

HTML代码和JS代码如下：(建议用Chrome浏览器运行，其他浏览器没测试过。)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>微信 全民 打飞机</title>

<!-- 
	邮件: samwang822@gmail.com
 -->
<!-- 
	在这个小demo里面，我没有用jQuery.
	是的，jQuery可以做很多事，但他毕竟是JavaScript库，基础的是JavaScript.
	搞笑的是,许多刚入门JavaScript的同事，居然问我先学jQuery,而且老把jQuery和JavaScript概念搞反。
	我也是这样，先学的jQuery,后来才发现JavaScript同样可以很简单的处理很多事情，许多场合jQuery反而把事情搞复杂。
 -->
 <!-- 
 	在这个版本里，你可以用"A","S","D","W"来移动你的飞机，并且飞机持续发现子弹。
  -->

<style type="text/css">
canvas#mycanvas {
/*让canvas显示在浏览器正中央 */
	position: absolute;
	margin: auto auto;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	background: url(image/bg.jpg);
	border: 1px solid #d3d3d3;
	
}
img{
	display:none;
}
</style>
</head>
<body>
<!-- 提供两个隐藏的IMG，用来画飞机和子弹 -->
<img src="image/flyer.jpg" id="playerImg" />
<img src="image/bullet.jpg" id="bulletImg" />

<!-- 
你需要指定canvas的width，而不是在style里面声明。后者无效
 -->
<canvas id="mycanvas" width="400" height="600">
</canvas>

<script src="hitFlyer3.js" ></script>
</body>
</html>

//涉及到移除数组某个元素，扩展下Array

Array.prototype.remove=function(obj){
	
	var index=this.indexOf(obj);
	if(index==-1){
		return this;
	}
			delete obj;
			this.splice(index,1);
			return this;	
}



/**
 * 我把JS放在body的最后面，不然的话你要在window.onload事件后执行js. 代码可能像这个样子。 <code>
 *	window.addEventListener("load",function(){
 *	 //todo put your code
 *	});
 *
 *</code>
 */
var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
var playerImg = document.getElementById("playerImg");
var bulletImg = document.getElementById("bulletImg");

var canWidth = mycanvas.width;
var canHeight = mycanvas.height;

// 子弹容器
var bulletList = new Array();

/*
 * 因为玩家飞机只有一个实例，所以我们直接创造这个player对象，而不是创造一个Player类。
 */
var player = {
	// 玩家飞机对象
	imgObj : playerImg,
	width : playerImg.width,
	height : playerImg.height,
	step : 5,// 当按住移动键（A,S,D,W）玩家飞机每次移动的距离。
	position : {
		x : 0,
		y : 0
	}
};

/*
 * 飞机显示方法，将移到(x,y)处
 */
player.display = function(x, y) {
	this.position.x = x;
	this.position.y = y;
	// 画玩家飞机图片
	ctx.drawImage(this.imgObj, x, y);
}
// 飞机移动方法
player.move = function(dir) {

	switch (dir) {
	case "up":
		// 保证玩家飞机移动不出界
		if (this.position.y <= 0)
			return;
		this.position.y -= this.step;
		break;
	case "down":
		if (this.position.y >= canHeight-this.height)
			return;
		this.position.y += this.step;
		break;
	case "left":
		if (this.position.x <= 0)
			return;
		this.position.x -= this.step;
		break;
	case "right":
		if (this.position.x >= canWidth-this.width)
			return;
		this.position.x += this.step;
		break;

	}

	// 先移走先前的图片，再重画
	this.miss();
	this.display(this.position.x, this.position.y);
}
// 移除玩家飞机对象
player.miss = function() {
	
	// 不介意扩大Rectangle擦除
	ctx.clearRect(this.position.x-5, this.position.y-5, this.width+10, this.height+10);
}

// 子弹会生成很多，所以声明子弹类
function Bullet(ctx) {
	this.imgObj = bulletImg;
	this.width = this.imgObj.width;
	this.height = this.imgObj.height;
	this.ctx = ctx;
	// 每个子弹实例有自己的位置
	this.x = 0;
	this.y = 0;
	// 子弹每次移动距离
	this.step = 40;
}
/*
 * 每只子弹实例有它们自己的属性，但是共享方法。用prototype声明方法将共享
 */

// 显示子弹
Bullet.prototype.display = function(x, y) {

	this.x = x;
	this.y = y;
	ctx.drawImage(bulletImg, this.x, this.y);
}

// 移除子弹
Bullet.prototype.miss = function() {

	this.ctx.clearRect(this.x, this.y, this.width, this.height);
}
Bullet.prototype.move = function() {
	// 如果子弹飞出界，移走，当然不显示了。
	if(this.y<=0){
		bulletList.remove(this);
		return;
	}
	
	// 首先移走行前的子弹，再按新位置显示，子弹就移动了。
	this.miss();
	this.display(this.x, this.y - this.step);
}

// 玩家飞机发射子弹.
player.fire = function() {
	var b = new Bullet(ctx);
	// 从玩家飞机的中上方发出子弹
	b.display(this.position.x + this.width / 2 - b.width / 2 + 1,
			this.position.y - b.height);
	bulletList.push(b);
}

// 在界面上底中部显示玩家飞机
player.display((canWidth - player.width) / 2, canHeight - player.height);

// 增加按键(A,S,D,W)时，玩家飞机移动事件
// keypress 事件会每隔33秒触发一次。我不知道其他浏览器和Java Swing里面是不是也是这样的。
window.addEventListener("keypress", function(e) {
	var keyCode = e.keyCode;
	var dir = "";
	if (keyCode === 119) {
		// w
		dir = "up";
	} else if (keyCode === 100) {
		// d
		dir = "right";
	} else if (keyCode === 115) {
		// s
		dir = "down";
	} else if (keyCode === 97) {
		// a
		dir = "left";

	}
	// 把方向传到player.move方法里
	player.move(dir);
});

// 玩家飞机会一直发射子弹。
window.setInterval(function() {
	// 玩家飞机发射
	player.fire();
	// 子弹移动

	for ( var i = 0; i < bulletList.length; i++) {
		bulletList[i].move();
		console.log(bulletList.length);
	}
}, 60);

运行界面：