【HTML——简易 飞机大战 小游戏（效果+代码）】，高级前端开发工程师

最新推荐文章于 2024-05-04 08:02:12 发布
最新推荐文章于 2024-05-04 08:02:12 发布
阅读量324 收藏 4
点赞数 8
分类专栏： 程序员 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84093899/article/details/137386673
版权

}

/* 爆炸图片 */

img.boom {

position: absolute;

animation: opa 1s;

}

@keyframes opa {

0% {

opacity: 1;

}

25% {

opacity: 0.5;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

/* prize */

.prize {

position: absolute;

width: 50px;

height: 50px;

font-size: 50px;

text-align: center;

line-height: 50px;

border: 1px dashed red;

color: red;

font-weight: bold;

animation: prize 1s infinite;

}

@keyframes prize {

0% {

transform: scale(1);

}

50% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

}

/* 得分板 */

.score {

position: absolute;

top: 0;

left: 0;

width: 70px;

height: 30px;

color: #fff;

font-size: 20px;

}

/* 记录得分 */

.record {

width: 60%;

height: 100px;

margin: 100px auto;

background: #000;

padding: 10px;

border: 4px double #fff;

color: #fff;

}

.record p {

height: 50px;

font-size: 40px;

font-weight: bold;

text-align: center;

color: skyblue;

}

/* 再来一次 */

.btn {

position: absolute;

bottom: 50px;

right: 0;

left: 0;

margin: auto;

width: 150px;

height: 40px;

text-align: center;

line-height: 40px;

color: #fff;

font-size: 20px;

font-weight: bold;

border-radius: 10px;

background: #000;

cursor: pointer;

}

2401_84093899
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML——飞机大战小游戏（完整代码+音乐）.rar
02-22
这是一个由前端技术（HTML等）实现的飞机大战----小游戏，包含完整的代码，同时也有背景音乐，可以供各位学习等使用，欢迎各位下载！
【Html——自由小球球】（效果+代码）追光者♂.zip
09-05
既好看又好玩的特效分享：【Html——自由小球球】（效果+代码）追光者
2024年最新10款超炫HTML5游戏 附游戏源码，2024年最新使用指南
最新发布
2401_83620841的博客
05-04 798
棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。在线演示源码下载。
打飞机小游戏html代码,纯汇编实现打飞机小游戏的示例代码
weixin_36482113的博客
05-31 1550
汇编暑假作业要求做一个大项目，题目可以自拟。我思来想去，还是觉得做一个小游戏比较有意思。最后选择了做打飞机游戏。这里采用的是VGA模式320x200 4色。打飞机游戏的游戏逻辑比较简单。首先，飞机可以移动，也可以发射炮弹；其次，会有敌人不断地从前方飞过来，如果撞上飞机游戏结束；最后，飞机发射的炮弹可以击落敌人。既然是打飞机，我们就必须首先造一台飞机，代码如下：Comment/***********...
JS+HTML开发网页版飞机大战游戏
SYEYEE的博客
07-21 270
利用js+html写的一个飞机大战游戏 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>时钟</title> <style type="text/css"> body{background:#000}.clock{position:absolute;opac.
《游戏学习》HTML5全民飞机大战小游戏实战源码，BAT大厂面试题整理
2401_83739411的博客
03-30 291
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 9962
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
HTML5飞机大战
m0_71663621的博客
06-01 574
基于HTML5 Canvas的简单游戏，名为“HTML5飞机大战”。它包括了一个Canvas元素和一个JavaScript脚本。JavaScript脚本定义了四个类：GameObject、Player、Enemy和Bullet，分别代表游戏对象、玩家、敌人和子弹。它还定义了三个变量：player、enemies和bullets，分别代表玩家、敌人和子弹。它还定义了两个函数：spawnEnemy和shoot，分别用于生成敌人和发射子弹。最后，它定义了一个update函数，用于更新游戏状态和绘制游戏画面。在up
HTML+CSS+JS制作【飞机大战】小游戏（键盘版和鼠标版）
2302_81218205的博客
12-25 1186
function Myplane(w, h, x, y, imgurl, boomurl) { //w,h宽高 x,y位置 imgurl和boomurl我方飞机的图片路径。在游戏进行界面中，左上方有得到的分数显示，敌方飞机有三种类型（小，中，大），他们的形状，大小，击落的分数各不同，以合适的速度控制它们的数量，以及运动的速度。//给每一架创建的敌机添加自定义的属性--血量。原文链接：https://blog.csdn.net/huangwfu/article/details/128458321。
分享24个网页游戏源代码，总有一个是你想要的
热门推荐
zdh13370188237的博客
02-03 1万+
网页
全民飞机大战HTML5游戏源码
06-25
全民飞机大战HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
HTML5飞机大战源码.rar
12-15
HTML5飞机大战源码.rar
飞机大战源码
05-31
每个类我都在博客中详细的介绍了，大家有不懂的地方可以向楼主提问哦，最后将项目的源码发给大家。一起学习，共同进步。
Html——表白弹幕 特效（效果 + 代码）.rar
02-07
这是一个由前端技术实现的HTML前端——表白特效，可以直接运行，包含全部源代码，同时也带背景音乐，可以在运行时自行播放，欢迎大家下载！
小游戏——飞机大战JAVA实现
07-20
个人初学java之后编写的飞机大战小游戏 这个压缩包里有所有的代码以及一些游戏素材 注释齐全 当然，这个小游戏可能还有一些bug，不过我个人没有发现，如果有人发现了，我们可以一起讨论学习
java毕业设计——打飞机游戏设计与实现(论文+源代码).zip
05-29
java毕业设计——打飞机游戏设计与实现(论文+源代码).zip java毕业设计——打飞机游戏设计与实现(论文+源代码).zip java毕业设计——打飞机游戏设计与实现(论文+源代码).zip java毕业设计——打飞机游戏设计与实现...
Html飞机大战(十): 消灭敌机
Fattiger1234的博客
09-06 537
飞机大战，关于敌机的设置
盘点25个Html游戏Game源码网页爱好者不容错过
adendean的博客
12-03 2303
盘点25个Html游戏Game源码网页爱好者不容错过
html飞机大战游戏代码
05-20
以下是一个简单的 HTML 飞机大战游戏代码： ```html <!DOCTYPE html> <html> <head> <title>飞机大战</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas> <script> // 获取画布和上下文 var canvas = document.getElementById("gameCanvas"); var ctx = canvas.getContext("2d"); // 定义飞机属性 var plane = { x: canvas.width / 2, y: canvas.height - 50, width: 50, height: 50, speed: 5 }; // 监听键盘事件 document.addEventListener("keydown", function(event) { if (event.keyCode === 37) { // 左箭头 plane.x -= plane.speed; } else if (event.keyCode === 39) { // 右箭头 plane.x += plane.speed; } }); // 定义子弹属性 var bullets = []; var bulletSpeed = 10; function createBullet() { bullets.push({ x: plane.x + plane.width / 2, y: plane.y, width: 5, height: 10, speed: bulletSpeed }); } // 定义敌机属性 var enemies = []; var enemySpeed = 3; function createEnemy() { enemies.push({ x: Math.random() * (canvas.width - 50), y: 0, width: 50, height: 50, speed: enemySpeed }); } // 游戏循环 var score = 0; setInterval(function() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制飞机 ctx.fillStyle = "blue"; ctx.fillRect(plane.x, plane.y, plane.width, plane.height); // 绘制子弹 ctx.fillStyle = "red"; bullets.forEach(function(bullet) { ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); bullet.y -= bullet.speed; }); // 绘制敌机 ctx.fillStyle = "green"; enemies.forEach(function(enemy) { ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); enemy.y += enemy.speed; }); // 检测子弹和敌机是否碰撞 bullets.forEach(function(bullet) { enemies.forEach(function(enemy, i) { if (bullet.x < enemy.x + enemy.width && bullet.x + bullet.width > enemy.x && bullet.y < enemy.y + enemy.height && bullet.y + bullet.height > enemy.y) { bullets.splice(bullets.indexOf(bullet), 1); enemies.splice(i, 1); score++; } }); }); // 检测敌机是否撞到飞机 enemies.forEach(function(enemy) { if (enemy.x < plane.x + plane.width && enemy.x + enemy.width > plane.x && enemy.y < plane.y + plane.height && enemy.y + enemy.height > plane.y) { alert("游戏结束！得分：" + score); location.reload(); } }); // 创建子弹和敌机 createBullet(); if (score >= 10) { createEnemy(); } }, 30); </script> </body> </html> ``` 这只是一个简单的示例，你可以根据自己的需求和技能来进行改进和扩展，比如添加更多的敌机、增加游戏难度等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值