css游戏代码_介绍CSSBattle-第一个CSS代码搜寻游戏-CSDN博客

css游戏代码

by kushagra gour

由kushagra gour

介绍CSSBattle-第一个CSS代码搜寻游戏 (Introducing CSSBattle — the first CSS code-golfing game)

If you are learning Web development or are already a professional Web developer, there is a very high chance you have written CSS at least once in your life. It is a very basic building block of any webpage. Amidst all the discussions and love and hate for CSS, we present to you all — CSSBattle ?⚔️

如果您正在学习Web开发或已经是专业的Web开发人员，那么您一生中至少有一次编写CSS的可能性很高。这是任何网页的基本组成部分。在所有讨论和对CSS的热爱与憎恨中，我们向大家展示— CSSBattle ？⚔️

CSSBattle is the first ever code-golfing platform for CSS lovers that I and my friend, Kushagra Agarwal, have created. The aim of this game is simple — you have an image target which you need to replicate with the smallest possible CSS (and slight HTML if you please) code. More visual match and fewer bytes get you a higher score. And that is how you climb the leaderboards in CSSBattle. Here is an example target screen:

CSSBattle是我和我的朋友Kushagra Agarwal创建的第一个针对CSS爱好者的代码交流平台。该游戏的目标很简单-您有一个图像目标，您需要使用尽可能小CSS代码复制该图像目标(如果需要，可以复制一些HTML)。更多视觉匹配和更少字节可为您带来更高的分数。这就是您在CSSBattle中攀登排行榜的方式。这是目标屏幕的示例：

一些有趣的统计 (Some fun stats)

At the time of writing this post, it has been 10 days since we launched. And here are some fun stats we have gathered:

在撰写本文时，距我们启动已经十天了。以下是我们收集的一些有趣的统计信息：

13000+ players worldwide
全球13000多名玩家
Over 100K code submissions
提交超过10万条代码
Minimum bytes used on a target: just 54 bytes! ?
目标上使用的最小字节：仅54个字节！？
A lovely community forum of 140+ players and 40+ conversations
一个由140多个玩家和40多个对话组成的可爱社区论坛

产品开发 (Product development)

We decided to build and launch CSSBattle in one month, to prevent ourselves from getting into an infinite loop of adding and polishing features. We made a list of the absolutely necessary items for launch and focused on it.

我们决定在一个月内构建并启动CSSBattle，以防止自己陷入添加和修饰功能的无限循环中。我们列出了启动所需的绝对必要物品，并集中精力进行了清单。

During the development, we came up with tons of new ideas to implement in the website, which we kept noting down. I am proud we could resist the urge to work on those exciting ideas and finally launch in one month!

在开发过程中，我们想出了很多新想法要在网站上实施，但我们一直对此表示不满。我为能够抵制那些激动人心的想法并最终在一个月内发布而感到自豪。

科技栈 (Tech Stack)

Our tech stack is pretty standard for today’s product. We have React (using create-react-app as a starter) on the frontend which is deployed on Zeit Now. For the backend, we use Firebase. Since we both primarily have frontend/design experience, Firebase turned out to be an amazing option to easily implement everything we had on our mind while getting best in class scalability and security without managing any server!

我们的技术栈是当今产品的相当标准。我们在前端部署了React (使用create-react-app作为启动器)，该部署在Zeit Now上。对于后端，我们使用Firebase 。由于我们俩都具有前端/设计经验，因此Firebase成为轻松实现我们所想的一切的绝佳选择，同时无需管理任何服务器即可获得一流的可扩展性和安全性！

计分算法 (The scoring algorithm)

One of the most interesting things about developing CSSBattle was designing the scoring algorithm. We sat literally for days discussing and trying out various formulas. We wanted that a amore visual match should always result in a higher score. And of course, for the same match percentage, the score should increase with decreasing code bytes. Also, we wanted a faster score progression towards lower bytes once you are at 100% match, to make it more rewarding for the players who sweat it out with each removed byte.

开发CSSBattle时最有趣的事情之一是设计评分算法。从字面上看，我们坐了几天讨论和尝试各种公式。我们希望视觉效果更好的比赛总能带来更高的分数。当然，对于相同的匹配百分比，分数应随着代码字节的减少而增加。此外，我们希望在您达到100％的比赛率时，将得分朝着低字节的方向更快发展，以使每删除一个字节就把汗水消耗掉的球员得到更大的回报。

In the end, we are happy with what we came up with. Maybe we’ll write a separate post about just the scoring algorithm :)

最后，我们对自己的想法感到满意。也许我们会写一篇关于计分算法的单独文章：)

发射，市场投入 (The Launch)

We originally planned the launch for the 5th of April, but we had to launch it a day before. We had invited many eminent CSS developers to try out CSSBattle before going public. And “fortunately” Jonathan Snook tweeted about us a day before we planned to launch, sending in a huge stream of developers to the game! And so we decide to prepone our launch :)

我们最初计划在4月5日发布产品，但是我们不得不在前一天发布产品。我们已经邀请了许多著名CSS开发人员在公开上市之前试用CSSBattle。 “很幸运”，乔纳森·斯努克(Jonathan Snook)在我们计划发布的前一天在推特上发了帖，向游戏派遣了大量开发人员！因此，我们决定推迟发布时间：)

We started with the announcement on ProductHunt where CSSBattle was the #1 product of the day. Immediately following it was a Reddit rush. And then, the massive and really encouraging tweet by Lea Verou:

我们开始就宣告ProductHunt其中CSSBattle是当天的＃1产品。紧随其后的是Reddit抢购。然后，Lea Verou发表的大规模且令人鼓舞的推文：

Since then, it has been a crazy ride for us both seeing the community grow, play, learn and compete! Each day we see players breaking the limits of creativity and imagination with CSS!

从那时起，对于我们俩来说，看到社区的成长，娱乐，学习和竞争对我们来说都是疯狂的旅程！每天我们都可以看到玩家使用CSS突破了创造力和想象力的极限！

来加入我们吧 (Come join us)

We have a very lovely community of superbly creative and humble developers on Spectrum where you can hang out and learn some CSS Trickery.

我们在Spectrum上有一个非常可爱且极富创造力和谦虚的开发人员社区，您可以在这里闲逛并学习一些CSS Trickery。

So, what are you waiting for? If you have ever written CSS, play now — https://cssbattle.dev(We have also seen people wanting to learn CSS just to play this game!)

那你还在等什么？如果您曾经写过CSS，请立即开始玩-https: //cssbattle.dev (我们也看到人们想要玩CSS只是为了玩这个游戏！)

Fair️公平警告 (⚠️ Fair warning)

CSSBattle is highly fun and addictive. We have seen people losing their sleep, having weird dreams, being late to meet friends, cursing, skipping project deadlines and what not. Please enter at your own risk! ?

CSSBattle非常有趣且令人上瘾。我们已经看到人们失去了他们的睡眠，有怪异的梦，迟到，以满足朋友，咒骂，跳跃项目的最后期限和什么不可以。请自行承担风险！？

Also, we feel it’s our responsibility to highlight that apart from creative approaches, CSSBattle requires you to exploit how CSS (and HTML) is parsed by browsers. It’s important to understand that the CSS you write here is not the way you would write in a real project. The tips and tricks you learn while playing here would certainly make you better understand CSS, but always be alert and curious about what’s a hack and what is not.

另外，我们感到有责任强调，除了创意方法之外，CSSBattle还要求您利用浏览器如何解析CSS(和HTML)。重要的是要了解，您在此处编写CSS并不是您在实际项目中编写CSS的方式。您在此处学习的技巧和窍门当然可以使您更好地理解CSS，但始终警惕什么是hack，什么不是hack。

Have fun CSS-ing!

玩得开心CSS-ing！