index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>H5 打飞机游戏</title>
<script type="text/javascript" src="./jquery.min.1.7.1.js"></script>
<style>
body{padding:0; margin:0; text-align:center}
.content{border:1px #000 solid; width:480px; margin:0 auto; height:800px; display:block; font-size:72px;}
.info,.blog{border:1px #000 solid; position:fixed; top:5px; right:5px; width:150px; text-align:left}
.blog{ left:10px; background:#000; text-align:center; width:100px}
.blog a{ color: #FFF; text-decoration:none; font-size:15px; }
</style>
</head>
<body>
<div class="content"><canvas id="dotu" width="480" height="800"></canvas></div>
<div class="blog"><a href="/">回到博客首页</a></div>
<div class="info">
鼠标X：<span id="sbX"></span><br>鼠标Y：<span id="sbY"></span><br>小飞机数:<span id="fjs"></span><br>子弹数:<span id="zds"></span><br>打中:<span id="isdz"></span><br>生成飞机时间:<span id="scfj"></span>
</div>
<script type="text/javascript" src="./dotu_game.js"></script>
</body>
</html>
dotu_game.js
// JavaScript Document
var c = document.getElementById("dotu");
var cxt = c.getContext("2d");
var img = newImg("./assets/bg_01.jpg");
var fps;
cxt.drawImage(img,0,0,480,800);
var flivverLog = 0;
var flivver1 = newImg("./assets/flivver.png");
var flivver2 = newImg("./assets/flivver2.png");
var flivver3 = newImg("./assets/flivver3.png");
// 用于记录游戏的时间，越到后面越快
var time1 = 0;
var time2 = 80;
// 积分
var jifen = 0;
function getSudu(){
var number = parseInt(Math.random()*10);
if(number < 5 && number > 0){
return number;
}
return 1;
}
// 飞机的对象
function flivverObj(hp,ewidth,eheight,eimg,esudu){
// 随机的X
this.x = parseInt(Math.random()*460+1);
this.y = 0;
// 血量
this.hp = hp;
// 挨打
this.hit = 0;
// 是否死亡
this.over = 0;
this.width = ewidth;
this.height = eheight;
this.img = eimg;
this.sudu = esudu;
}
// 获取飞机
function getFlivver(type){
switch(type){
case 1:
return new flivverObj(100,50,30,flivver1,getSudu());
case 2:
return new flivverObj(500,70,90,flivver2,getSudu());
case 3:
return new flivverObj(1000,110,170,flivver3,getSudu());
}
}
function cartridge(x,y){
this.x = x;
this.y = y;
}
function gameover(){
window.clearTimeout(fps);
//$('#dotu').fadeOut();
$('.content').css('position','relative');
$('.content').append('<span style="position:absolute; top:5px; left:2px; font-size:150px; color:#cc0000; text-align:center" id="sil"></span>');
$('#sil').html('你').hide().fadeIn(1000,function(){
$(this).html('你屎').hide().fadeIn(1000,function(){
$(this).html('<a href="javascript:location.reload();" style="color:#cc0000" title="重新开始">你屎了</a><br>' + jifen + ' 分').hide().fadeIn();
});
});
}
(function(cxt){
var dotu = {nums:0};
// 用于存放小飞机
var flivver = new Array();
var flivverImg = newImg("./assets/flivver.png");
// 自己
var me = {x:240,y:750};
var meImg = newImg('assets/me.png');
// 子弹
var cartridges = new Array();
var cartridgeImg = newImg('./assets/cartridge.png');
var boo1 = newImg('./assets/boo1.png');
var over = newImg('./assets/over.png');
//
dotu.update = function(){
dotu.setTimes();
// 设置背景
dotu.setBg();
// 设置小飞机
dotu.setFlivver();
// 画自己
dotu.setMe();
// 子弹
dotu.cartridge();
cxt.font = "italic 20px 微软雅黑";
cxt.strokeText("积分：" + jifen, 10, 30);
$('#fjs').html(flivver.length);
$('#zds').html(cartridges.length);
$('#scfj').html("1000/" + time2 + " 毫秒");
}
dotu.setTimes = function(){
time1++ ;
// 100 秒 1个档位
if(time1 == 1000){
time1 = 0;
time2 = (time2 == 20) ? 20 : time2 - 20;
}
}
/**
* 设置移动的背景
*/
dotu.setBg = function(){
dotu.nums++;
if(dotu.nums == 800){
dotu.nums = 0;
}
// 画布的背景
cxt.drawImage(img,0,dotu.nums,480,800);
cxt.drawImage(img,0,dotu.nums - 800,480,800);
}
dotu.setFlivver = function(){
// 生成飞机
if(dotu.nums % time2 == 0){
flivverLog++;
if(flivverLog % 6 == 0){
flivver.push(getFlivver(2));
}else if(flivverLog % 13 == 0){
flivver.push(getFlivver(3));
}else{
flivver.push(getFlivver(1));
}
}
for(a in flivver){
flivver[a].y += flivver[a].sudu;
// 如果超出屏幕将该小飞机删除
if(flivver[a].y > 780){
flivver.splice(a, 1);
}
// 将小飞机画到画布上
// 小飞机死亡
if(flivver[a].over > 0){
flivver[a].over --;
if(flivver[a].over > 20){
cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);
}else if(flivver[a].over > 2){
cxt.drawImage(over,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,40,43);
}else{
flivver.splice(a, 1);
}
}else{
cxt.drawImage(flivver[a].img,flivver[a].x,flivver[a].y,flivver[a].width,flivver[a].height);
// 判断自己是否死亡
if( me.x > (flivver[a].x - flivver[a].width + 20) && (me.x) <(flivver[a].x + flivver[a].width - 20) && (me.y) < (flivver[a].y + flivver[a].height + 20) && (me.y + 72) > (flivver[a].y - 20)){
gameover();
}
if(flivver[a].hit > 0){
cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);
//cxt.drawImage(boo1,flivver[a].x + 5 ,flivver[a].y,41,39);
flivver[a].hit--;
}
}
}
}
// 更新自己的距离
dotu.setMe = function(){
cxt.drawImage(meImg,me.x,me.y,64,72);
}
// 更新子弹方法
dotu.cartridge = function(){
if(dotu.nums % 10 == 0){
cartridges.push(new cartridge(me.x + 30,me.y));
}
for(i in cartridges){
// 飞到顶部就将OBJ删除掉
if(cartridges[i].y < 0){
cartridges.splice(i, 1);
continue;
}
cartridges[i].y -= 20;
// 将小飞机画到画布上
cxt.drawImage(cartridgeImg,cartridges[i].x,cartridges[i].y,7,17);
// 子弹碰到飞机的情况
for(j in flivver){
if(flivver[j].over > 0){
continue;
}
if(cartridges[i].x > flivver[j].x && cartridges[i].x < flivver[j].x+ flivver[j].width && cartridges[i].y > flivver[j].y && cartridges[i].y -flivver[j].height < flivver[j].y){
flivver[j].hit = 10;
$('#isdz').html('打中了编号' + j);
if(flivver[j].hp > 1){
flivver[j].hp -= 80;
}else{
flivver[j].over = 40;
jifen += 50000;
}
// 子弹消失
cartridges.splice(i, 1);
break;
}
}
}
}
// 绑定鼠标事件
c.addEventListener('mousemove', function onMouseMove(evt) {
me.x = evt.layerX - $('#dotu').offset().left - 32;
me.y = evt.layerY - 36 ;
$('#sbX').html(me.x);
$('#sbY').html(me.y);
});
fps = setInterval(dotu.update, 1000/100);
}(cxt))
function newImg(src){
var obj = new Image();
obj.src = src;
return obj;
}
//setInterval(h.update, 1000/65);
效果图：
相关推荐
H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5 打飞机小游戏源码 H5...
在打飞机游戏中，`<canvas>`被用来绘制游戏场景，包括飞机、敌人、子弹以及各种特效。开发者可以通过JavaScript来控制在这个画布上的绘图操作，实现游戏逻辑。 此外，HTML5还支持本地存储（Web Storage），这使得...
《H5手机游戏飞行棋源码解析与应用探讨》 H5手机游戏飞行棋源码，作为一款基于HTML5技术开发的多人在线游戏，为玩家提供了4人的对战模式，充分满足了用户间的互动需求。HTML5作为一种强大的网页开发语言，因其跨...
最近很火的羊了个羊H5手机游戏源码【亲测】+搭建教程 效果https://www.diyiyuanma.cn/1604.html 【亲测】最近很火的H5羊了个羊游戏源码 up主亲测可用，一分钟搭建最近超火的养了个羊H5游戏。 最近很火的羊了个羊H5...
1942-425款优秀经典H5小游戏】游戏源码分享下载 --- 1942.zipHTML5小游戏【打飞机射击游戏--1942-425款优秀经典H5小游戏】游戏源码分享下载 --- 1942.zipHTML5小游戏【打飞机射击游戏--1942-425款优秀经典H5小游戏】...
《H5游戏源码解析：打字游戏》 在当今数字化时代，HTML5（简称H5）技术以其跨平台、易开发的特点，逐渐成为游戏开发领域的重要选择。本压缩包中的“H5游戏源码 打字游戏.zip”提供了一个以打字练习为主题的H5游戏的...
【标题】"h5小程序-大家来找茬（找不同）,手机h5小游戏.zip" 提供了一个关于H5游戏开发的场景，这是一个基于H5技术的手机小游戏，名为"大家来找茬"，也称为"找不同"游戏。这类游戏通常需要玩家在两张看似相同的图片...
2. **手机游戏开发**: 使用HTML5开发手机游戏，无需考虑平台兼容性问题，因为大部分现代浏览器都支持HTML5。开发者可以通过编写一次代码，使其在Android、iOS甚至Windows Phone等不同操作系统上运行，大大降低了开发...
《H5游戏源码解析：打飞机游戏》 在当今数字化时代，HTML5（简称H5）技术以其跨平台、轻量级、易开发的特点，成为制作网页游戏的热门选择。"打飞机游戏"作为一款经典的休闲游戏，其H5源码的分析能帮助我们深入理解...
这个压缩包中的"经典HTML5小游戏h5游戏源代码合集（37款）"是针对学习者和开发者的一份宝贵资源，包含了各种类型的游戏源码，能够帮助你深入理解HTML5游戏开发的核心技术。 首先，我们来看一下标签中提及的一些具体...
由于HTML5的跨平台特性，这种捕鱼游戏可以在电脑、手机或平板等不同设备的现代浏览器上运行，极大地拓宽了游戏的可访问性。 首先，捕鱼游戏的核心是图形渲染，这在H5中主要通过Canvas API实现。Canvas是一个基于...
【H5神庙逃亡自适应手机游戏】是一款基于HTML5技术开发的移动平台游戏，其特点是能够自动适应不同尺寸的手机屏幕，提供流畅的游戏体验。这款游戏采用了WebGL或者Canvas等技术来绘制游戏场景，使得游戏可以在浏览器...
【H5游戏源码 养成游戏我和小狗的一天.zip】是一个包含H5游戏源代码的压缩包，其中的游戏主题是玩家与小狗的日常生活养成。H5游戏源码是开发HTML5游戏的核心代码，通常包括HTML、CSS和JavaScript等语言，它们构成了...
《手机微信H5卡通飞行游戏打飞机源码详解》 在当今移动互联网时代，H5技术因其跨平台、轻量级、易于分享等特点，成为开发移动端小游戏的热门选择。本篇将详细介绍一款基于H5技术的手机微信卡通飞行游戏——“打飞机...
"60套H5小游戏源码大合集-Html5小游戏JavaScript源码"这个标题明确指出这是一个包含60个不同H5（HTML5）小游戏的源码集合，这些游戏均基于Html5技术和JavaScript编程语言开发。这意味着读者可以深入研究每个游戏的...
多款H5小游戏源码， 修改游戏直接改H5或JS即可 ， 内容包括 作者推荐：1,7,8 1.html5愤怒的小红帽游戏源码下载 2.北京赛车开奖游戏源码 3.射击类js小游戏源码 4.踩云彩跳高小游戏 5.赛车闯关 6.塔防射击神箭手.zip...
H5游戏需要考虑到不同设备的屏幕尺寸和触控操作，通常会使用响应式设计或者媒体查询来确保游戏在手机和平板等不同设备上都能正常运行。 9. 版本控制与源码管理： 提供的源码集合可能包含了版本控制信息，如Git，...
在IT行业中，H5手机转盘抽奖活动游戏页面是一种常见的互动营销工具，广泛应用于各种线上活动中，如品牌推广、用户互动、促销活动等。这个源码是专为移动端设计的，确保在智能手机和平板电脑上能流畅运行，提供用户...
5. **切水果**：这是一款模仿经典手机游戏"水果忍者"的H5版本。游戏包含碰撞检测、动态物理模拟（如水果的抛投和切割效果），开发者需要掌握JavaScript的事件监听和处理，以及可能的物理引擎库。 6. **人从哪里来...
《微信H5小游戏合集源码详解》 微信H5小游戏作为移动互联网时代的一大娱乐热点，因其无需下载、即开即玩的特性深受用户喜爱。本文将深入探讨“微信H5几十款小游戏合集源码”所涉及的技术知识点，帮助开发者理解和...