文章
文章用户商城文档资讯沸点导航
!
也想出现在这里？ 联系我们吧
广告区块

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

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

本节教程我会带大家使用 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个子文件）：

  1. ├── lib
  2. │   ├── easeljs-NEXT.min.js 79KB
  3. │   ├── preloadjs-NEXT.min.js 30KB
  4. │   ├── tweenjs-NEXT.min.js 17KB
  5. │   ├── viewporter.js 6KB
  6. │   └── soundjs-NEXT.min.js 33KB
  7. ├── jquery.min.js 94KB
  8. ├── app.css 956B
  9. ├── assets
  10. │   ├── preloader
  11. │   │   ├── preloader_back.jpg 29KB
  12. │   │   ├── play.jpg 8KB
  13. │   │   ...
  14. │   │   └── zibbo_logo.png 105KB
  15. │   └── art_font.json
  16. ├── payPanel.js 13KB
  17. ├── cave.js 278KB
  18. └── index.html 3KB


场景展示

HTML源码

  1.     div class="main">
  2.         div class="panel">
  3.             div class="controller-area">
  4.                 div class="controller">
  5.                     div id="controls-direction">
  6.                         div id="controls-rocker">div>
  7.                         button role="BUTTON_UP" class="up joydirection" id="joystick_btn_up">upbutton>
  8.                         button role="BUTTON_RIGHT" class="right joydirection" id="joystick_btn_right">rightbutton>
  9.                         button role="BUTTON_DOWN" class="down joydirection" id="joystick_btn_down">downbutton>
  10.                         button role="BUTTON_LEFT" class="left joydirection" id="joystick_btn_left">leftbutton>
  11.                     div>
  12.                 div>
  13.                 div class="joy">Idiv>
  14.                 div>a href="https://haiyong.site/post/acbf47b0.html" target="_blank" class="readme">按键说明a>
  15.                     
  16.                 div>
  17.             div>
  18.             div class="function-area">
  19.                 div class="screen">
  20.                     div id="emulator" align="center" style="width:100%;height:100%">div>
  21.                 div>
  22.                 div class="function">
  23.                     button class="controls-center-select joybtn" id="joystick_btn_select" role="BUTTON_SELECT">Selectbutton>
  24.                     button class="controls-center-start joybtn" id="joystick_btn_start" role="BUTTON_START">Pausebutton>
  25.                 div>
  26.             div>
  27.             div class="action-area">
  28.                 div class="action">
  29.                     div id="controls-fire">
  30.                         button class="a joybtn" role="BUTTON_A" id="joystick_btn_A">Abutton>
  31.                         button class="b joybtn" role="BUTTON_B" id="joystick_btn_B">Bbutton>
  32.                     div>
  33.                 div>
  34.             div>
  35.             
  36.             div class="sign">FAMILY br> COMPUTERdiv>
  37.         div>
  38.     div>

CSS 源码

html,body

  1. html,
  2. body {
  3.     margin: 0;
  4.     height: 100%;
  5.     background: #d0e7f9;
  6.     -webkit-touch-callout: none;
  7.     -webkit-user-select: none;
  8.     -khtml-user-select: none;
  9.     -moz-user-select: none;
  10.     -ms-user-select: none;
  11.     user-select: none;
  12. }

main

  1. .main {
  2.     position: absolute;
  3.     left: 0;
  4.     top: 0;
  5.     right: 0;
  6.     bottom: 0;
  7.     box-sizing: border-box;
  8.     max-width: 812px;
  9.     border-radius: 10px;
  10.     margin: auto;
  11.     box-shadow: 0 0 0 5px #da4a4a, 0 0 0 20px #474f51;
  12.     background: #da4a4a;
  13.     height: 100%;
  14.     max-height: 414px;
  15.     padding: 10px;
  16. }

panel

  1. .panel {
  2.     position: relative;
  3.     height: 100%;
  4.     padding: 20px;
  5.     box-sizing: border-box;
  6.     background: #f8f1d7;
  7.     border-radius: 15px;
  8.     display: flex;
  9.     flex-direction: row;
  10.     box-shadow: inset 8px 8px #fffef7;
  11. }

area

  1. .function-area {
  2.     flex: 1;
  3.     display: flex;
  4.     padding: 0 20px;
  5.     justify-content: center;
  6.     flex-direction: column;
  7. }
  8.  
  9. .controller-area {
  10.     position: relative;
  11.     z-index: 10;
  12.     display: flex;
  13.     flex-direction: row;
  14. }
  15.  
  16. .action-area {
  17.     display: flex;
  18.     flex-direction: row;
  19. }

controller

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

JS 源码

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

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

  1. Joystick.prototype.transformDirection = function(degree){
  2.     //8个方向平方360度 每个方向45度
  3.     //右上 22.5 - 76.5
  4.     //上   76.5 - 112.5
  5.     //左上 112.5 - 157.5
  6.     //左   157.5 - 202.5
  7.     //左下 202.5 - 247.5
  8.     //右下 247.5 - 292.5
  9.     //右   >292.5 
  10.     //右   >337.5 
  11.     if(degree > 337.5){
  12.         //右
  13.         return 'right'
  14.     }else if(degree > 292.5){
  15.         //右下
  16.         return 'right_down'
  17.     }else if(degree > 247.5){
  18.         //下
  19.         return 'down'
  20.     }else if(degree > 202.5){
  21.         //左下
  22.         return 'left_down'
  23.     }else if(degree > 157.5){
  24.         //左
  25.         return 'left'
  26.     }else if(degree > 112.5){
  27.         //左上
  28.         return 'left_up'
  29.     }else if(degree > 76.5){
  30.         //上
  31.         return 'up'
  32.     }else if(degree > 22.5){
  33.         //右上
  34.         return 'right_up'
  35.     }else{
  36.         //右
  37.         return 'right'
  38.     }
  39. }

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

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

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

  1. Joystick.prototype.getCodeArr = function(direction){
  2.     var me = this;
  3.     switch(direction){
  4.         case 'up':return [me.keyCodes[0]];break;
  5.         case 'down':return [me.keyCodes[1]];break;
  6.         case 'left':return [me.keyCodes[2]];break;
  7.         case 'right':return [me.keyCodes[3]];break;
  8.         case 'right_up':return [me.keyCodes[3], me.keyCodes[0]];break;
  9.         case 'right_down':return [me.keyCodes[3], me.keyCodes[1]];break;
  10.         case 'left_up':return [me.keyCodes[2], me.keyCodes[0]];break;
  11.         case 'left_down':return [me.keyCodes[2], me.keyCodes[1]];break;
  12.         default:break;
  13.     }
  14. }

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.也可通过下方卡片添加好友回复小霸王获取

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53544522/article/details/127873816
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部