今天给大家分享一个飞机大战小游戏代码
不废话直接上代码
<div>
<canvas id="myCanvas" width="480" height="650"></canvas>
</div>
先是canvas画布然后样式，让他居中
<style>
div{
margin: 0 auto;
text-align: center;
}
</style>
下面就是JS代码部分
<script>
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
//初始化数据
//定义游戏状态
var START = 0; //加载
var STARTING = 1; //加载中
var RUNNING = 2; //游戏开始
var PAUSE = 3; //暂停
var GAMEOVER = 4; //结束
var start = START;
var WIDTH = 480;
var HEIGHT = 650;
var score = 0;
var life = 3;
var bg = new Image();
bg.src = "images/background.png";
var Bg = {
imgs: bg,
width:480,
height:850
}
function BG(stemp){
this.imgs = stemp.imgs;
this.width = stemp.width;
this.height = stemp.height;
//第一张图位置
this.x1 = 0;
this.y1 = 0;
//第二张图位置
this.x2 = 0;
this.y2 = -this.height;
//定义paint函数绘制背景图片
this.paint = function(){
cxt.drawImage(this.imgs, this.x1, this.y1);
cxt.drawImage(this.imgs, this.x2, this.y2);
}
//定义step函数移动背景图片
this.step = function(){
this.y1++;
this.y2++;
//当第一张图运行到最底层时
if(this.y1==this.height)
this.y1 = -this.height;
if(this.y2==this.height)
this.y2 = -this.height;
}
}
//创建背景对象
var sky = new BG(Bg);
var logo = new Image();
logo.src = "images/start.png";
//游戏加载状态
var loadings = [];//定义加载状态图片数组
loadings[0] = new Image();
loadings[0].src = "images/game_loading1.png";
loadings[1] = new Image();
loadings[1].src = "images/game_loading2.png";
loadings[2] = new Image();
loadings[2].src = "images/game_loading3.png";
loadings[3] = new Image();
loadings[3].src = "images/game_loading4.png";
//定义对象存储图片数据
var Loading = {
img : loadings,
length : loadings.length,
width : 186,
height : 38
}
function Load(temp){
this.img = temp.img;
this.length = temp.length;
this.width = temp.width;
this.height = temp.height;
this.index = 0; //定义数组索引
//x,y为图片位置
this.x = 110;
this.y = 400;
this.paint = function(){
cxt.drawImage(this.img[this.index],this.x,this.y);
}
//移动函数
this.cnt = 0;
this.step = function(){
this.cnt++;
if(this.cnt%3==0)
this.index++;
if(this.index == this.length)
start = RUNNING; //游戏开始标志
}
}
//创建载入图片对象
var loadImg = new Load(Loading);
//canvas绑定点击事件
//点击画布进入START
canvas.onclick = function(){
if(start==START)
start = STARTING;
}
//定义玩家对象状态数组
// var myPlane = [];
// myPlane[0] = new Image;
// myPlane[0].src = "images/hero1.png"
// myPlane[1] = new Image;
// myPlane[1].src = "images/hero2.png"
// //生命值为0时
// myPlane[2] = new Image;
// myPlane[2].src = "images/hero_blowup_n1.png"
// myPlane[3] = new Image;
// myPlane[3].src = "images/hero_blowup_n2.png"
// myPlane[4] = new Image;
// myPlane[4].src = "images/hero_blowup_n3.png"
// myPlane[5] = new Image;
// myPlane[5].src = "images/hero_blowup_n4.png"
var myPlane = [];
myPlane[0] = new Image;
myPlane[0].src = "images/wang1.png"
myPlane[1] = new Image;
myPlane[1].src = "images/wang1.png"
//生命值为0时
myPlane[2] = new Image;
myPlane[2].src = "images/wang1.png"
myPlane[3] = new Image;
myPlane[3].src = "images/wang1.png"
myPlane[4] = new Image;
myPlane[4].src = "images/wang1.png"
myPlane[5] = new Image;
myPlane[5].src = "images/wang1.png"
//定义玩家飞机数据对象
var plane = {
img: myPlane,
length: myPlane.length,
width:173,
height:166,
collider:2 //玩家是否碰撞状态
}
//创建玩家飞机函数
function PLANE(my){
this.img = my.img;
this.length = my.length;
this.width = my.width;
this.height = my.height;
this.collider = my.collider;
this.index = 0; //数组索引
//飞机(图片)位置
this.x = (WIDTH - this.width) / 2;
this.y = HEIGHT - 150;
this.dash = false; //飞机未碰撞
//撞击函数
this.bang = function(){
this.dash = true;//飞机碰撞了
}
this.paint = function()
{
cxt.drawImage(this.img[this.index],this.x,this.y);
}
//玩家飞机运动函数
this.step = function()
{
//飞机未碰撞时在两张图片中来
//回切换，形成动态效果
if (this.dash==false)
{
this.index++;
this.index = this.index % 2;
}
else
{
//飞机碰撞后加载碰撞后的图片
this.index++;
if (this.index==this.length)
{
//碰撞一次生命值减一
life--;
//s生命值为0时结束游戏
if (life <= 0)
{
start = GAMEOVER;
this.index = this.length - 1;
}
//生命值不为0重建玩家飞机对象
else
{
player = new PLANE(plane);
}
}
}
}
//定义自动射击的时间间隔
this.cnt = 0;
//玩家飞机射击控制函数
this.shoot = function()
{
this.cnt++;
if (this.cnt % 3==0)
{
//射出的子弹存在数组里
bullett.push(new bulls(bull));
}
}
}
//设置玩家对象
var player = new PLANE(plane);
//设置飞机在画布上跟随鼠标移动
canvas.onmousemove = function(evevt)
{
var event = event || window.event;
if (start==RUNNING)
{
//获取鼠标的位置
var x = event.offsetX;
var y = event.offsetY;
//使玩家飞机中心跟随鼠标
player.x = x - player.width / 2;
player.y = y - player.height / 2;
}
}
//绘制子弹
var bu = new Image();
// bu.src = "images/bullet1.png";
bu.src = "images/regou1.png";
//初始化子弹数据
var bull = {
img:bu,
width:57,
height:93
}
//绘制子弹函数
function bulls(zd){
this.img = zd.img;
this.width = zd.width;
this.height = zd.height;
//子弹坐标
this.x = player.x + player.width / 2 - this.width / 2;
this.y = player.y - this.height - 10;
this.candel = false;
this.paint = function(){
cxt.drawImage(this.img,this.x,this.y);
}
this.step = function(){
this.y -= 10;
}
this.bang = function(){
this.candel = true;
}
}
//创建储存1子弹对象的数组
var bullett = [];
function bullet_paint(){
for(var i=0;i<bullett.length;i++){
bullett[i].paint();
}
}
//创建子弹运动函数
function bullet_step(){
for(var i=0;i<bullett.length;i++){
bullett[i].step();
}
}
//清楚无用子弹（触碰边界的）
function bullet_vanish(){
for(var i=0;i<bullett.length;i++){
if(bullett[i].candel==true || bullett[i].y<-bullett[i].height){
bullett.splice(i,1);
}
}
}
//创建敌方战机
var enermys = []; //敌机图片数组
enermys[0] = new Image();
enermys[0].src = "images/enemy1.png";
enermys[1] = new Image();
enermys[1].src = "images/enemy1_down1.png";
enermys[2] = new Image();
enermys[2].src = "images/enemy1_down2.png";
enermys[3] = new Image();
enermys[3].src = "images/enemy1_down3.png";
enermys[4] = new Image();
enermys[4].src = "images/enemy1_down4.png";
// var enermys1 = []; //敌机图片数组
// enermys1[0] = new Image();
// enermys1[0].src = "images/enemy2.png";
// enermys1[1] = new Image();
// enermys1[1].src = "images/enemy2_down1.png";
// enermys1[2] = new Image();
// enermys1[2].src = "images/enemy2_down2.png";
// enermys1[3] = new Image();
// enermys1[3].src = "images/enemy2_down3.png";
// enermys1[4] = new Image();
// enermys1[4].src = "images/enemy2_down4.png";
// var enermys2 = [];
// enermys2[0] = new Image;
// enermys2[0].src = "images/enemy3_hit.png";
// enermys2[1] = new Image;
// enermys2[1].src = "images/enemy3_n1.png";
// enermys2[2] = new Image;
// enermys2[2].src = "images/enemy3_n2.png";
//生命值为0时
// enermys2[3] = new Image;
// enermys2[3].src = "images/enemy3_down1.png";
// enermys2[4] = new Image;
// enermys2[4].src = "images/enemy3_down2.png";
// enermys2[5] = new Image;
// enermys2[5].src = "images/enemy3_down3.png";
// enermys2[6] = new Image;
// enermys2[6].src = "images/enemy3_down4.png";
// enermys2[7] = new Image;
// enermys2[7].src = "images/enemy3_down5.png";
//敌机初始化数据
var enermy = {
img: enermys,
length: enermys.length,
width: 57,
height: 51,
life: 1,
score: 1
}
// var enermy1 = {
// img: enermys1,
// length: enermys1.length,
// width: 57,
// height: 51,
// life: 20,
// score: 1
// }
// var enermy2 = {
// img: enermys2,
// length: enermys2.length,
// width: 57,
// height: 51,
// life: 50,
// score: 1
// }
function Enermy(dj)
{
this.img = dj.img;
this.length = dj.length;
this.width = dj.width;
this.height = dj.height;
this.life = dj.life;
this.score = dj.score;
//用随机数产生敌机出现的坐标
this.x = Math.random() * (WIDTH - this.width);
this.y = -this.height;
this.dash = false;//撞击标志位
this.cancel = false;//确定动画是否播放完
this.index = 0;//敌机索引
//绘制敌机
this.paint = function()
{
cxt.drawImage(this.img[this.index],this.x,this.y);
}
//敌机运动函数
this.step = function()
{
if (!this.dash)
{
//没碰撞时敌机状态不变一直是第一张图片
this.index = 0;
this.y += 10;
if (this.y+this.height>HEIGHT)
{
//当敌机到达画布底部还没被击败，则游戏结束
start = GAMEOVER;
}
}
else
{
//加载碰撞后的动画
this.index++;
if (this.index == this.length)
{
this.cancel = true;//表示动画播放完
this.index = this.length - 1;
}
}
}
//敌机撞击函数
this.bang = function()
{
//碰撞后生命值减少
this.life--;
if (this.life<=0)
{
this.dash = true;
score += this.score;
}
}
//判断碰撞函数
this.check_hit = function(obj)
{
return this.x<obj.x+obj.width && this.x+this.width>obj.x && this.y<obj.y+obj.height && this.y+this.height>obj.y
}
}
//定义数组存储敌机
var enermies = [];
function enermy_create()
{
//使用随机数控制敌机产生数量
var ran = Math.floor(Math.random()*100);
if (ran<=7)
{
enermies.push(new Enermy(enermy));
}
}
//绘制敌机
function enermy_paint()
{
for (var i=0;i<enermies.length;i++)
{
enermies[i].paint();
}
}
//敌机运动
function enermy_step()
{
for (var i=0;i<enermies.length;i++)
{
enermies[i].step();
}
}
//敌机毁灭并清除掉
function enermy_dash()
{
for (var i=0;i<enermies.length;i++)
{
if (enermies[i].cancel || enermies[i].y>HEIGHT)
enermies.splice(i,1);
}
}
//碰撞处理函数
function checkHit()
{
for (var i=0;i<enermies.length;i++)
{
//情况一：玩家飞机与敌机碰撞
if (enermies[i].check_hit(player))
{
enermies[i].bang();
player.bang();
}
//情况二：子弹与敌机相撞
for (var j=0;j<bullett.length;j++)
{
if (enermies[i].check_hit(bullett[j]))
{
enermies[i].bang();
bullett[j].bang();
}
}
}
}
//定义暂停图片
var pause = new Image();
pause.src = "images/game_pause_nor.png";
//鼠标离开画布时暂停
canvas.onmouseout = function()
{
if (start ==RUNNING)
start = PAUSE;
}
//鼠标回到画布时继续
canvas.onmouseover = function()
{
if (start == PAUSE)
start = RUNNING;
}
//在画布的左上角打印得分
//在画布右上角打印玩家生命值
function pain_information()
{
cxt.font = 'bold 24px 微软雅黑';
cxt.fillText("SCORE:"+score,20,30);
cxt.fillText("LIFE:"+life,380,30);
}
//游戏结束时打印gameover
function paint_end_game()
{
cxt.font = "bold 36px 微软雅黑";
cxt.fillText("GAMEOVER",150,300);
}
//定时器循环调用
function main()
{
sky.paint();//绘制背景图
sky.step();//背景图滚动
//当游戏是开始状态时
if (start == START)
{
cxt.drawImage(logo,40,0);//添加飞机大战字样的图片
}
//当游戏是载入状态时
else if (start == STARTING)
{
loadImg.paint();//绘制加载图片
loadImg.step();//加载图片运动
}
else if (start == RUNNING)
{
//玩家飞机状态
player.paint();//绘制玩家飞机
player.step();//玩家飞机运动
player.shoot();//玩家飞机射击
//射击子弹状态
bullet_paint();//绘制子弹
bullet_step();//子弹运动
bullet_vanish();//子弹消失
//敌人状态
enermy_create();//敌机产生
enermy_paint();//敌机绘制
enermy_step();//敌机运动
enermy_dash();//敌机毁灭
checkHit();//判断敌机碰撞
//打印玩家得分与生命值
pain_information();
}
//暂停游戏时也要保存当前游戏的状态画面
else if (start == PAUSE)
{
player.paint();
bullet_paint();
enermy_paint();
cxt.drawImage(pause,200,300);
pain_information();
}
//游戏结束状态
else if (start == GAMEOVER)
{
pain_information();
paint_end_game();
}
}
setInterval(main,60);
</script>
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
