程序員最愛的8款代碼游戲邊玩游戲邊擼代碼

完了一天的工作后，程序員都想休息一下。休息的時候，玩游戲是最好的放松方式。如果有這么一款游戲，能在放松的同時鞏固學到的代碼、學到新代碼，就再好不過了。W3Cschool精選8款熱門游戲，趕緊來邊玩游戲邊擼代碼吧!

1.Hack Run、Hack Run Zero、Hack Time

這是黑客入侵解謎游戲系列游戲，相信不少程序員并不陌生。在這個游戲中，你將化身黑客，接受很多不一樣的任務，比如說你要入侵別人賬號，去破解密碼或者竊取信息。這個游戲看起來很高科技、很炫酷，但是玩家只要輸入簡單命令，就可以慢慢的解開謎團。這個游戲對于有點編程基礎的程序員來說沒什么難度，只是界面看起來像編寫代碼一樣。

2.Robocode

這款游戲相信很多程序員都知道，同大家平常玩的，用鼠標、鍵盤簡單操控的游戲不同，玩這款游戲時，參賽者要對機器人編程，委機器人設計智能，以便指揮他們。Robocode相當有趣，它屬于競賽性的編程。只要使用簡單代碼，你就可以創建機器人。這個機器人還配有火炮以及雷達，可以躲避對手以及攻擊對手。通過這款游戲，你可以學習Java技術。

3.CodeTank

通過這款游戲，你將進入代碼機器人世界。它屬于全球首個Javascript 程序員在線編程對戰游戲，采用MongoDB、NodeJS、CSS3、Javascript、HTML5等全新的Web技術來構建。隨時互聯網的飛速發展，Robocode 已經開始變得落后。所以，現在有了 Javascript 語言的基于互聯網的在線編程對戰游戲——CodeTank 代碼坦克!

4.Uplink

uplink這個游戲中，你將扮演神通廣大的黑客，在網絡上接受任務，然后破解世界各地的電腦系統。游戲里，你不需要懂太多專業知識，相反會學到很多東西。如果你熟悉黑客知識，可以自己去做，如果不會的話，會有教學模式一步一步教你。然后你的等級會上升，你就可以正式在 UPLINK 的 SERVER 上聯系客戶，接取工作，完成工作就會獲得回報。等級越高，任務的難度就會越高。

5.Hacker Org

這款游戲可以被看成一系列的挑戰，你需要破解一系列的密碼才能最終翻版。在破解密碼的過程中，需要你不斷的利用代碼知識。當密碼破解后，你的編程水平也得到提升。

6. CodeCombat (代碼戰斗)

CodeCombat (代碼戰斗) 是款有趣開源的編程游戲!它使用代碼來操控游戲人物，讓你一邊沉浸在游戲樂趣中一邊學習編程技術(Javascript / Python等)。從最初小白入門級的單人關卡到后來高難度的多人對戰，各種技術層次的人都可以樂在其中并從實戰中不斷吸取編程知識。

CodeCombat 項目的創始人 George ，并非科班出身。剛開始學習編程的時候，他使用很多人推薦過的網站，但他還是覺得太無聊了。George每星期都有幾個朋友嘗試，但都無一例外地放棄了。之后，George 和小伙伴們一起編寫 CodeCombat，他的目的是讓大家邊玩邊學習。

7.Streeps

玩這個游戲可以學習到有關 Javascript知識，同時該游戲也是面向學習編程語言的人員的第一款MMO沙盤游戲。有了這個游戲，學習編程再也不會枯燥無味，可以在邊玩的過程中邊學習。

8.Ruby Quiz

這款游戲主要適合Ruby編程語言挑戰，目前這款游戲有156 個測試環節。從你進入這個游戲開始，就接觸到Ruby編程語言，有沒有覺得超級高大上?

代碼相當枯燥無味，尤其是經過一整天高壓工作后，還是希望放松一下。但是編程水平的提高，需要不斷的學習。上面介紹的幾款游戲，相信能夠幫助大家。如果你還有更好的游戲推薦給其他程序員，可以關注我們的公眾號，或者給W3Cschool留言哦!

公眾號：w3c技術教程

發語言：js
實例大小：5.05M
實例類別：網頁游戲
【核心代碼】Html JavaScript游戲源碼

Runner.loadImage=function()
{
var img=new Image();
img.onload=Runner.imgLoadHandler;
img.src=imageURLs.shift();
ImageManager.push(img);
document.getElementById(“status”).innerHTML=“Loading(” loaded “/6)” ": " img.src;
}

要悄悄學習，做一個浪漫的程序員

考慮文章篇幅的原因，大部分的小游戲、動畫我都只放了HTML部分的代碼，具體的CSS、JS代碼我都打包放在了一起，具體參考文章末尾。

1.小鹿親嘴

這兩個年輕的小鹿相愛。你可以幫助他們在一起嗎？

使用Matter.js物理特性和自定義psuedo-rigging進行構建。已更新為固定大小，以防止某些屏幕尺寸出現對齊問題。

主要HTML代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 小鹿親嘴</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">
			
	</head>
	<body>		
		<script>console.clear()</script>	
		<div class="controls">
		<div class="green">
		  Move the <b>green alpaca</b>
		  <div class="keys"><kbd data-key="1">1</kbd> & <kbd data-key="2">2</kbd></div>
		  <small>or mouse/touch</small>
		</div>	  
		  <div class="mission">Help them <span class="throb">kiss</span>!</div>		
		<div class="pink">
		  Move the <b>pink alpaca</b> with 
		  <div class="keys"><kbd data-key="arrowleft">??</kbd> & <kbd data-key="arrowright">?</kbd></div>
		  <small>or mouse/touch</small>
		</div>
		</div>	
	</body>

	<script src="https://codepen.io/shshaw/pen/epmrgO"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/1.3.4/cash.min.js"></script>
	<script src="js/script.js"></script>
</html>

還有CSS和JS代碼，列出來的話文章太長了，本文中所有的完整代碼都可通過文章末尾的方式獲取（CSDN積分下載或者關注公眾號啦啦啦好想biu點什么回復情人節表白免費獲取）

2.變成小貓

“想變成小貓
每天撓撓你褲腳
這樣你還會把我抱一抱”

當然這里的漢字你可以自由發揮，想不出來好點子也可以參考參考別人寫的三行情詩或者網上搜一搜一些用來表白的情話。

HTML代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 變成小貓</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">	
	</head>
	<body>
			
		<section class="container">
			<h1 class="title">
				<div>	
					<span>想</span>
					<span>變</span>
					<span>成</span>
					<span>小</span>
					<span>貓</span>
				</div>
				<div>
					<span>每</span>
					<span>天</span>
					<span>撓</span>
					<span>撓</span>
					<span>你</span>
					<span>褲</span>
					<span>腳</span>
				</div>
				<div>
					<span>這</span>
					<span>樣</span>
					<span>你</span>
					<span>還</span>
					<span>會</span>
					<span>把</span>
					<span class='m-left'>我</span>
					<span>抱</span>
					<span>一</span>
					<span>抱</span>
				</div>
			</h1>
			<button class="btn" id="restart-btn">Restart</button>
		</section>
		
		<footer>Created by <a href=https://blog.csdn.net/qq_44273429" target='blank'>海擁?</a> @2021.
		</footer>	

	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
	<script src="js/script.js"></script>
</html>

3.愛心表白

給你所愛之人一個特殊的消息，敞開愛心。CSS3動畫使其震撼，并在單擊消息后顯示。

主要HTML代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 做我女朋友吧</title>	
		<link rel="stylesheet" href="css/style.css">	
	</head>
	<body>	
		<!-- 情人節快樂! -->
		<div class="bgoverlay">
		  <div class="container">
		    <span class="ico">
		      <span class="ico2"></span>
		      <span class="title">Click Me</span>
		    </span>
		    <div class="endtext">
		      <span class="close" title="Restart"><i class="fa fa-times"></i></span>
		      <h1>I love you baby</h1>
		      <h2>Be my valentine?</h2>
		      <h3>~Skippy</h3>
		    </div>
		  </div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</body>
<script src="js/script.js"></script>	
	
</html>

4.愛心溢出

演示地址（第一次打不開的話刷新一下試試）：
https://wanghao221.github.io/game/Love-Overflow

主要HTML代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | Love Overflow</title>	
		<link rel="stylesheet" href="css/style.css">
			
	</head>
	<body>
		<div id="root"></div>		
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.min.js"></script>
	<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
	<script src="js/script.js"></script>
</html>

5.思念如馬

“思念如馬
自別離
未停蹄”

HTML代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 思念如馬</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">			
	</head>
	<body>		
		<div class='console-container'><span id='text'></span>
		  <div class='console-underscore' id='console'>_</div>
		</div>
	</body>
	<script src="js/script.js"></script>
</html>

6.霓虹燈愛心

主要HTML代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 霓虹燈愛心</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">
			
	</head>
	<body>
	  <canvas id="canvas" width="1400" height="600"></canvas>
	</body>
	<script src="js/script.js"></script>
</html>

7.3D旋轉相冊

這個相冊我之前發過，感覺情人節用來表白還是不錯的。當然這里的相冊可以換成自己的女朋友（沒有的話我也沒辦法）音樂也可以換成自己喜歡的。

基于HTML的3D立方體相冊

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>love</title>
<link rel="stylesheet" href="./css/program.css">
</head>
<body>
<div class="title">
        旋轉相冊
</div>
<audio controls="controls" autoplay="autoplay"><source src="./video/love.mp3" type="audio/mpeg"/>
		Your browser does not support the audio element.
	</audio>
<div class="cube">
	<!-- 外層立方體 -->
	<div class="outer-cube">
		<div class="outer-top">
			<img src="images/1.jpg"/>
		</div>
		<div class="outer-bottom">
			<img src="images/2.jpg"/>
		</div>
		<div class="outer-front">
			<img src="images/3.jpg"/>
		</div>
		<div class="outer-back">
			<img src="images/4.jpg"/>
		</div>
		<div class="outer-left">
			<img src="images/5.jpg"/>
		</div>
		<div class="outer-right">
			<img src="images/6.jpg"/>
		</div>
	</div>
	<!-- 內層立方體 -->
	<div class="inner-cube">
		<div class="inner-top">
			<img src="images/01.jpg"/>
		</div>
		<div class="inner-bottom">
			<img src="images/02.jpg"/>
		</div>
		<div class="inner-front">
			<img src="images/03.jpg"/>
		</div>
		<div class="inner-back">
			<img src="images/04.jpg"/>
		</div>
		<div class="inner-left">
			<img src="images/05.jpg"/>
		</div>
		<div class="inner-right">
			<img src="images/06.jpg"/>
		</div>
	</div>
</div>
<div>
	<div class="message">
		<div class="author">
			<a href="https://blog.csdn.net/qq_44273429">海擁制作</a>
		</div>
		<div class="tip">
            溫馨提示：鼠標移入移出立方體，將會顯示效果！
		</div>
	</div>
</div>
</body>
</html>

8.用不同的語言說“愛”

這里我用了61個國家的語言翻譯的“愛”組成了一個愛心，特別把我們中國的愛弄得又大又紅。

HTML非常簡單：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | love</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">		
	</head>
	<body>		
		<div class="love"></div>
	</body>
	<script src="js/script.js"></script>
</html>

JS：

const words=[
    '愛', 'Love', 'Amour', 'Liebe', 'Amore',
    'Amor', 'Любовь', '????', '?????', 'Cinta',
    'Αγ?πη', '??', 'Liefde', 'Dashuri', 'Каханне',
    'Ljubav', 'Láska', 'Armastus', 'Mahal', '????', 
    'Szerelem', 'Grá', 'Mīlestība', 'Meil?', 'Любов', 
    '?убовта', 'Cinta', '???', 'Dragoste', 'Láska', 
    'Renmen', '???', 'muna?a', 'Sevgi', '?убав', 
    'karout', 'amà', 'am?r', 'k?rleiki', 'mborayhu', 
    'Upendo', 'sòòyayyàà', 'ljubav', '???', 'с?ю', 
    'с?й??', 'tia', 'aroha', 'KHAIR', '?????', 
    'kj?rlighet', 'munay', 'jecel', 'K?rlek', 'soymek', 
    'Mahal', 'ярату', '????', 'sopp', 'uthando', 
    '???????', 'A?k', 'Tình yêu', '????'];
const dom={
    love: document.querySelector('.love')
}

dom.love.style.setProperty('--particles', words.length)

words.forEach((word, i)=> {
    let span=document.createElement('span')
    span.style.setProperty('--n', i + 1)
    span.innerText=word
    dom.love.appendChild(span)
})

9.愿意做我女朋友嗎

愿意做我女朋友嗎

HTML代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 愿意做我女朋友嗎</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">
			
	</head>
	<body>		
		
		<div class="centered">
		  <h4>Will you be My Girlfriend?</h4>
		  <input class="no" id="No" type="checkbox" name="answer"/>
		  <label class="no" for="No">No</label>
		  <input class="yes" id="Yes" type="checkbox" name="answer"/>
		  <label class="yes" for="Yes">Yes</label>
		  <div class="answer--yes"></div>
		  <div class="answer--no"></div>
		</div>
		<div class="signature">
		  <p>Made with <i class="much-heart"></i> by <a href="https://blog.csdn.net/qq_44273429/">海擁CSDN博客</a></p>
		</div>
	</body>
</html>

10.我被你所深深吸引

HTML代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 我被你所深深吸引</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">
			
	</head>
	<body>		
		
		<div class="container" id="ilu">
		  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-55 80 400 400" style="enable-background:new 0 0 288 560;" xml:space="preserve">
		    <g id="heart">
		      <path class="st1" d="M131.8,310.1v-53.6c0,0-8-10.8-20.5-11s-24,10.2-24.5,26.7s13.3,36.3,45,53v-5.4      C131.8,316.6,131.8,313.3,131.8,310.1z"></path>
		      <path class="st2" d="M131.8,325.2c0,0,45.2-21.7,45.2-53c0,0,0.8-25.4-22.6-26.7c0,0-13.3-1.2-22.6,11"></path>
		    </g>
		    <g id="magnesium">
		      <path class="st5" d="M229,241h-16.2v24c5.4,0,10.8,0,16.2,0V241z"></path>
		      <path class="st6" d="M281,241h-16.3v24c5.4,0,10.9,0,16.3,0V241z"></path>
		      <path class="st7" d="M229,298.3V265c-5.4,0-10.8,0-16.2,0v36c0,0,2.5,24,33.2,23.7c0-5.2,0-10.3,0-15.5      C229.2,309.5,229,298.3,229,298.3z"></path>
		      <path class="st8" d="M264.7,265v33.7c0,0-1.8,10.2-18.7,10.5c0,5.2,0,10.3,0,15.5c0.3,0,0.6,0,0.9,0c31.6-0.8,34.1-23.3,34.1-23.3      V265C275.6,265,270.1,265,264.7,265z"></path>
		    </g>
		    <g id="clip">
		      <path class="st10" d="M31.3,297.7v-37.2c0,0-0.3-0.8-1.3-0.8c-0.9,0-1.2,0.8-1.2,0.8l0.2,37.8c0,0,0.7,6.6,8.1,6.7      c0-0.7,0-1.5,0-2.2C31.3,302.3,31.3,297.7,31.3,297.7z"></path>
		      <path class="st11" d="M47.1,249.9c0,0-0.6-7.6-10.1-8.1c0,0.7,0,1.4,0,2.1c5.9,0.4,7.7,5.7,7.7,5.7s-0.1,44.8-0.2,47.9      c0,0,0.5,5.5-7.1,5.3c-0.1,0-0.3,0-0.4,0c0,0.7,0,1.5,0,2.2c0.1,0,0.1,0,0.2,0c9.9,0.2,9.7-7,9.7-7L47.1,249.9z"></path>
		      <path class="st10" d="M36.7,241.8c-10.5-0.3-11.5,8.1-11.5,8.1l0.2,64.8c0,0,1.1,9.9,11.6,10.1c0-0.8,0-1.6,0-2.4      c-8.3-0.1-9.1-8.1-9.1-8.1s-0.1-62.9-0.2-64.4c-0.2-1.5,2.8-5.8,8.6-5.9c0.3,0,0.5,0,0.8,0c0-0.7,0-1.5,0-2.1      C36.9,241.9,36.8,241.8,36.7,241.8z"></path>
		      <path class="st11" d="M50.5,260.4c0,0-0.4-0.8-1.2-0.8c-0.9,0-1.3,0.8-1.3,0.8l0,53.7c0,0,0.2,8.4-10.8,8.3c0,0-0.1,0-0.1,0      c0,0.8,0,1.6,0,2.4c0.1,0,0.2,0,0.3,0c12.7,0,13.1-10,13.1-10C50.3,315.1,50.5,260.4,50.5,260.4z"></path>
		    </g>
		  </svg>
		</div>
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script>

	<script src="js/script.js"></script>
</html>

11.想對你說的話都在抽屜里

HTML代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 想對你說的話都在抽屜里</title>	
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" type="image/x-icon" href="https://wanghao221.github.io/favicon.ico">
			
	</head>
	<body>		
		
		<div class="chest">
		  <div class="chest__panel chest__panel--back"></div>
		  <div class="chest__panel chest__panel--front">
		    <div class="chest__panel chest__panel--front-frame"></div>
		  </div>
		  <div class="chest__panel chest__panel--top"></div>
		  <div class="chest__panel chest__panel--bottom"></div>
		  <div class="chest__panel chest__panel--left"></div>
		  <div class="chest__panel chest__panel--right"></div>
		  <div class="chest-drawer chest-drawer--top">
		    <details>
		      <summary></summary>
		    </details>
		    <div class="chest-drawer__structure">
		      <div class="chest-drawer__panel chest-drawer__panel--left"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--right"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--bottom"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--back">You</div>
		    </div>
		  </div>
		  <div class="chest-drawer chest-drawer--middle">
		    <details>
		      <summary></summary>
		    </details>
		    <div class="chest-drawer__structure">
		      <div class="chest-drawer__panel chest-drawer__panel--left"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--right"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--bottom"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--back">Are</div>
		    </div>
		  </div>
		  <div class="chest-drawer chest-drawer--bottom">
		    <details>
		      <summary></summary>
		    </details>
		    <div class="chest-drawer__structure">
		      <div class="chest-drawer__panel chest-drawer__panel--left"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--right"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--bottom"></div>
		      <div class="chest-drawer__panel chest-drawer__panel--back">Mine</div>
		    </div>
		  </div>
		</div>
	</body>
</html>

總結

以上所有代碼演示地址放在這里（打不開可以刷新一下）
Wanghao | Love

在線咨詢

上一篇：CSS 屬性選擇器
下一篇：前端使用html5、ffmpeg實現錄屏攝像等功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

程序員最愛的8款代碼游戲 邊玩游戲邊擼代碼

要悄悄學習，做一個浪漫的程序員

1.小鹿親嘴

2.變成小貓

3.愛心表白

4.愛心溢出

5.思念如馬

6.霓虹燈愛心

7.3D旋轉相冊

8.用不同的語言說“愛”

9.愿意做我女朋友嗎

10.我被你所深深吸引

11.想對你說的話都在抽屜里

總結

您的項目需求

程序員最愛的8款代碼游戲邊玩游戲邊擼代碼