第九篇博客

最新推荐文章于 2024-03-08 10:45:16 发布
最新推荐文章于 2024-03-08 10:45:16 发布
阅读量85 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58821630/article/details/117805075
版权

以下是 飞机大战的代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name=viewport content="width=device-width, initial-scale=1">

<title>JS飞机大战网页版小游戏</title>

 

<style type="text/css" media="screen">

    *{

        margin: 0;

        padding: 0;

    }

    img{

        border:0;

    }

    ol, ul ,li{list-style: none;}


 

        html,body{

            /* background: url('img/bj.jpg'); */

            height:100%;

            -moz-user-select: none;

            -webkit-user-select: none;

            -ms-user-select: none;

            -khtml-user-select: none;

            user-select: none;

            font-family:sans-serif;

        }

     .layout{

            width:100%;

            height:100%;

            margin: 0 auto;

            background: url('img/bj.jpg') center bottom /100% auto;

            /* background:#505149; */

            position: relative;

            overflow: hidden;

            animation:movebg 3000s linear infinite;

            -moz-animation:movebg 3000s linear infinite; /* Firefox */

            -webkit-animation:movebg 3000s linear infinite; /* Safari and Chrome */

            -o-animation:movebg 3000s linear infinite; /* Opera */

 

        }

        .plane{

            width:110px;

            height:90px;

            /* background:#fff; */

            background:url('img/P.png') 0 -101px no-repeat;

            position: absolute;

            bottom:0;

            left:50%;

            cursor:pointer;

        }

        .b1{

            width:5px;

            height:15px;

            border-radius:50% 50% 5px 5px;

            background:#fff;

            position: absolute;

            top:-50px;

            left:50%;

        }

        .enemy0{

            width:126px;

            height:81px;

            /* background:yellow; */

            background:url('img/P.png') -377px 0 no-repeat;

            position: absolute;

            top:-70px;

            left:20px;

        }

        .enemy1{

            width:108px;

            height:81px;

            /* background:green; */

            background:url('img/P.png') 0 0 no-repeat;

            position: absolute;

            top:-150px;

            left:600px;

        }

        .enemy2{

            width:126px;

            height:87px;

            /* background:blue; */

            background:url('img/P.png') -242px 0 no-repeat;

            position: absolute;

            top:-400px;

            left:80px;

        }

        .enemy3{

            width:120px;

            height:101px;

            /* background:red; */

            background:url('img/P.png') -114px 0 no-repeat;

            position: absolute;

            top:-60px;

            left:510px;

        }

        .b2{

            width:10px;

            height:10px;

            position: absolute;

            border-radius:50%;

            left:50%;

            bottom: -50px;

            background:#fff;

        }

 

        .score{

            display: none;

            padding: 10px 15px;

            font-size:30px;

            font-weight:bold;

            color:#99B2D6;

            background:#031540;

            border:5px solid #425579;

            border-radius:0 50px 50px 0;

            position: absolute;

            top:20px;

            left:20px;

            z-index:1000000;

 

            /* background:red; */

        }

 

        @keyframes movebg

        {

            from {background-position:0 10000%;} to {background-position:0 0%;}

        }

 

        @-moz-keyframes movebg /* Firefox */

        {

            from {background-position:0 10000%;} to {background-position:0 0;}

        }

 

        @-webkit-keyframes movebg /* Safari and Chrome */

        {

            from {background-position:0 10000%;} to {background-position:0 0%;}

        }

 

        @-o-keyframes movebg /* Opera */

        {

            from {background-position:0 10000%;} to {background-position:0 0;}

        }

        #start{

            width: 100%;

            height:100%;

            background:rgba(0, 0, 0, 0.7);

            position: absolute;

            top:0;

            left:0;

        }

        #startBtn{

            background:blue;

            color: #fff;

            font-size:50px;

            margin:100px 0 0 -115px;

            padding: 10px 30px;

            border:5px solid #fff;

            border-radius:50px;

            position: absolute;

            top:50%;

            left:50%;

            outline:none;

            cursor:pointer;

        }

        #name-over{

            font-family:'微软雅黑',sans-serif;

            width:100%;

            padding: 120px 0 10px;

            margin: -200px 0 0 0;

            font-size:50px;

            font-weight:bold;

            text-align:center;

            color:rgba(106,124,197,1);

            line-height:70px;

            background:rgba(106,124,197,0.5) url('img/P1.png') center 20px no-repeat;

            position: absolute;

            top:50%;

            left:0;

        }

</style>

 

</head>

<body>

 

<audio id="bgmuc" autoplay loop src="audio/bjyy.mp3"></audio>

<audio id="fire" loop src="audio/9519.mp3"></audio>

<audio id="boom" src="audio/baoza.mp3"></audio>

<audio id="bigboom" src="audio/bigboom.mp3"></audio>

<div class="layout" id="layout"></div>

<div class="score">得分：

    <span id="score">0</span>

</div>

<div id="start">

    <div id="name-over"><i>飞机大战</i><p>0</p></div>

    <input id="startBtn" type="button" name="mystartBtn" value="START">

</div>

 

<script src="js/main.js"></script>

 

<div style="text-align:center;">

</div>

</body>

</html>

m0_58821630
关注
签名验证反爬，反反爬第二篇博客，Python爬虫120例
梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
12-02 2万+
本篇博客继续为大家带来爬虫反爬技术学习，签名验证。 在上一篇博客，咱们学习的反爬验证信息，是存储在 请求头域 中的信息，签名验证一般在请求体（请求正文）中，服务器接收到对应的字段，并对其来源和合理性进行验证，然后判断是否返回正确数据。 如何判断签名验证 关键字 sign，一般在请求中发现有这个参数，或者与其相关的参数，都可以猜测其为签名验证，即服务器端验证该参数传递到后台的值的合法性，决定是否返回结果。
C语言之蓝桥杯习题 （小白2023年第一篇博客）
pingwenqi的博客
01-01 7689
蓝桥杯习题，C语言编写，简单易懂
【animation的用法】
water7_melon7的博客
04-28 2451
作用 增加用户体验 但是不要过度使用 关键帧 keyframes 动画 animation–name 动画属性名 animation–duration 动画持续时间 animation–delay 动画延迟时间 animation–timing–function 动画速度曲线 animation–iteration–count 定义循环次数 infinite为无限循环 animation–di..
前端提高篇（五十三）CSS3进阶15：animation动画
安之ccy的博客
03-15 986
animation属性是一个简写属性，用于设置动画属性 animation-name：规定需要绑定到选择器的keyframes名称 animation-duration规定完成动画所花费的时间，以秒或毫秒计算 animation-timing-function：规定动画的速度曲线 animation-delay：规定动画开始之前的延迟 animation-iteration-count：规定动画应该播放的次数 animation-direction：规定是否应该轮流反向播放动画 animation-fill
原生js飞机大战
Kobe Bryant
08-02 739
前言： 很早就想写一个休闲小游戏了，今天突然心血来潮，所以写了一个飞机大战的小游戏，代码很简单，接下来就开始上代码了. 我们首先来看一下我们的层级结构： 如图所示： audio文件下面的是我们所需要的游戏音频，可以自行添加，也可不添加。 main.css 代码如下： /* * @Author: Marte * @Date: 2018-06-07 11:33:08 * @Last Modifi...
css动画-animation各个属性详解
热门推荐
weixin_45810135的博客
10-04 1万+
css3的animation很容易就能实现各种酷炫的动画，虽然看到别人的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切入正题。 一、动画属性： 动画属性包括： ①animation-name， ②animation-duration， ③animation-timing-function， ④animation-delay， ⑤animation-iteration-count， ⑥animation-direction， ⑦animation-fill-mode， ⑧
Android下雪动画 VS JS下雪动画
juer2017的博客
09-27 788
Android下雪动画的实现 自定义View package com.shanjing.snowflake; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view.View; import android....
我的第九篇博客
m0_74443100的博客
03-08 352
博客第九篇
bosi2019的博客
12-21 86
第九篇博客
MySkins第二篇博客代码
05-18
MySkins第二篇博客代码可能详细介绍了如何实现这一功能。 在给定的链接"http://blog.csdn.net/bbirdsky/article/details/26164805"中，作者可能分享了关于MySkins的编程实践，涵盖了以下几个关键知识点： 1. **...
飞机大战网页版HTML5源码
03-20
飞机大战网页版HTML5源码
springboot+springcloud 第9篇
11-04
此文件是springboot跟springcloud的整合，搭建一个eureka的服务注册中心，并有服务提供者跟 ribbon消费者和feign消费者 实现负载均衡代码。...博客原文：https://blog.csdn.net/u013083284/article/details/83688008
博客：我的第一个博客创建
02-16
这是我的第一篇博客文章内容... ``` 除了HTML，你可能还会用到CSS（层叠样式表）来美化你的博客，以及JavaScript来增加交互性。CSS可以控制颜色、布局和字体等视觉元素，而JavaScript可以实现动态效果，如响应式...
Css3——background属性详解
盏茶作酒的博客
09-26 1810
Css3——background属性详解 background：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。 background-color background-image background-repeat background-attachment background-position ...
基于asp.net的工作流程审批系统设计与实现.docx
09-30
基于asp.net的工作流程审批系统设计与实现.docx
这是各种对象检测数据集的预处理相关工具脚本的集合.zip
09-30
这是各种对象检测数据集的预处理相关工具脚本的集合
基于asp.net的驾校理论考试网上模拟系统设计与实现.docx
09-30
基于asp.net的驾校理论考试网上模拟系统设计与实现.docx
基于Python与Shell的阿里巴巴智能运维竞赛排名14设计源码
09-30
该项目为阿里巴巴智能运维竞赛排名14的设计源码，采用Python和Shell两种编程语言，共包含27个文件，包括2个Python脚本、1个PDF文档、1个Markdown文件、1个文本文件、1个CSV文件、1个Shell脚本以及5个特定数据模型文件。该解决方案旨在提升运维效率，适用于大型企业的智能运维场景。
DRF完整项目及uwsgi部署配置
最新发布
09-30
DRF完整项目及uwsgi部署配置
写一篇2000字的Python数据分析博客
05-18
本篇博客将介绍Python数据分析的基本流程和常用工具，以及如何利用Python进行数据分析。 一、Python数据分析的基本流程 Python数据分析的基本流程包括数据收集、数据清洗、数据分析和数据可视化四个环节。 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值