Skip to content

Snowhere/game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GAME

前端技术做的一些简单的小游戏

刚开始是纯页面,后来有的要用到 socket 和后端通讯,所以改成 node 工程了,大部分工程可以将页面和资源文件放在一起,修改一下路径,用浏览器打开直接就能玩。本人是后端工程师,对前端掌握的不是很好,各位前端大牛看看就行了勿喷。我仅仅是对代码的兴趣加上娱乐的灵感,所以做了一点东西。后续可能一直会增加一些小游戏,让我保持这份对代码最纯粹的兴趣和激情,勿忘初心。keep coding ... stay cool ...

运行

  • 在线可以访问 http://game.snowhere.me/ 进行游戏。
  • 本地运行需要安装 nodejs,下载代码,运行 app.js 文件,工程目录下执行 node app.js 代码默认开启端口 3001,浏览器访问 http://localhost:3001/ 。因为纯前端代码的游戏可以将主页面和资源文件放在同一文件夹下,双击 html 文件便可玩,而其他游戏需要手机端访问或多玩家参与,所以本地运行 node 工程没有什么意义。

代码结构

  • /page/{游戏名字}.html 主页面
  • /public/{游戏名字}/ 资源文件
  • /lib/{游戏名字}/ 后台逻辑
  • /node_modules node 第三方代码

目前的游戏

  1. zzu
  • 代码说明:纯前端代码,电脑访问。
  • 游戏说明:复刻郑州大学成绩查询页面,提供输入功能生成成绩页面,自动计算学分绩点,可保存多学期并跳转查看。
  • 灵感来源:大一挂过科,大三我妈要看我成绩单页面,问我学的计算机,会不会自己改成绩骗她,我想要是能改成绩我就是大神了。不过转念一想,改改页面元素还是能唬住别人的,但程序猿精神让我觉得要做点东西让不懂技术的同学也能轻松体验其中乐趣。技术白痴的我开始抱着 jquery 的 api 文档啃了一周,做了这个东西,两年后用 angularJS 重构并用 cookies 保存信息,使之完美。让我明白兴趣是学习的最大动力,开启了程序猿之路。
  • 目前问题:因为时间悠久,可能官方页面有变化,并没有继续同步页面样式。
  1. chat
  • 代码说明:前后端代码,响应式布局,主要显示效果在电脑,手机做了适配。
  • 游戏说明:一个别具一格(丧心病狂)的聊天室(留言板),可能有种弹幕文化的味道?
  • 灵感来源:实习过程时培训 ajax 基础知识,写了不少前端代码的我无心听讲,灵感突现想做个显示效果别具一格的信息展示小程序,用简单的 ajax 轮询和 Java 后台在局域网上线,在同学的反馈娱乐中快速迭代,后来后台改用 PHP 放到公网的虚拟主机上(当时租的虚拟主机只支持 PHP),再后来了解了 socket,解决了我当时对网络实时通信的困惑(当时只知道客户端 ajax 向服务端请求,不知道服务端如何主动推送信息到客户端),让我对网络通信和前后端数据交互有了更深的理解,便用 nodejs 重构。从那时,我明白不饱和的工作制和轻松的环境可以激发无限的创造力。
  1. 1010
  • 代码说明:纯前端代码,响应式布局,手机和电脑都可以玩。
  • 游戏说明:类似于俄罗斯方块的游戏,通过拖动各种形状的方块放入棋盘,通过消除行或列得分。代码可配置初始棋盘大小和底部方块数量。
  • 灵感来源:最早是在朋友的手机 APP 上玩到的,和朋友商量用前端技术做一个。
  1. kaer
  • 代码说明:纯前端代码,响应式布局,手机和电脑都可以玩。
  • 游戏说明:模拟 DOTA2 卡尔技能释放。
  • 灵感来源:有段时间玩 DOTA2 里的卡尔比较多,闲的没事的时候左手放在键盘上总想敲敲打打,突然发现放在键盘旁的手机(iphone 5s)屏幕大小正好和 DOTA2 的技能按键区域一样,所以想做一个在手机屏幕上复刻键盘技能按键(大小尺寸相同),可以释放技能的小游戏。
  • 目前问题:似乎有按键显示大小和现实不一样的问题
  1. swing
  • 代码说明:纯前端代码,响应式布局,只有手机可玩,因为用到了重力感应。
  • 游戏说明:通过甩手机获得初速度,然后匀减速运动并躲避障碍物的游戏。
  • 灵感来源:很久之前看到过检测手机上抛高度计算分值的游戏,突然也想做个丧心病狂的小游戏。界面类似雷电,通过甩手机的力度决定角色的初速度,随后匀减速运动直至静止,运动过程中还要左右倾斜手机来躲避障碍物。初速度越大当然运动时间就越长,得分就越高,但越大的初速度往往导致刚开始就来不及反应撞上障碍物。这是力量(甩手机获得较大初速度)与技巧(在高速运动中躲避障碍物)共存的挑战,设计上堪称完美。角色和障碍物本来想用图片,后来简单用了个色块发现别有一番风格。其实我最想看到的是玩家手机甩飞的一刻,哈哈哈哈。
  1. square
  • 代码说明:前后端代码,响应式布局,只有电脑可玩,因为界面元素多,尺寸布局大。
  • 游戏说明:复刻桌游角斗士方块
  • 灵感来源:我平时比较喜欢和朋友玩桌游,最喜欢的桌游之一便是角斗士方块。做第一个 1010 小游戏的原因就是因为和这个游戏的元素差不多。
  • 目前问题:还没做完