一、简介

　　还记得许多年前的春天，你我一起“打飞机”。

　　那就一起写个打飞机游戏吧：

 

 

 

二、HTML内容

　　HTML 基础知识戳这

　　HTML内容把需要的图片资源以相应标签格式写出即可，分为以下几部分：

HTML代码

 

三、CSS布局

　　CSS基础知识戳这

　　CSS代码块只需把HTML代码块的图片进程简单布局，分以下几部分：

.bg { background-image height width position margin-left margin-top overflow border .me-plan { width height background-image position top left display z-index .bullet { position display left .x, .x2 { position display .lift { position top .die { display #play_num { font-size

CSS代码

 

四、jQuery 代码块

　　JavaScript基础知识戳这，DOM相关戳这，jQuery全套戳这

 　　jQuery代码块是程序的主要实现部分：

 

1、程序所需值与预定义

程序在一开始就必须获取相应的值，以便之后调用：

背景的宽与高 ：判断自己战机是否超出边界，如果超出则固定在边界内某一块；

自己战机的宽与高：也做超出边界固定的作用，加上这个值更精确；

背景图片相对父元素的距离：这个值也可以说背景图片相对body的距离，因为需要不断获取鼠标的坐标，来确定自己战机的位置，鼠标的坐标减去这个值即是元素相对父级元素的距离；

还需要预定义一些值：

play_num：游戏的得分，默认定位0；

FD = {}：定义一个"字典"，存放每个敌机的对象与对于标签，用于判断碰撞。

dheight = $('.bg').height(); fheight = $('.me-plan').height(); zheight = $('.bullet').height(); l = $('.bg').offset().left; play_num = 0; // 计算分数

 

2、鼠标移动事件

　　自己战机需要不断跟着鼠标走，所有必须定义鼠标移动事件；

　　event.clientX与event.clientY分别为鼠标的x和y轴距离；

　　判断如果超出边界，则战机固定位置；

　　鼠标位置坐相应处理就是战机的位置（实时）。

$(".me-plan").mousemove(function m(event) { /* 鼠标移动事件 */ var x = event.clientX - fwidth / 2; var y = event.clientY - fheight / 2; MovePlanM(x - l, y - t); }) function MovePlanM(x, y) { /* 战机随鼠标移动 */ if (x >= dwidth) { x = dwidth - fwidth; } else if (y >= dheight) { y = dheight - fheight; } $('.me-plan').css({ "top": y + "px", "left": x + "px", }); }

 

3、随机值

 　　每次敌机出现的x轴位置是不同的，所有需要写一个随机数函数；

　　可以以做为出现敌机的类型，小飞机与大飞机。

function Randmon() { /* 用于随机生成x轴与敌机型号 */ var num_one = Math.random(); var num_two = num_one * 100; if (num_two < 80) { num_two += 100; } num_stree = Math.round(Math.abs(num_two)); return num_stree }

 

4、敌机类

　　一次可以出现一个以上敌机，而敌机属性都类似，所有需要写一个类；

　　三个参数，分别为x轴，y轴，还有敌机的类型；

　　通过克隆再插入对应标签实现多个敌机；

　　通过定时器使y轴自加，使敌机不断向下移动；

　　判断如果超出背景，则停止定时器，删除对应标签；

　　把对象都加入FD字典中；

　　注意：定时器为单独函数，不属于类，所以需要用到继承。

function FoePlan(x, y, BB) { /* 克隆及移动敌机 */ this.x = x; this.y = y; this.BB = BB; this.Clone = function () { var objj = $(this.BB).first().clone(true).appendTo(".bg").css("display", "block"); var s2 = setInterval(MovePlanFirst, 100); function MovePlanFirst() { FoePlan.call(dic = [this.x, this.y, objj]; FD[this] = dic; RemovePlan(this.y, s2, objj); y += 20; objj.css({ "top": this.y + "px", "left": this.x + "px", }) } } } function RemovePlan(y, s2, objj) { /* 用于删除出镜的敌机 */ if (y > 600) { clearInterval(s2); $(objj).remove(); } }

 

5、子弹相关

　　两个参数，分别为自己战机x轴与y轴坐标，用于跟着战机相对移动；

　　定时器让y轴坐标自减，对应的子弹会一直上升；

　　子弹超出边界则删除定时器与对应标签；

　　循环读取FD字典，得到每个敌机的坐标，判断碰撞则爆炸效果，并淡出；

　　如果击落敌机对应分数增加；

　　击落敌机删除对应标签与FD中的值。