3个web小游戏制作只需基础三剑客—html+css+js

新人们找个好玩的来练练手如何?虽然不是专职搞web的做过几个代码简陋,只有几十行然而做出来的感觉甚是开心,也希望各位新入门的开发者可以拿去做个小游戏玩玩看。

三个游戏:翻转拼图,2048网页版,视力大作战。

一:翻转拼图

其中翻转拼图个人认为是最好玩的一个以前做过详细的逻辑和代码分析,链接在下可以学习一下。代码在试玩网页可以查看 http://luyishisi.github.io/game1/

翻转拼图网页小游戏制作

在准备写这个之前至少要有html,css和JavaScript的知识,如果会jQuery最好。

首先贴上一开始想的开发规划:

逐步实现:

  • 1:点击按钮实现变色,
  • 2:点击按钮实现旁边按钮的变色
  • 3:实现变色的重复性,
  • 4:设置边界,
  • 5:设置成功条件。

试玩页面如下:

http://luyishisi.github.io/game1/

所以,一开始是先画一个按钮,加入JavaScript函数,触发点击事件修改按钮的背景颜色。再次点击则再次修改。当实现这两个的时候,时间已经过去一个多小时,在午饭前一直郁闷于如何让旁边的按钮也变色。一开始的思路是每一个按钮设置id,分别处理,可以想象这是一个很糟糕的思路,于是开始考虑别的方案。开始吃午饭了,一路上我就如何把按钮旁边的颜色变化这个问题,求教大师兄。他提供的解决方案,是运用jQuery的遍历,刚好昨天学了jQuery,这个思路是不错的。后来超哥也提供一个思路,就是用二维数组表示数值,点击按钮修改数租参数,再调用一个函数,刷新所有按钮的值。好就决定是他了,(最终成品版用了avalon.min.js ),上吧,皮卡丘

二:2048网页版

2048这个游戏很知名,手机端网页版pc端都有,今天我们可以稍微自己做一个简易版的玩一下。

编写思路:

  1. 16个按钮构成界面
  2. 通过js修改value值
  3. js捕捉键盘事件抓住方向键触发
  4. 触发事件修改按钮的value值
  5. 写运行算法,根据按钮value对应的数值得出新值
  6. 修改与测试

运行界面:

请不要嘲讽我难看的设计,,希望有妹子可以修正给个美丽的色调。

试玩地址:

http://luyishisi.github.io/game2048/

js代码就不贴了有试玩地址f12你们懂得:

三:视力大作战

前段时间看空间流行一个小游戏,类似与一个表格每点击一次所有的颜色都会变化,找出其中某一个与别的颜色不同的,感觉思路比较清晰就顺手写一个玩一玩.

试玩网址:https://www.urlteam.org/shiligame.html  有地址f12就可以看源码,我不多解析了。

上面的试玩网址有点坏了。。用这个 http://luyishisi.github.io/game_shili/

好吧,我承认这份代码比较low.没有用什么框架,也没有什么很好拓展性,不像是之前用avalon做的那个:

这个代码主要还是想拿来复习一下,,楞是写了两节课,如果换在去年,估计半个小时就基本搞定了..唉.代码还是得经常练,不然又得重新学..

代码的整体思路是:

用div划分出16个块.css处理一下样式,在js中,捕捉每一次点击事件,每次产生一个4096以内的随机数,处理成色彩编码,然后把每一个div的背景色进行修改,然后再产生一个随机数,对16去余数,转换为id编号,将其色彩编码做一个随机小范围的增减,然后刷新背景色..

已经发现的bug有:

1:产生的随机数如果是0则因为没有bu0这个id会导致游戏无法进行,已经修复,出现0则++;

2:产生的随机数如果与上次的相等会导致色彩刷新失败,已经修复,与name_temp比对,相同则++;

3:手机上显示不是很切合,还未解决..

4:不同浏览器可能看到的排版效果不同,未测试.

运行截图:

原创文章,转载请注明: 转载自URl-team

本文链接地址: 3个web小游戏制作只需基础三剑客—html+css+js

No related posts.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的小碗汤

详解docker镜像&容器,小白都能看懂

这篇文章希望能够帮助读者深入理解Docker的命令,还有容器(container)和镜像(image)之间的区别,并深入探讨容器和运行中的容器之间的区别。

7130
来自专栏Nodejs技术栈

Node.js v13.1.0 发布

Node.js v13.1.0(Current)于 2019-11-06 发布,以下为一些显著的的变化。

16310
来自专栏前端之旅

译文排版规范

前言: 这是之前还在论坛当版主的时候,给自己定下的汉化规矩: 1.按照固定格式来排版; 2.能力有限不是机翻和偷工减料的借口; 3.尽量得到原作者的转载授权 虽...

6210
来自专栏Jerry的SAP技术分享

SAP开源的持续集成-持续交付的解决方案

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

5810
来自专栏Don的成长史

C# 加减乘除计算器

前段时间微软在全球最大的同性交友网站GitHub上开源了微软计算器的C++代码:https://github.com/Microsoft/calculator。...

14110
来自专栏服务端思维

一文概览 BAT 开源的研发神器

Arthas 是阿里巴巴 2018 年 9 月开源的一款 Java 线上诊断工具。

10760
来自专栏玩转JavaEE

别用 Dockerfile 部署 Spring Boot 啦!松哥教你两步搞定!

之前松哥和大家分享过一篇将 Spring Boot 项目部署到远程 Docker 上的文章:

6110
来自专栏前端之旅

「译」提升 Web 开发效率的 VS Code 扩展

在我们开始之前,先看看你能否回答这个问题:Visual studio Code 和 Visual Studio 的区别是什么?

5920
来自专栏刷题笔记

服务器折腾日记01【OJ搭建】

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

18430
来自专栏前端之旅

折腾博客系列之发布自己的主题:PureBlue

博客内容固然是最重要的,但是抛开内容不讲,博客本身也应该带有自己的Tag,而不是光会用别人的轮子。

8220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励