JavaScript学习之仿微信打飞机游戏

最新推荐文章于 2020-09-22 14:26:02 发布

axiaochong

最新推荐文章于 2020-09-22 14:26:02 发布

阅读量1.8k

点赞数

分类专栏： Web前端学习互联网相关

本文链接：https://blog.csdn.net/dalongyes/article/details/12991735

版权

互联网相关同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Web前端学习

2 篇文章 0 订阅

订阅专栏

学习一些小游戏的编写还是很有意思的，对于游戏的编写，我的理解就是一张张图片的刷新，比如游戏中控制一个物体移动，那需要做的就是一张一张刷新新的图片并清除掉前一张图片，便可以实现物体的移动了。为了模仿微信中的打飞机游戏，首先需要做的是抠图，这样才能实现效果接近一致。

从面向对象的角度来考虑，可以从游戏中抽象出三个对象：自己的飞机，子弹，敌方飞机。那在编程过程中也需要从这三个对象的角度出发来分析、编码，分别抽象出这三个对象的各个属性和涉及的方法，将其实现。随后再辅助写功能函数来控制游戏和丰满游戏性，便可以将该游戏实现。

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>

<body>
<style>
#myCanvas
{
	position:absolute;
	left:600px;
	top:50px;
	border:1px solid #c3c3c3;
	margin:auto;
	background-image:url(images/background.jpg);
}
img
{
	display:none;
}
</style>

<img src="images/plane.jpg" id="planeImg">
<img src="images/enemyL.jpg" id="enemyLImg">
<img src="images/enemyM.jpg" id="enemyMImg">
<img src="images/enemyS.jpg" id="enemySImg">
<img src="images/bullet.jpg" id="bulletImg">
<img src="images/explode.jpg" id="explodeImg">

<canvas id="myCanvas" width="500" height="700">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript" src="PlaneGame.js"></script>
</body>
</html>

js代码如下：

// JavaScript Document
//获取canvas以及被隐藏的image对象
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var planeImg = document.getElementById("planeImg");
var enemyLImg = document.getElementById("enemyLImg");
var enemyMImg = document.getElementById("enemyMImg");
var enemySImg = document.getElementById("enemySImg");
var bulletImg = document.getElementById("bulletImg");
var explodeImg = document.getElementById("explodeImg");

var canWidth = c.width;
var canHeight = c.height;
//定义子弹、敌机对象数组
var bulletList = new Array();
var enemyList = new Array();

var plane = new Plane(245,650);
plane.showPlane();
//监听键盘按键，WASD控制左右上下
window.addEventListener("keypress", function(e)
{
	var keyCode = e.keyCode;
	var direction = "";
	switch (keyCode)
	{
		case 119:
		direction = "up";
		break;
		case 115:
		direction = "down";
		break;
		case 97:
		direction = "left";
		break;
		case 100:
		direction = "right";
		break;
	}
	plane.movePlane(direction);
});
//定时控制子弹移动
window.setInterval(function()
							{
								plane.fire();
								for (var i = 0; i < bulletList.length; i++)
								{
									var b = bulletList[i];
									if ((b.y - b.step) >= 50)
									{
										b.moveBullet();
									}
									else 
									{
										b.clcBullet();
										bulletList.splice(i, 1);
								//		i -= 1;
									}
								}
								CheckCollision();
								CheckLife();
							},30);
//随机产生敌机阵容
function CreateEnemy()
{
	var temp = Math.random()*251;
	var type = "";
	var x = Math.random()*(canWidth-enemyLImg.width);
	if (temp >= 0 && temp <= 30)
	{
		type = "large";
	}
	else if (temp > 30 && temp <= 150)
	{
		type = "medium";
	}
	else if(temp > 150 && temp <= 251)
	{
		type = "small";
	}
	var enemy = new Enemy(type, x, 0)
	enemyList.push(enemy);
	enemy.showEnemy();
}
//定时控制敌机产生
window.setInterval(function()
							{
								CreateEnemy();
							},2000);
//定时控制敌机移动
window.setInterval(function()
							{
								for (var i = 0; i < enemyList.length; i++)
								{
									var e = enemyList[i];
									if ((e.y + e.step) < canHeight)
									{
										e.moveEnemy();
									}
									else
									{
										e.clcEnemy();
										enemyList.splice(i, 1);
								//		i -= 1;
									}
								}
							},100);

//检查敌机是否被子弹击中
function CheckCollision()
{
	for (var i = 0; i < enemyList.length; i++)
	{
		var e = enemyList[i];
		for (var j = 0; j < bulletList.length; j++)
		{
			var b = bulletList[j];
			if ( (b.y<=(e.y+e.height) && b.y>=e.y) && ((e.x-b.width)<=b.x && b.x<=(e.x+e.width)) )
			{
				b.clcBullet();
				bulletList.splice(j, 1);
//				j -= 1;
				e.life -= 1;
				if (e.life <= 0)
				{			
				cxt.drawImage(explodeImg, e.x, e.y);
				cxt.clearRect(e.x, e.y, explodeImg.width, explodeImg.height);			
				e.clcEnemy();
				enemyList.splice(i, 1);
	//			i -= 1;
				}
			}
		}
	}
}
//检查飞机是否被碰撞击毁
function CheckLife()
{
	for (var i = 0; i < enemyList.length; i++)
	{
		var e = enemyList[i];
		if (((e.y+e.height)>=plane.y) && (e.y<=(plane.y+plane.height)) && (e.x+e.width)>=plane.x && e.x<=(plane.x+plane.width))
		{
			plane.clcPlane();
			alert("game over");
			window.location.href = "http://www.baidu.com";
		}
	}
}
//定义飞机对象
function Plane(x, y)
{
	this.x = x;
	this.y = y;
	this.planeObj = planeImg;
	this.width = planeImg.width;
	this.height = planeImg.height;
	this.life = 1;
	this.step = 20;
	this.showPlane = function()
	{
		cxt.drawImage(this.planeObj, this.x, this.y);
	}
	this.movePlane = function(direction)
	{
		this.clcPlane();
		switch(direction)
		{
			case "up":
			if ((this.y-this.step) >=0)
			{
				this.y -= this.step;
			}
			break;
			case "down":
			if ((this.y + this.step) <= (canHeight - this.height))
			{
				this.y += this.step;
			}
			break;
			case "left":
			if ((this.x - this.step) >= 0)
			{
				this.x -= this.step;
			}
			break;
			case "right":
			if ((this.x + this.step) <= (canWidth - this.width))
			{
				this.x += this.step;
			}
			break;
		}
		this.showPlane();
	}
	this.clcPlane = function()
	{
		cxt.clearRect(this.x, this.y, this.width, this.height);
	}
	this.fire = function()
	{
		var bullet = new Bullet(this.x+this.width/2-2, this.y-11);
		bullet.showBullet();
		bulletList.push(bullet);
	}
}
//定义子弹对象
function Bullet(x, y)
{
	this.bulletObj = bulletImg;
	this.x = x;
	this.y = y;
	this.width = bulletImg.width;
	this.height = bulletImg.height;
	this.step = 20;
	
	this.showBullet = function()
	{
		cxt.drawImage(this.bulletObj, this.x, this.y);
	}
	this.clcBullet = function()
	{
		cxt.clearRect(this.x, this.y, this.width, this.height);
	}
	this.moveBullet = function()
	{
		this.clcBullet();
		this.y -= this.step;
		this.showBullet();
	}
}
//定义敌机对象
function Enemy(type,x,y)
{
	this.type = type;
	if (this.type == "large")
	{
		this.enemyObj = enemyLImg;
		this.width = enemyLImg.width;
		this.height = enemyLImg.height;
		this.life = 10;
	}
	else if (this.type == "medium")
	{
		this.enemyObj = enemyMImg;
		this.width = enemyMImg.width;
		this.height = enemyMImg.height;
		this.life = 6;
	}
	else if (this.type == "small")
	{
		this.enemyObj = enemySImg;
		this.width = enemySImg.width;
		this.height = enemySImg.height;
		this.life = 1;
	}
	this.x = x;
	this.y = y;
	//this.width = this.enemyObj.width;
	//this.height = this.enemyObj.height;
	this.step = 5;
	
	this.showEnemy = function()
	{
		cxt.drawImage(this.enemyObj, this.x, this.y);
	}
	this.clcEnemy = function()
	{
		cxt.clearRect(this.x, this.y, this.width, this.height);
	}
	this.moveEnemy = function()
	{
		this.clcEnemy();		
		this.y += this.step;
		this.showEnemy();
	}	
}

axiaochong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习之仿微信打飞机游戏

学习一些小游戏的编写还是很有意思的，对于游戏的编写，我的理解就是一张张图片的刷新，比如游戏中控制一个物体移动，那需要做的就是一张一张刷新新的图片并清除掉前一张图片，便可以实现物体的移动了。为了模仿微信中的打飞机游戏，首先需要做的是抠图，这样才能实现效果接近一致。从面向对象的角度来考虑，可以从游戏中抽象出三个对象：自己的飞机，子弹，敌方飞机。那在编程过程中也需要从这三个对象的角度出发来分析、编码
复制链接

扫一扫