HTML小游戏8 —— 小霸王游戏机网页版（附完整源码）

news2025/7/13 16:50:54
  • 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】
  • 🤟 风趣幽默的前端学习课程：👉28个案例趣学前端
  • 💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】
  • 💬 免费且实用的计算机相关知识题库：👉进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 小霸王游戏机网页版

✨ 前言


🕹️ 本文已收录于🎖️100个HTML小游戏专栏：100个H5游戏专栏https://blog.csdn.net/qq_53544522/category_12064846.html
🎮 目前已有100+小游戏，源码在持续更新中，前100位订阅优惠，先到先得。
🐬 订阅专栏后可阅读100个HTML小游戏文章；还可私聊进前端/游戏制作学习交流群；领取一百个小游戏源码。

在线演示地址：https://code.haiyong.site/moyu/xbw/
源码也可在文末进行获取


✨ 项目基本结构


大致目录结构如下（共72个子文件）：

├── lib
│   ├── easeljs-NEXT.min.js 79KB
│   ├── preloadjs-NEXT.min.js 30KB
│   ├── tweenjs-NEXT.min.js 17KB
│   ├── viewporter.js 6KB
│   └── soundjs-NEXT.min.js 33KB
├── jquery.min.js 94KB
├── app.css 956B
├── assets
│   ├── preloader
│   │   ├── preloader_back.jpg 29KB
│   │   ├── play.jpg 8KB
│   │   ...
│   │   └── zibbo_logo.png 105KB
│   └── art_font.json
├── payPanel.js 13KB
├── cave.js 278KB
└── index.html 3KB


场景展示

 

HTML源码

    <div class="main">
        <div class="panel">
            <div class="controller-area">
                <div class="controller">
                    <div id="controls-direction">
                        <div id="controls-rocker"></div>
                        <button role="BUTTON_UP" class="up joydirection" id="joystick_btn_up">up</button>
                        <button role="BUTTON_RIGHT" class="right joydirection" id="joystick_btn_right">right</button>
                        <button role="BUTTON_DOWN" class="down joydirection" id="joystick_btn_down">down</button>
                        <button role="BUTTON_LEFT" class="left joydirection" id="joystick_btn_left">left</button>
                    </div>
                </div>
                <div class="joy">I</div>
                <div><a href="https://haiyong.site/post/acbf47b0.html" target="_blank" class="readme">按键说明</a>
                    
                </div>
            </div>
            <div class="function-area">
                <div class="screen">
                    <div id="emulator" align="center" style="width:100%;height:100%"></div>
                </div>
                <div class="function">
                    <button class="controls-center-select joybtn" id="joystick_btn_select" role="BUTTON_SELECT">Select</button>
                    <button class="controls-center-start joybtn" id="joystick_btn_start" role="BUTTON_START">Pause</button>
                </div>
            </div>
            <div class="action-area">
                <div class="action">
                    <div id="controls-fire">
                        <button class="a joybtn" role="BUTTON_A" id="joystick_btn_A">A</button>
                        <button class="b joybtn" role="BUTTON_B" id="joystick_btn_B">B</button>
                    </div>
                </div>
            </div>
            
            <div class="sign">FAMILY <br> COMPUTER</div>
        </div>
    </div>

CSS 源码

html,body

html,
body {
    margin: 0;
    height: 100%;
    background: #d0e7f9;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

main

.main {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    max-width: 812px;
    border-radius: 10px;
    margin: auto;
    box-shadow: 0 0 0 5px #da4a4a, 0 0 0 20px #474f51;
    background: #da4a4a;
    height: 100%;
    max-height: 414px;
    padding: 10px;
}

panel

.panel {
    position: relative;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #f8f1d7;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    box-shadow: inset 8px 8px #fffef7;
}

area

.function-area {
    flex: 1;
    display: flex;
    padding: 0 20px;
    justify-content: center;
    flex-direction: column;
}

.controller-area {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row;
}

.action-area {
    display: flex;
    flex-direction: row;
}

controller

.controller {
    position: relative;
    width: 140px;
    height: 140px;
    align-self: flex-end;
    filter: drop-shadow(5px 5px 0px rgba(255, 255, 255, .8));
}

JS 源码

js 代码较多，这里提供部分，完整源码可以在文末下载

用于8键模式 将角度转换成方向

Joystick.prototype.transformDirection = function(degree){
    //8个方向平方360度 每个方向45度
    //右上 22.5 - 76.5
    //上   76.5 - 112.5
    //左上 112.5 - 157.5
    //左   157.5 - 202.5
    //左下 202.5 - 247.5
    //右下 247.5 - 292.5
    //右   >292.5 <=22.5
    //右   >337.5 <=22.5
    if(degree > 337.5){
        //右
        return 'right'
    }else if(degree > 292.5){
        //右下
        return 'right_down'
    }else if(degree > 247.5){
        //下
        return 'down'
    }else if(degree > 202.5){
        //左下
        return 'left_down'
    }else if(degree > 157.5){
        //左
        return 'left'
    }else if(degree > 112.5){
        //左上
        return 'left_up'
    }else if(degree > 76.5){
        //上
        return 'up'
    }else if(degree > 22.5){
        //右上
        return 'right_up'
    }else{
        //右
        return 'right'
    }
}

将相关方式信息转换为keyCode，并放入数组中

Joystick.prototype.handleDirection = function(new_direction,old_direction){
    var me = this;
    //old_direction可能为null 但new_direction绝对有值
    //当old_direction时，说明用户刚开始点击，此时需要将相应的keyCode传给btn_down_fn执行
    if(old_direction === null){
        var code_arr = me.getCodeArr(new_direction)
        me.handleCodeArr('down',code_arr) 
    }
    //当old_direction不为null，说明用户正在滑动 如果此时新旧方向不一致，则要更新按键状态
    if(old_direction !== null && new_direction !== old_direction){
        var old_arr = me.getCodeArr(old_direction)
        var new_arr = me.getCodeArr(new_direction)
        //找出已经发生改变的方向 例如 右上 -> 右下 需要将'上'取消掉，同时将'下'按下
        
        //遍历新数组的元素，对比该元素是否存在旧数组中，如果不存在，即可得到 按下的 code_arr
        var down_arr = new_arr.filter( code => {
            return !old_arr.includes(code)
        })
        me.handleCodeArr('down',down_arr) 
        //遍历旧数组的元素，对比该元素是否存在新数组中，如果不存在，即可得到 释放的 code_arr
        var up_arr = old_arr.filter( code => {
            return !new_arr.includes(code)
        })
        me.handleCodeArr('up',up_arr) 
    }
}

将方向信息转换为keyCode后，以数组形式返回

Joystick.prototype.getCodeArr = function(direction){
    var me = this;
    switch(direction){
        case 'up':return [me.keyCodes[0]];break;
        case 'down':return [me.keyCodes[1]];break;
        case 'left':return [me.keyCodes[2]];break;
        case 'right':return [me.keyCodes[3]];break;
        case 'right_up':return [me.keyCodes[3], me.keyCodes[0]];break;
        case 'right_down':return [me.keyCodes[3], me.keyCodes[1]];break;
        case 'left_up':return [me.keyCodes[2], me.keyCodes[0]];break;
        case 'left_down':return [me.keyCodes[2], me.keyCodes[1]];break;
        default:break;
    }
}

nes资源

NES（Nintendo Entertainment System的缩写），是Nintendo在20世纪80年代和20世纪90年代发售的一种家庭主机，俗称红白机，也是此类游戏机在日本以外的地区发行版本的缩写，在日本发行的游戏机型缩写为FC（Family Computer）又写作Famicom。在该游戏平台上比较著名的游戏有《Contra》，《Super Mario》等等。任天堂FC的后续机种是1990年推出的任天堂SFC。nes20世纪80年代末、90年代初进入中国，是80后最早接触的游戏机。

而*.nes/.NES文件格式（后缀名的文件.nes）是NES二进制程序的分配事实上的标准，在使用即使在许可的模拟器，如商业化PocketNES和Wii虚拟主机。它通常被称为iNES格式，因为它是由Marat Fayzullin为名为iNES的模拟器创建的。

几十个.nes文件，全都打包放在文末的下载链接里了。

源码下载


1.CSDN资源下载：https://download.csdn.net/download/qq_44273429/87024945
2.从海拥资源网下载：https://code.haiyong.site/666/
3.也可通过下方卡片添加好友回复小霸王获取

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/8639.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RabbitMQ-04 Hello，World

RabbitMQ-04 Hello，World

首先我们还是先看一下Rabbitmq的工作原理图 从图上我们可以看到&#xff0c;无论是生产者还是消费者我们都需要进行connection并且获取相应的channel&#xff0c;所以为了方便&#xff0c;建议把这部分操作抽取成一个工具类RabbitMqUtils。 工具类RabbitMqUtils public class…
阅读更多...
【C++笔试强训】第二十五天

【C++笔试强训】第二十五天

&#x1f387;C笔试强训 博客主页&#xff1a;一起去看日落吗分享博主的C刷题日常&#xff0c;大家一起学习博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a;夜色难免微凉&#xff0c;前方必有曙光 &#x1f31e;。 &#x1f4a6;&a…
阅读更多...
S7-1200通过MODBUS转PROFINET网关控制英威腾GD200A变频器的具体方法示例

S7-1200通过MODBUS转PROFINET网关控制英威腾GD200A变频器的具体方法示例

S7-1200通过MODBUS转PROFINET网关控制英威腾GD200A变频器的具体方法示例 需要的设备： 西门子S7-1200PLC一台 MODBUS转PROFINET网关一台 英威腾GD200A变频器一台 具体配置方法： 1、 如下图所示，打开博途软件，新建项目并添加网关的gsd文件； 2、 如下图所示，建立profinet连…
阅读更多...
Gradle介绍1-入门和IDEA整合(Gradle Wrapper)

Gradle介绍1-入门和IDEA整合(Gradle Wrapper)

1. Gradle 入门 1.1、Gradle 简介 Gradle 是一款Google 推出的基于 JVM、 通用灵活的项目构建工具&#xff0c; 支持 Maven&#xff0c;JCenter 多种第三方仓库;支持传递性依赖管理、废弃了繁杂的xml 文件&#xff0c;转而使用简洁的、支持多种语言(例如&#xff1a;java、gr…
阅读更多...
前端—微信小程序开发

前端—微信小程序开发

随着微信的普及和微小程序的广泛应用&#xff0c;微信小程序开发越来越多受到人们的关注&#xff0c;正在成为新工科和人工智能背景下当代大学生的必备技能。 适应对象 该课程适合电子信息类专业学生进行学习。 微信小程序开发课程共六章&#xff0c;通过对微信小程序开发的…
阅读更多...
Java继承

Java继承

一、知识点 继承是Java面向对象编程的一块基石&#xff0c;因为它允许创建分等级层次的类。继承可以理解为一个对象从另一个对象获取属性的过程。 如果类A是类B的父类&#xff0c;而类B是类C的父类&#xff0c;我们也称C是A的子类&#xff0c;类C是从类A继承而来的。在Java中&a…
阅读更多...
理解case when then else end 的使用，基础概念，建表语句，用例讲解

理解case when then else end 的使用，基础概念，建表语句，用例讲解

文章目录一、基础概念二、建表语句三、用例讲解参考文档一、基础概念 case &#xff1a;表示需要处理的字段when &#xff1a;表示条件then &#xff1a;表示当when执行为true时&#xff0c;再执行的语句else &#xff1a;表示当所有的when执行为false时&#xff0c;再执行的语…
阅读更多...
Go分布式缓存 一致性哈希(hash)(day4)

Go分布式缓存 一致性哈希(hash)(day4)

Go分布式缓存 一致性哈希(hash)(day4) 1 为什么使用一致性哈希 今天我们要实现的是一致性哈希算法&#xff0c;一致性哈希算法是 GeeCache 从单节点走向分布式节点的一个重要的环节。那你可能要问了&#xff0c; 童鞋&#xff0c;一致性哈希算法是啥&#xff1f;为什么要使用…
阅读更多...
基于几何约束的传动机构设计

基于几何约束的传动机构设计

本文介绍如何使用参数化 CAD 软件中几何约束的强大功能来加速机构的开发。 许多 CAD 程序提供了用于分析和改进机制的工具。但是&#xff0c;这些假设你已经有了初始设计。合成机构的经典图形方法提供了确定连杆长度和关节位置以产生特定运动的方法。 这些方法可以使用参数化…
阅读更多...
工作这么久了，还不懂多线程吗？

工作这么久了，还不懂多线程吗？

浩哥Java多线程整理学习系列之01 基础知识整理 浩哥Java多线程整理学习系列之01基础知识整理1. 如何查看电脑核数及线程数Linux查询CPU核心数2. 线程和进程、协程之间的区别3. 时间片轮转&#xff08;RR&#xff09;调度算法4. 并行和并发的区别5. 系统限制线程数6. 并发的优缺…
阅读更多...
[go学习笔记.第十四章.协程和管道] 1.协程的引入,调度模型以及运行cpu数目，协程资源竞争问题

[go学习笔记.第十四章.协程和管道] 1.协程的引入,调度模型以及运行cpu数目，协程资源竞争问题

1.先看一个需求 需求&#xff1a; 要求统计 1~9000000000 的数字中&#xff0c;哪些是素数&#xff1f; 分析思路&#xff1a; (1).传统的方法&#xff0c;就是使用一个循环&#xff0c;循环的判断各个数是不是素数.(很慢) (2).使用并发或者并行的方式&#xff0c;将统计素数的…
阅读更多...
CEX暴雷怎么办 一文读懂加密钱包产业现状

CEX暴雷怎么办 一文读懂加密钱包产业现状

你的钱其实并不在你的借记卡里&#xff0c;借记卡只是授权你的银行帐户向银行系统数据库发送交易。同样&#xff0c;你的代币也并不在你的加密钱包里。加密钱包只是持有私有密钥以证明对数字资产的所有权&#xff0c;而这些资产是存储在公共区块链网络上的。私钥能让你对加密钱…
阅读更多...
详细介绍BERT模型

详细介绍BERT模型

文章目录BERT简介BERT, OpenAI GPT, 和ELMo之间的区别相关工作BERT的改进BERT 的详细实现输入/输出表示预训练BERT微调BERTBERT用在下游任务GLUE(一个自然语言任务集合)SQuAD v1.1(QA数据集)SQuAD v2.0SWAG消融实验预训练任务的影响模型大小的影响基于特征的BERT方法结论BERT简…
阅读更多...
js对象和原型、原型链的关系

js对象和原型、原型链的关系

JS的原型、原型链一直是比较难理解的内容&#xff0c;不少初学者甚至有一定经验的老鸟都不一定能完全说清楚&#xff0c;更多的"很可能"是一知半解&#xff0c;而这部分内容又是JS的核心内容&#xff0c;想要技术进阶的话肯定不能对这个概念一知半解&#xff0c;碰到…
阅读更多...
[附源码]计算机毕业设计JAVA大学生足球预约信息

[附源码]计算机毕业设计JAVA大学生足球预约信息

[附源码]计算机毕业设计JAVA大学生足球预约信息 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM myba…
阅读更多...
【JavaWeb】HTML学习完整篇

【JavaWeb】HTML学习完整篇

推荐学习专栏&#xff1a;JavaWeb学习专栏 目录1、HTML 语法规范&#xff08;1&#xff09;基本语法概述&#xff08;2&#xff09;标签关系2、HTML 基本结构标签3、 网页开发工具&#xff08;1&#xff09;使用方法&#xff08;2&#xff09;VSCode 工具生成骨架标签新增代码&…
阅读更多...
Java项目——物业管理系统（附源码+数据库）

Java项目——物业管理系统（附源码+数据库）

今天给小伙伴们分享一个Java项目——物业管理系统&#xff08;附源码数据库&#xff09; 感兴趣的小伙伴可以点击下方链接和小编一起学习哟~ https://www.bilibili.com/video/BV1cD4y1s73E/?spm_id_from333.999.0.0&vd_sourcea7816e3b2a3a67ac39dc87f6bf92421chttps://w…
阅读更多...
下载和安装vscode教程和配置中文插件（超详细）

下载和安装vscode教程和配置中文插件（超详细）

前言&#xff1a; vscode主要是用于前端的编程工具&#xff0c;其他编程的语言也可以在vscode里面编程运行。 优点&#xff1a;简洁、占用内存小、界面美观 一、下载步骤 1.到官网根据自己的操作系统进行下载&#xff08;这是超链接&#xff09;&#xff0c;直接点击下载。…
阅读更多...
数据库导入现有的mysql文件和_列的别名_和_去重

数据库导入现有的mysql文件和_列的别名_和_去重

一、数据导入指令&#xff1a;source 类的全路径 在命令行客户端登录mysql&#xff0c;使用 source 指令导入 mysql> source d:\mysqldb.sql二、列的别名 重命名一个列便于计算紧跟列名&#xff0c;也可以在列名和别名之间加入关键字AS&#xff0c;别名使用双引号&#x…
阅读更多...
3款windows实用软件，免费又良心，真正懂你的需求

3款windows实用软件，免费又良心，真正懂你的需求

闲话少说&#xff0c;干货奉上。 1、RevoUninstaller 一不小心安装了流氓捆绑软件&#xff0c;某安全卫士那它并没有办法&#xff0c;RevoUninstaller这款小白也能使用的卸载工具&#xff0c;支持免费使用&#xff0c;让流氓软件无所遁形。它有一个非常强大的猎人模式功能&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023