当前位置： >
用HTML5雷电写的-打飞机游戏
时间： 08:38 来源：互联网 作者：源码搜藏 浏览：
闲来无事写一个HTML5打飞机游戏，类似雷电游戏，飞机打飞行中的物体，当然也需要躲避发来的子弹，没事了研究下HTML5的强大功能，jquery版本我用的是1.7.2，高版本也是可以的。
&!doctype html&
&meta charset=&utf-8&&
&title&闲来无事，一起打飞机-网&/title&
&script id=&jquery_172& type=&text/javascript& class=&library& src=&/js/jquery-1.7.2.min.js&&&/script&
body{ margin:0; padding:0; background:#000; font-family:}
#box { width: 300 height:500 margin:10 overflow: position: border:15px solid #f0f0f0; background:#000;}
#box .title{ width:300 height:40 line-height:40 position: left:0; top:80 z-index:1; color:# text-align: font-size:24 }
#box .difficulty{ width:300 position: top:180 z-index:1; font-family:}
#box .difficulty a{ width:180 height:30 line-height:30 text-align: display: margin:20px auto 0 background:#f0f0f0; color:#333; text-decoration:}
#box .difficulty a:hover{ background:#900; color:#}
#box .bg img{ display:}
#box .warcraft{ width:60 height:36 position: left:120 &top:500 background:url('/jscss/demoimg/201403/warcraft.png') center no- z-index:3;}
#box .bullet{ width:6 height:22 background:url('/jscss/demoimg/201403/bullet.png'); position: z-index:2}
#box .enemy{ width:23 height:30 background:url('/jscss/demoimg/201403/enemy.png'); position: z-index:3}
#box .score { width:220 height:30 line-height:30 position: color:# font-weight: padding-left:5 font-size:16 z-index:5;}
#box .tips{ width:240 height: 200 line-height:40 padding:10 position: left:20 top:130 &background:#f0f0f0;}
#box .tips .type{ width:160 padding: 2px 15 height:30 line-height:30 text-align: color: font-weight:}
#box .tips p{ width:160 height:40 font-size:32 line-height:40 text-align: cursor: &background:#333; color:# margin:20px auto 0}
#box .tips .nn,#box .tips .tt{ padding:2px 10 font-weight: &color:}
#box .tips .tt{ display: text-align: font-size:24}
&div id=&box&&&/div&
$(function () {
game.startScreen.draw();
var game = {
stage : $(&#box&),
modetxt : &&,
bg : null,
bullet : null,
enemy : null
], //参数配置
count : 0,
warcraftX : 0,
warcraftY : 0,
stitle : function ( score ) {
switch ( game.modetxt ) {
case '纯潘磕Ｊ' :
if( score == 0 ) {
return '潘恐械潘';
else if( score &= 20000 ) {
return '入门级潘'
else if( score &= 100000 && score & 20000 ) {
return '资深潘'
else if( score &= 500000 && score & 100000 ) {
return '知名潘'
return '全国十佳潘';
case '高富帅模式' :
if( score == 0 ) {
return '药不能停';
else if( score &= 20000 ) {
return '人艰不拆'
else if( score &= 100000 && score & 20000 ) {
return '夜用型高富帅'
else if( score &= 500000 && score & 100000 ) {
return '日夜两用'
return '打飞机战将';
case '李少侠模式' :
if( score == 0 ) {
return '坑爹坑娘';
else if( score &= 20000 ) {
return '我很无辜'
else if( score &= 100000 && score & 20000 ) {
return '小伙伴惊呆了'
else if( score &= 500000 && score & 100000 ) {
return '我是受害者'
return '嫖客';
startScreen : {
draw : function () {
var title = $(&&div&&);
title.addClass(&title&);
title.html(&打飞机 1.0 Javascript版&);
game.stage.append(title);
var difficulty = $(&&div&&);
difficulty.addClass(&difficulty&);
difficulty.html(&&a href='javascript:void(0)'&纯潘磕Ｊ&/a&&a href='javascript:void(0)'&高富帅模式&/a&&a href='javascript:void(0)'&李少侠模式&/a&&);
game.stage.append(difficulty);
game.stage.find($(&.difficulty&)).delegate(&a&,&click&, function ( e ) {
game.stage.start =
game.startScreen.remove();
$(document).mousemove( function ( e ) {
if( game.num.count % 2 == 0 && game.stage.start)
var e = e ||
var x = e.clientX - game.stage.offset().left - 10;
var y = e.clientY - game.stage.offset().top - 10;
game.core.warcraft([x,y]);
game.num.count++;
var set = game.mode[$(this).index()];
game.modetxt = $(this).html();
game.core.draw(set[0]);
game.timer.bullet = setInterval ( function () {
game.core.bullet(set[1],[game.num.warcraftX,game.num.warcraftY]);
},set[2]);
game.timer.enemy =setInterval ( function () {
game.core.enemy({
speed : game.randomNum(set[3],set[4]),
left : game.randomNum(0,277),
top : -game.randomNum(30,80)
}, //绘制开始界面
remove : function () {
var removeDiv = game.stage.children($(&div&));
removeDiv.stop().animate({opacity:0},100);
setTimeout( function () {
removeDiv.remove();
}, //开始场景
draw : function ( speed ) {
var warcraft = $(&&div&&);
warcraft.addClass(&warcraft&);
game.stage.append(warcraft);
var score = $(&&div&&);
score.addClass(&score&);
score.html(&0&);
game.stage.append(score);
}, //绘制游戏场景
warcraft : function ( pos ) {
var warcraft = game.stage.find($(&.warcraft&)),
left = &pos[0] -warcraft.width()/2 - 3,
top = &pos[1] - warcraft.height()/2 - 6;
if( left &= -warcraft.width()/2 ) {
left = -warcraft.width()/2;
else if( left &= game.stage.width() - warcraft.width()/2) {
left = game.stage.width() - warcraft.width()/2;
if( top &= 0) {
else if ( top &= game.stage.height() - warcraft.height()) {
top = game.stage.height() - warcraft.height();
warcraft.css({left:left,top:top});
game.num.warcraftX = left + warcraft.width()/2;
game.num.warcraftY = top + warcraft.height()/2;
}, //战斗机位置
bullet : function ( speed ,pos ) {
var bullet = $(&&div&&);
bullet.addClass(&bullet&);
game.stage.append(bullet);
bullet.css({
left : pos[0] - bullet.width()/2,
top : pos[1] - bullet.height()/2
bullet.stop().animate({top:-bullet.height()},speed,function () { bullet.remove();})
}, //子弹开始发射
enemy : function ( argument ) {
var speed = argument.
var left = argument.
var top = argument.
var oEnemy &= $(&&div&&);
oEnemy.addClass(&enemy&);
oEnemy.css({
left : left,
oEnemy.appendTo(game.stage);
oEnemy.stop().animate( { top:530 }, speed , function () { oEnemy.remove(); clearInterval(oEnemy.timer)});
oEnemy.timer = setInterval ( function () {
var x = parseInt(oEnemy.css(&left&)) + 12,
y = parseInt(oEnemy.css(&top&)) + 15,
l = $(&.bullet&).
for( var i = 0 ; i& i++ )
var bx = Math.abs( x - parseInt($(&.bullet&).eq(i).css(&left&))),
by = Math.abs( y - parseInt($(&.bullet&).eq(i).css(&top&)));
if( bx &= 14 && &by &= 20 )
oEnemy.css(&background&,&url('http://www.codefans.net/jscss/demoimg/201403/boom.png')&);
$(&.bullet&).eq(i).remove();
clearInterval(oEnemy.timer);
game.num.score++;
game.stage.find($(&.score&)).html(game.num.score*1000);
setTimeout( function () { oEnemy.remove(); },300)
var bx2 = Math.abs( x - parseInt($(&.warcraft&).css(&left&)) - 30),
by2 = Math.abs( y - parseInt($(&.warcraft&).css(&top&)) - 18);
if( bx2 &= 40 && &by2 &= 33 )
var tips = $(&&div&&);
tips.addClass(&tips&);
tips.html(&您在&span class='type'&& + game.modetxt.substring(0,3) + &杯&/span&全国花式打飞机大赛上，以&span class='nn'&&+$(&.score&).html() + &&/span&分荣获称谓&span class='tt'&&+game.stitle($(&.score&).html())+&&/span&&p&再打一次&/p&&);
game.stage.delegate(&.tips p&,'click',function(){
game.num.score = 0;
game.startScreen.remove();
game.startScreen.draw();
oEnemy.remove();
$(&.score&).css(&display&,&none&);
$(&.warcraft&).css(&background&,&url('http://www.codefans.net/jscss/demoimg/201403/boom2.png')&);
clearInterval(oEnemy.timer);
setTimeout( function () { $(&.warcraft&).remove(); },300)
clearInterval(game.timer.bullet);
clearInterval(game.timer.enemy);
clearInterval(game.timer.bg);
setTimeout( function () {
game.stage.append(tips);
}, //核心代码
randomNum : function (a,b){
var value = Math.abs(a-b) ,
num = parseInt(Math.random()*(value)) + Math.min(a,b);
} //产生指定区域整形随机数。
猜你也喜欢看这些 ??????
其他类型的特效代码 ??????我想找一个雷电游戏，以前我记得好像有红色跟蓝色的飞机去大战，子弹有闪光弹，蓝色的弹，红色的弹。_百度知道
我想找一个雷电游戏，以前我记得好像有红色跟蓝色的飞机去大战，子弹有闪光弹，蓝色的弹，红色的弹。
线索就如题
我有更好的答案
游戏并不是简单的将这些玄幻内容移植过来，并增加了东方玄幻元素《天·骄3》的背景设定取材于中国传统文学典籍、妖魔鬼怪重新组合，将古老的天仙罗汉，而是在全新的故事背景设定下，创立了全新的《天·骄3》游戏世界观
你别忽悠我啊，什么调校3啊，百度都搜索不到诶。在帮我找找
雷电3 话说雷电的游戏都差不多，经典的就是雷电3了
雷电OL，我玩过，很不错的，战机很多。
其他类似问题
为您推荐：
雷电游戏的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁 上传我的文档
 下载
 收藏
高级JEE软件开发工程师，多年软件开发经验
 下载此文档
正在努力加载中...
java雷电游戏计算机毕业设计论文
下载积分：300
内容提示：java雷电游戏计算机毕业设计论文
文档格式：DOC|
浏览次数：0|
上传日期： 16:26:37|
文档星级：
该用户还上传了这些文档
java雷电游戏计算机毕业设计论文
官方公共微信java编程雷电飞机游戏_百度知道
java编程雷电飞机游戏
java编程雷电飞机游戏怎样实现放大招雷的效果…最好有素材图片…
有了好的类结构设计，否则就要检查一下类设计了把飞机类定义上正常和放大两个状态，这样程序主流程就不用关心飞机该画大的还是小的图片了，分别包含大小和图片，让飞机类自己画就行了，你会发现不管放大还是隐身、穿越什么的功能效果扩充都会很容易
其他类似问题
为您推荐：
其他1条回答
开个线程,切换图片.图片网上应该有.
苦于没有图片……网上找了几天了……
你去下 别人 已经写好的 雷电,里面就会有素材
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}