广西地区的游戏推荐可能比较偏地域化，我为你推荐一款适合网页设计学习过程中轻松娱乐的游戏，那就是HTML5游戏制作平台——"CodePen"。CodePen 是一个在线的前端开发环境，你可以在这里编写HTML、CSS和JavaScript代码，制作简单的网页小应用或者游戏，这对于学习网页设计和前端开发非常有帮助。

你可以尝试制作一些基础的动画效果、交互式网页或者简单的游戏，比如猜数字游戏、弹跳球游戏等。通过实践，你可以更好地理解和掌握代码的运用。此外，还有一些在线的HTML5游戏开发平台，如 Phaser, Construct, GameMaker等，你也可以去尝试。

对于更专业的网页设计，可以试试像"Bootcamp"这样的在线课程，它提供了从基础到高级的网页设计和前端开发课程，包括HTML、CSS、JavaScript、响应式设计等。

希望对你有所帮助！

11 个提升网页设计和前端开发技能的趣味游戏，附源码地址

前端开发过程中，会接触到各种类型的编码，了解 Hex（十六进制）编码是前端开发者需要掌握的知识之一。Hex Invaders 这款游戏则通过互动的方式，帮助你直观的掌握 Hex 编码。你需要根据页面上方出现的 Hex 编码，选择正确的颜色来完成游戏。随着难度的增加，关卡敌人会越来越多，挑战也变得更加烧脑哦。

广西网页设计代码游戏推荐

准备好训练你的色彩辨识和感知技巧了吗？那么，快来试试在线交互游戏 Color 吧。在这款游戏中，你需要快速完成常见的配色测试，例如色调、饱和度、互补色、三色、四色等模式测试。分值越能达到「Perfect」三国单机游戏3d带兵打仗，你的颜色感知能力也就越出众哦。

对于设计师来说，提升西文字体造型能力，能帮助你更深刻的理解字体设计与排版。Shape Type 这款游戏基于钢笔工具，你需要拖动滑竿使字体边缘达到平滑与饱满的状态。在练习的过程中，你可以了解字体的起源，例如字体类型、字体设计师与年代等信息，还能够通过绘制比较加深对字体笔画、结构的认知。

玩游戏也能学编程：玩会这 15 款编程游戏，就算是入门了！

Human Resource Machine 是一款非常有意思的移动端游戏。这款游戏由粘粘世界（World of Goo）的设计者和制作小小炼狱（Little Inferno）的团队共同制作，游戏虽是走解谜路线，但玩法相当新颖：玩家将扮演一个从基层做起的员工，需要通过指令代码来编写一条条程序，完成每个阶段的任务，最终走上职场巅峰。

程序员最爱的8款代码游戏 边玩游戏边撸代码

CodeCombat (代码战斗) 是款有趣开源的编程游戏!它使用代码来操控游戏人物，让你一边沉浸在游戏乐趣中一边学习编程技术(Javascript / Python等)。从最初小白入门级的单人关卡到后来高难度的多人对战，各种技术层次的人都可以乐在其中并从实战中不断吸取编程知识。

通过这款游戏，你将进入代码机器人世界。它属于全球首个Javascript 程序员在线编程对战游戏，采用MongoDB、NodeJS、CSS3、Javascript、HTML5等全新的Web技术来构建。随时互联网的飞速发展，Robocode 已经开始变得落后。所以，现在有了 Javascript 语言的基于互联网的在线编程对战游戏——CodeTank 代码坦克!

寓教于乐！11 个提升网页设计和前端开发技能的趣味游戏

还再利用枯燥的文档学习网格布局吗？不如尝试下 Grid Garden 在线游戏。在这款游戏中，你需要利用网格布局的相应属性，完成胡萝卜浇水的任务。游戏共 28 个关卡，你可以掌握网格布局属性的全部用法，帮助你入门网格布局。

如果你想提升 Flexbox 技能熟练度，可以尝试 Flexbox Defense 这款游戏。这是一款经典的塔防游戏，你必须使用 CSS 定位塔楼的位置，并抵御敌人的进攻。如果你通关了 Flexbox Froggy，再尝试下这款游戏，你的 Flex 布局技能势必能更上一层楼。

前端开发过程中，会接触到各种类型的编码，了解 Hex（十六进制）编码是前端开发者需要掌握的知识之一。Hex Invaders 这款游戏则通过互动的方式，帮助你直观的掌握 Hex 编码。你需要根据页面上方出现的 Hex 编码，选择正确的颜色来完成游戏。随着难度的增加，关卡敌人会越来越多，挑战也变得更加烧脑哦。

5款代码游戏，都是程序员的爱 YYDS

忙完了一天的工作后，程序员都想休息一下。休息的时候，玩游戏是最好的放松方式。如果有这么一款游戏，能在放松的同时巩固学到的代码、学到新代码，就再好不过了。本文精选5款热门游戏，这次好了赶紧边玩游戏边撸码吧！

HTML5代码做的中国象棋游戏，这个程序无人能敌

最近上班无聊时有事没事喜欢下几把象棋，当然前提是我项目都做得很好了，空闲时间才娱乐下，大家不要学我哟，玩了几把才知道，自己有好多年没练过了，游戏中的高手还是挺多的，毕竟这年代，还能在网上安静的下象棋的也只有老粉丝了，今天这个中国象棋的案例，大家可以自己练习下。

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时，任何类型的游戏都需要Flash。但随着 HTML5 发展，HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏，它们可以在所有现代浏览器中运行，并且只使用web技术构建。

exports.onTimeUpdate = function( time, mode, isx, iex, t1sx, t1ex, t2sx, t2ex ){

object: this, onTimeUpdate: this.onTimeUpdate, onTimeStart: this.onTimeStart, onTimeEnd: this.onTimeEnd,

start: start, duration: animLength, data: [ "hide", imageEx, imageSx, text1Ex, text1Sx, text2Ex, text2Sx ],

object: this, onTimeUpdate: this.onTimeUpdate, onTimeStart: this.onTimeStart, onTimeEnd: this.onTimeEnd,

start: start, duration: animLength, data: [ "show", imageSx, imageEx, text1Sx, text1Ex, text2Sx, text2Ex ],

text2 = layer.createText( "default", "BEST 999", text2Sx, 48, "#af7c05", "14px" ).hide();

image = layer.createImage( "default", "images/score.png", imageSx, 8, 29, 31 ).hide();

exports.onShowing = function( time, sx, ex, sy, ey, sw, ew, sh, eh ){

object: this, onTimeUpdate: this.onShowing, onTimeStart: this.onShowStart, onTimeEnd: this.onShowEnd,

image = layer.createImage( "default", "images/new.png", sx, sy, sw, sh );

var sx = 129, sy = 328, ex = 170, ey = 221, sw = 0, sh = 0, ew = 70, eh = 42, dy = 8;

object: this, onTimeUpdate: this.onScaling, onTimeEnd: this.onHideEnd

object: this, onTimeUpdate: this.onScaling, onTimeEnd: this.onShowEnd

exports.onTimeUpdate = function( time, mode, x1s, x1e, x2s, x2e, x3s, x3e ){

object: image, onTimeUpdate: image.myOnScaling, onTimeEnd: image.myOnScaleEnd,

image.myOnScaling = image.myOnScaling || function( time, z ){

object: this, onTimeUpdate: this.onTimeUpdate, onTimeStart: this.onTimeStart, onTimeEnd: this.onTimeEnd,

start: start, duration: animLength, data: [ "hide", conf1.ex, conf1.sx, conf2.ex, conf2.sx, conf3.ex, conf3.sx ],

object: this, onTimeUpdate: this.onTimeUpdate, onTimeStart: this.onTimeStart, onTimeEnd: this.onTimeEnd,

start: start, duration: animLength, data: [ "show", conf1.sx, conf1.ex, conf2.sx, conf2.ex, conf3.sx, conf3.ex ],

infx[0].attr( "src", infx[1].src.replace( "xf.png", "x.png" ) );

[ [ o1, conf1 ], [ o2, conf2 ], [ o3, conf3 ] ].forEach(function( infx ){

o3 = layer.createImage( "default", conf3.src, conf3.sx, conf3.y, conf3.w, conf3.h ).hide();

o2 = layer.createImage( "default", conf2.src, conf2.sx, conf2.y, conf2.w, conf2.h ).hide();

o1 = layer.createImage( "default", conf1.src, conf1.sx, conf1.y, conf1.w, conf1.h ).hide();

var conf3 = { src: "images/xxx.png", sx: 697, ex: 608, y: 6, w: 31, h: 32 };

var conf2 = { src: "images/xx.png", sx: 671, ex: 582, y: 5, w: 27, h: 26 };

var conf1 = { src: "images/x.png", sx: 650, ex: 561, y: 5, w: 22, h: 19 };

var light = layer.path( [ "M", x, y, "L", x1, y1, "L", x2, y2, "Z" ] ).attr({

object: control, onTimeUpdate: control.onTimeUpdate, onTimeEnd: control.onTimeEnd

var mask = maskLayer.rect( 0, 0, 640, 480 ).attr({ fill: "#fff", stroke: "none" });

var x = boom.originX, y = boom.originY, time = 0, idx = indexs.random();

new ClassKnifePart({ sx: lastX, sy: lastY, ex: x, ey: y }).set(),

timeline.createTask({ start: 0, duration: life, object: this, onTimeUpdate: this.update, onTimeEnd: this.end, recycle: anims });

this.line = layer.path( "M" + sx + "," + sy + "L" + ex + "," + ey ).attr({

object: this, onTimeUpdate: this.onZooming, onTimeStart: this.onZoomStart, onTimeEnd: this.onZoomEnd,

世界盒子七国游戏解说object: this, onTimeUpdate: this.onZooming, onTimeStart: this.onZoomStart, onTimeEnd: this.onZoomEnd,

// text = layer.createText( "default", fps + "0", 4, 470 ).attr( "fill", "#ccc" );

image = layer.createImage( "flash", "images/flash.png", 0, 0, 358, 20 ).hide();

var timeline = require("scripts/timeline").use( "flash" ).init( 10 );

appendFlame( [ nx, ny ], PI * 2 * random(), 60, 200 + 500 * random(), flames );

item.path.attr({ path: 'M' + p1 + ' Q' + [ p3, p2, p4, p1 ].join(' ') });

p2 = [ trunc(center[0] + cos(ia) * radius * age), trunc(center[1] + sin(ia) * radius * age) ];