HTML+CSS+JS实现 ❤️新型冠状病毒射击小游戏❤️

快来打我* 2022-09-10 03:15 152阅读 0赞

> ##     效果演示： ##

![20210903212023656.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 部分JS代码 : ###

var stage = {
        w: 1280,
        h: 720
    }
    
    var _pexcanvas = document.getElementById("canvas");
    _pexcanvas.width = stage.w;
    _pexcanvas.height = stage.h;
    var ctx = _pexcanvas.getContext("2d");
    
    
    
    
    var pointer = {
        x: stage.w / 2,
        y: stage.h / 4
    }
    
    var scale = 1;
    var portrait = true;
    var loffset = 0;
    var toffset = 0;
    var mxpos = 0;
    var mypos = 0;
    
    
    // ------------------------------------------------------------------------------- Gamy
    
    var againprog = 0;
    
    var healthprog = 0;
    
    
    function newGame() {
        score = 0;
        health = 100;
        enemies = [];
        enemies.push(new Enemy());
        enemies.push(new Enemy());
        enemies.push(new Enemy());
        againprog = 0;
    }
    
    
    
    function drawHeart(x, y, w) {
        ctx.beginPath();
        ctx.arc(x - w / 4, y, w / 4, 0.75 * Math.PI, 0);
        ctx.arc(x + w / 4, y, w / 4, 1 * Math.PI, 2.25 * Math.PI);
        ctx.lineTo(x, y + w / 1.5);
        ctx.closePath();
        ctx.fill();
    }
    
    
    var Cannon = function(x, y, tx, ty) {
        this.x = x;
        this.y = y;
        this.tx = tx;
        this.ty = ty;
        this.r = 10;
    }
    
    var cannons = [];
    
    var gameover = false;
    
    cannons.push(new Cannon(stage.w, stage.h, stage.w / 2, stage.h / 2));
    
    var firetm = 0;
    var fireact = true;
    
    var health = 100;
    var score = 0;
    
    
    var arm = {
        x: stage.w,
        y: stage.h
    };
    var arm2 = {
        x: 0,
        y: stage.h
    };
    var danger = false;
    var dangera = 0;
    
    
    
    var Enemy = function() {
        this.x = stage.w / 2;
        this.y = stage.h / 2;
        this.r = 10;
        this.tx = Math.floor(Math.random() * stage.w);
        this.ty = Math.floor(Math.random() * stage.h);
        this.des = false;
        this.eyeX = 0.4;
        this.eyeY = 0.25;
        this.eyeR = 0.25;
        this.sp = 50;
        this.spl = 1.4;
        this.op = 1;
        this.danger = false;
        this.nuked = false;
    }

> ## 源码获取 ##
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新**  36  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210903212023656.gif]: /images/20220829/b2d52a1cfb8e40a5841e6fd6c9227d6c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ea1ebcf95f254fe993f2c36f562d6f2d.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/d4e135a1602a496ab3345d0c64772e4a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关 ❤️CyclicBarrier源码解析❤️

文章目录关键属性内部类Generation 构造函数 wait() 阻塞等待定时等待 dowait(

电玩女神/ 2022年09月13日 11:26/ 0 赞/ 412 阅读

相关 ❤️Semaphore 源码解析❤️

文章目录 semaphore 实现 semaphore 原理加锁解锁流程获得许可 tryAcq

谁借莪１个温暖的怀抱￠/ 2022年09月13日 05:21/ 0 赞/ 393 阅读

相关 ❤️StampedLock源码解析❤️

文章目录属性构造函数内部类写锁的获取、释放 1.写锁的获取 2.写锁的释放读锁的获取和释放

灰太狼/ 2022年09月13日 04:30/ 0 赞/ 385 阅读

相关 ❤️ReentrantReadWriteLock源码解析❤️

文章目录源码分析 t1 w.lock，t2 r.lock t1执行 w.lock成功上锁， tryAc

忘是亡心i/ 2022年09月13日 04:28/ 0 赞/ 361 阅读

相关 HTML+CSS+JS实现 ❤️简单的翻纸牌记忆游戏❤️

GIF动图演示![在这里插入图片描述][284e49f108ba436eb97f691f00c8a130.gif_pic_center] 代码目录![在这里插入图片描述

红太狼/ 2022年09月10日 14:28/ 0 赞/ 228 阅读

相关 HTML+CSS+JS实现 ❤️贪吃蛇游戏源码❤️

> 效果演示：文末获取源码 > > ![20210906152444384.gif][] > 代码目录： ![watermark_type_ZHJvaWRz

古城微笑少年丶/ 2022年09月10日 07:23/ 0 赞/ 324 阅读

相关 HTML+CSS+JS实现 ❤️卡通人物吃水果游戏❤️

> 效果演示： > > ![20210906151032164.gif][] > 代码目录： ![watermark_type_ZHJvaWRzYW5z

灰太狼/ 2022年09月10日 07:21/ 0 赞/ 243 阅读

相关 HTML+CSS+JS实现 ❤️新型冠状病毒射击小游戏❤️

> 效果演示： ![20210903212023656.gif][] > 代码目录： ![watermark_type_ZHJvaWRzYW5zZm

快来打我*/ 2022年09月10日 03:15/ 0 赞/ 153 阅读

相关 canvas实现冠状病毒射击游戏

[在线演示][Link 1] ![20210918181427738.gif][] 结构 <canvas id='canvas' width='1280

た入场券/ 2022年08月28日 13:57/ 0 赞/ 313 阅读

相关 ❤️LeetCode打卡2000道(❤️持续更新❤️！ )

<table> <tbody> <tr> <td><strong>LeetCode打卡2000道(持续更新！ )</strong></td> <td>

矫情吗；*/ 2021年12月11日 22:47/ 0 赞/ 455 阅读