阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

title: 10+ 最佳 JavaScript 遊戲程式碼
published: true
description:
tags: #javascript #webdev #beginners #css

替代文字

<p>如果你喜歡這篇文章,請查看更多範例 [gscode.in]</p>
https://gscode.in/javascript-games-code/

閱讀更多文章
1: 20+ CSS 背景圖案範例
2: 30+ 驚人的 CSS 漢堡菜單範例
3: 15+ Bootstrap 導航欄
4: 30+ 單選按鈕 CSS 樣式範例
5: 50+ CSS 網格範本

<p>1.我的第一次嘗試是使用 HTML、CSS 和 jQuery 編碼一個遊戲。這遊戲相當隨意,我知道使用畫布來開發遊戲會是更好的選擇,但我只是想看看我是否能做到。無論如何... 祝你好運! :)</p>

{% codepen https://codepen.io/dazulu/pen/tcwDo %}

<p>2.2048 遊戲</p>
{% codepen https://codepen.io/camsong/pen/wcKrg %}

<p>3.塔樓建設遊戲。通過點擊、輕觸或空格鍵來放置方塊。</p>

{% codepen https://codepen.io/ste-vg/pen/ppLQNW %}

<p>4.一個簡單的平台遊戲引擎,地圖可以自訂和編寫腳本。請參考 "map" 變數中的註釋以獲取指示。</p>

<p>我計畫在未來擴展這個引擎,使用圖像作為瓦片和玩家的能力是我考慮中的一項。任何建議皆歡迎。</p>

{% codepen https://codepen.io/dissimulate/pen/CqIxk %}

<p>5.HTML5 遊戲</p>

{% codepen https://codepen.io/CaioPaiola/pen/GFpuK %}

<p>如果你喜歡這篇文章,請查看更多範例 <h3><b>gscode.in</b></h3></p>

<p>6.看看你能否解決這個用 three.js 製作的經典魔術方塊遊戲。</p>

{% codepen https://codepen.io/bsehovac/pen/EMyWVv %}

<p>如果你喜歡這篇文章,請查看更多範例 [gscode.in]</p>(https://gscode.in/javascript-games-code/)

<p>7.拯救這個小家伙免受這頭(不那麼邪惡的)狼的侵害。它開始得非常慢,但不要被騙了,你可能無法忍受它的速度。</p>

{% codepen https://codepen.io/Yakudoo/pen/YGxYZj %}

<p>8.這是一個使用 JavaScript 編寫的基本貪吃蛇遊戲,邏輯使用 JavaScript,顯示使用 CSS。使用箭頭鍵或 WASD 鍵控制蛇。你可以穿越牆壁。</p>

{% codepen https://codepen.io/jackrugile/pen/IHbvh %}

<p>9.殺死鳥類</p>

{% codepen https://codepen.io/elad2412/pen/hBaqo %}


<p>10.將數字 1 到 9 放入網格中(每個數字僅使用一次),使計算結果恰好等於網格外的數字。</p>

<p>注意,BIDMAS/PIMDAS 被忽略:A + B × C 與 (A + B) × C 是相同的,按從左到右、從上到下進行運算。</p>

<p>提示:一個好的開始點是尋找答案為半質數且帶有乘法符號的行(其中一個因子必須在只有一個空格的一側)</p>

{% codepen https://codepen.io/z-/pen/ZMbLNM %}

<p>11.編輯:在眼睛上新增了一些懸停動畫,整體也做了改變,名稱改為 Doortem!</p>

{% codepen https://codepen.io/gabriellewee/pen/PjwgMq %}


原文出處:https://dev.to/gscode/10-best-of-javascript-games-3mjj


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈