11款学习编程好玩的浏览器游戏

玩视频游戏经常涉及用逻辑推理和不断的试错来解决复杂问题。你还能想到别的什么会要求有这样的技能吗?没错,就是编程。 这篇文章为你准备了11款浏览器游戏,非常适合web开发者和编程人员。你可以通过它们学习到Java,CSS和HTML,或者也可以作为一场你web技能的测试。其中一些游戏很简单,另外一些非常难,但是它们都很好玩。

Code Combat

 

网址:http://codecombat.com/

虽然Code Combat是为学校里的学生而制作的,但是这款游戏还是受到很多成年人的喜爱。通过编程来控制一个勇敢的英雄通过成百的地牢,与敌人战斗并收集宝石。完成整个游戏大概需要20+小时,并能覆盖绝大多数的编程概念。

Hex Invaders

 

网址:http://www.hexinvaders.com/

这款经典的娱乐游戏是这个世界别三个颜色的外星人入侵,每一个代表不同的颜色。为了拯救人类,玩家必须快速的把RGB的十六进制值翻译成人类的可以识别的颜色,并射击入侵者。

Flexbox Froggy

 

网址:http://flexboxfroggy.com/

这个益智游戏需要你帮助各种颜色的青蛙得到它们睡莲的机会。用Flexbox模式来移动这种两栖动物,并能真正测试你的布局构建能力。在游戏中的弱提示帮助在不同的情况下使用不同的CSS属性,但这完全取决于游戏者来操控。

Pixactly

 

网址:http://pixact.ly/

Pixactly坚持一个简单但是非常有挑战的理念。这个游戏给你两个随机的像素值,一个长方形代表宽度,另一个代表高度。玩家需要尽可能的绘制给定尺寸的盒子。

CSS Diner

 

网址:http://flukeout.github.io/

很棒的一个学习CSS选择器的游戏。玩家需要在一个有盘子的桌子上,选定某个或某些元素。不同的级别可以满足相应web开发者的水平,像基本的 ~ 和:first-child

Screeps

 

网址:https://screeps.com/

你可以想象这个游戏是一个数字化的蚂蚁农场,里面所有的“蚂蚁”都是被玩家的编程控制的。在建立了基地和你设定的爬行程序之后,它们就开始了各自的探索这个无止境的游戏世界,收集资源并和敌人战斗,甚至可以离线操作。

CodinGame

 

网址:https://www.codingame.com/

一个大的游戏集,可以用各种语言来玩,包括:Java,PHP,Ruby,Go,Python,还有其他的编程语言。这个平台包括大量的谜题,支持多个玩家和智能游戏,同时代码支持高级编辑器像Emacs和Vim.

Flexbox Defense

 

网址:http://www.flexboxdefense.com/

经典的塔防游戏用CSS的旋转来玩-所有的塔楼和通道是用flexbox的布局来实现。有12级的敌人来到达底部。想要完成这个游戏,需要你知道完全的flexbox的属性。

Elevator Saga

 

网址:http://play.elevatorsaga.com/

Elevator Saga是一个益智游戏,用Java来控制建筑里的电梯。很多人一直的上上下下,你需要尽可能快的让他们到达他们的目的地。这个游戏测试你的算法书写能力,同时也测试JS的函数,数组和事件处理。

Untrusted

 

网址:https://alexnisnevich.github.io/untrusted/

Untrusted是一个meta-Java冒险游戏,你扮演Dr. Eval, @ 通过改变源码来控制周围的世界。玩家用初始化的函数和使用游戏的API来让Dr. Eval逃离。

Bonus: Dungeons & Developers

 

网址:http://www.dungeonsanddevelopers.com/

一个具有CSS,HTML,Java魔法的智慧树。增加你的技能在上面,看看你和真正的web开发者有多接近。可以通过自己的冒险来生成自己的智慧树简历。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5/CSS 餐厅选择器 第一关 plate plate元素 第二关 bento bento元素 第三关 #fancy id为fancy的元素 第四关 plate apple plate祖先元素下的apple后代元素 第五关 #fancy pickle id为#fancy的祖先元素下的pickle后代元素 第六关 .small 组为small的元素 第七关 orange.small 组为small的orange元素 第八关 bento>orange.small bento父元素下的组为small的orange子元素 第九关 plate,bento,div plate,bento兄弟元素在div元素中 第十关 * *代表所有元素 第十一关 plate>* plate父元素的所有子元素 第十二关 plate + apple 兄弟元素选择器,plate元素的后一个元素 第十三关 bento~pickle 兄弟元素选择器,bento元素后的多个pickle元素 第十四关 plate>apple plate父元素下的apple子元素 第十五关 plate orange:first-child 子元素选择器,plate元素下的第一个orange元素 第十六关 plate :only-child 所有plate元素下的元素 第十七关 #fancy :last-child,pickle:last-child id为fancy的元素的最后一个和pickle元素的最后一个 第十八关 div plate:nth-child(3) div元素中的第三个plate元素 第十九关 div bento :nth-last-child(4) div元素中倒数第四个bento元素 第二十关 apple:first-of-type 第一个apple元素 第二十一关 plate:nth-of-type(even) 所有偶数个的plate元素 第二十二关 plate:only-of-type(6n+3),plate:only-of-type(6n+5) plate元素下的第3个和第5个元素 第二十三关 plate apple.small:only-of-type plate元素下满足apple.small元素的唯一一个元素 第二十四关 orange.small:last-of-type,apple.small:last-of-type 是orange.samll和apple.small元素的最后一个元素 第二十五关 bento:empty bento元素里没有包括额外元素 第二十六关 apple:not(.small) apple里没有组是.small的元素

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值