html5游戲怎麼做
1. 怎麼用html5開發游戲
比如使用
html5
的畫布標簽canvas開發一粗森返個簡單的類似qq游戲你畫我猜的游戲:首先你要學會canvas標簽的基本用法，畫線，畫筆大小，畫筆，截圖保存等，然後結合你的js功底在畫布上要畫岩飢出連續的平滑的線條，然後別人就可以根據畫春燃的圖，猜詞語了，猜中了就給分。然後排名什麼的。這就是一個簡單的html5游戲了.網上有很多
列子
的，你可以下一個源碼看看
2. 如何開發一個簡單的HTML5 Canvas 小游戲
1. 創建一個Canvas對象
[javascript] view plain
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
我們首先要做的是創建一個canvas對象。可以用JavaScript或HTML來做，都非常簡單。此處我用的是JS。當創建了canvas之後，我們就可以獲取它的上下文對象（context）、設置尺寸，並且把它加到當前文檔中。
2. 載入圖片
[javascript] view plain
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
游戲需要圖像，所以讓我們載入一些圖片吧。我想盡量簡單化，所以只用了Image對象來做，當然，還可以將載入圖像的功能封裝成一個類或別的任何形式。代碼寬遲中的bgReady用來標識圖片是否已完全載入，只有當圖片載入完成後，我們才能使用它，如果在載入完成前就對其進行繪制或渲染，JS將會報一個DOM error的錯誤。
我們會用到三張圖片（背景、英雄、怪物），每張圖片都需要這樣處理。
3. 定義游戲要使用的對象
[javascript] view plain
// Game objects
var hero = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;
定義一些變數，稍後會用到。hero對象的speed屬性表示英雄的移動速度（像素/秒）；monster對象不會移動，所以僅僅具有一對坐標；monstersCaught表示玩家抓住的怪物數量。
4. 處理玩家輸入
[javascript] view plain
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
現在進行輸入的處理。（對具有web開發背景的人來說，這是目前為止第一個具有挑戰性的部分）對一般的網頁來說，當用戶開始輸入時，可能需要馬上開始播放動畫或請求數據。但在這里，我們想讓游戲邏輯在一個單獨的地方對游戲中發生的事情進行處理。為此我們需要將用戶輸入保存下來以備稍後處理，而不是立即處理。
我們通過簡單地將事件對應哪巧液的鍵編碼李物（keyCode）保存在keysDown變數中來實現。如果該變數中具有某個鍵編碼，就表示用戶目前正按下這個鍵。簡單吧！
5. 新游戲
[javascript] view plain
// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
通過調用reset函數來開始新游戲。該函數將英雄（即玩家角色）放到屏幕中間，然後隨機選擇一個位置來安置怪物。
6. 更新對象
[javascript] view plain
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
// Are they touching?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
這是update函數，游戲每隔一定時間會調用它一次。它所做的第一件事情是檢查用戶是否按下了上下左右四個箭頭鍵。如果是，就將我們的英雄向相應的方向移動。
update有一個modifier參數，這看起來好像有點奇怪。你會在游戲的主函數即main函數中看到它，不過我在這兒先解釋一下。modifier參數是一個從1開始的與時間相關的數。如果間隔剛好為1秒時，它的值就會為1，英雄移動的距離即為256像素（英雄的速度為256像素/秒）；而如果間隔是0.5秒，它的值就為0.5，即英雄移動的距離為其速度的一半，以此類推。通常update函數調用的間隔很短，所以modifier的值很小，但用這種方式能夠確保不管代碼執行的速度怎麼樣，英雄的移動速度都是相同的。
我們已經實現了根據用戶的輸入來移動英雄，但我們還可以在移動英雄時對其進行檢查，以確定是否有其他事件發生。例如：英雄是否與怪物發生了碰撞——當英雄與怪物發生碰撞時，我們為玩家進行計分（monstersCaught加1）並重置游戲（調用reset函數）。
7. 渲染對象
[javascript] view plain
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};
當你能夠看到你的行動時游戲才會變得更有趣，所以讓我們在屏幕上繪制吧。首先我們將背景圖片繪制到canvas，然後是英雄和怪物。注意順序很重要，因為任何位於表層的圖片都會將其下面的像素覆蓋掉。
接下來是文字，這有些不同，我們調用fillText函數顯示玩家的分數。因為不需要復雜的動畫或者對文字進行移動，所以只是繪制一下就ok了。
8. 游戲主循環
[javascript] view plain
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
游戲的主循環用來控制游戲流程。首先我們要獲得當前的時間，這樣我們才能計算時間差（自上次循環以來經過的時間）。然後計算modifier的值並交給update（需要將delta除以1000以將其轉換為毫秒）。最後調用render並更新記錄的時間。
更多關於游戲循環的內容見「Onslaught! Arena Case Study」。
9. 開始游戲吧
[javascript] view plain
// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
快完成了，這是最後一段代碼。首先調用reset來開始新游戲。（還記得嗎，這會將英雄置中並隨機安放怪物）。然後將起始時間保存到變數then中並啟動游戲的主循環。
OK！（但願）你現在已經理解了在HTML5 Canvas中用JS來開發游戲的基礎知識了。建議最好是能夠自己親自試一把！
3. 如何快速開發html5游戲
我不知道題主是什麼意思，「如何快速開放html5 游戲 」？是指簡單頌雀的換皮 游局櫻橡戲 還是高質量的 游戲 呢？我最近也在學習各種引擎，對於 游戲 開發還是有一些了解的。（雖然作為新人開發者實在找不到合適的工作，難受。）
html5 游戲 開發，也可以說是H5 游戲 ，是時下最火熱的 游戲 類型之一。其簡單快捷的開放方式深受開發者喜愛。
HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標准版本，現在仍處於發展階段，但大部分瀏覽器已經支持某些 HTML5 技術。HTML 5有兩大特點：首先，強化了 Web 網頁的表現性能。其次，追加了本地資料庫等 Web 應用的功能。
對比與HTML4來說，H5的語法更加簡單，新增了許多標簽，擁有全新的表單，更加方便初學者上手。
對於題主所說的如何快速開發H5 游戲 ，如果是為了讓閱歷上多添加幾個項目，可以選擇去網路上搜索相應的教程學習，根據案例來編寫，最後修改一部分參數和圖片，如此重復修桐旁改，可以製作出簡單的換皮 游戲 。
但是要製作劇情，操作，玩法等各種方面新穎的 游戲 ，還是需要慢慢的沉澱下來才行。
4. 如何開發一個簡單的html5小游戲
創建畫布
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
首先我們需要創建一張畫布作為游戲的舞台。這里通過JS代碼而不是直接在HTML里寫一個<canvas>元素目的是要說明代碼創建也是很方便的。有了畫布後就可以獲得它的上下文來進行繪圖了。然後我們還設置了畫布大小，最後將其添加到頁面上。
准備圖片
// 背景圖片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
游戲嘛少不了圖片的，所以我們先載入一些圖片先。簡便起見，這里僅創建簡單的圖片對象，而不是專門寫一個類或者Helper來做圖片載入。bgReady這個變數用來標識圖片是否已經載入完成從而可以放心地使用了，因為如果在圖片載入未完成情況下進行繪制是會報錯的。
整個游戲中需要用到的三張圖片：背景，英雄及怪物我們都用上面的方法來處理。
游戲對象
// 游戲對象
var hero = {
speed: 256, // 每秒移動的像素
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;
現在定義一些對象將在後面用到。我們的英雄有一個speed屬性用來控制他每秒移動多少像素。怪物游戲過程中不會移動，所以只有坐標屬性就夠了。monstersCaught則用來存儲怪物被捉住的次數。
處理用戶的輸入
// 處理按鍵
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
現在開始處理用戶的輸入(對初次接觸游戲開發的前端同學來說，這部分開始可能就需要一些腦力了)。在前端開發中，一般是用戶觸發了點擊事件然後才去執行動畫或發起非同步請求之類的，但這里我們希望游戲的邏輯能夠更加緊湊同時又要及時響應輸入。所以我們就把用戶的輸入先保存下來而不是立即響應。
為此，我們用keysDown這個對象來保存用戶按下的鍵值(keyCode)，如果按下的鍵值在這個對象里，那麼我們就做相應處理。
開始一輪游戲
// 當用戶抓住一隻怪物後開始新一輪游戲
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// 將新的怪物隨機放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
reset方法用於開始新一輪和游戲，在這個方法里我們將英雄放回畫布中心同時將怪物放到一個隨機的地方。
更新對象
// 更新游戲對象的屬性
var update = function (modifier) {
if (38 in keysDown) { // 用戶按的是↑
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // 用戶按的是↓
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // 用戶按的是←
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // 用戶按的是→
hero.x += hero.speed * modifier;
}
// 英雄與怪物碰到了么？
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
這就是游戲中用於更新畫面的update函數，會被規律地重復調用。首先它負責檢查用戶當前按住的是中方向鍵，然後將英雄往相應方向移動。
有點費腦力的或許是這個傳入的modifier 變數。你可以在main 方法里看到它的來源，但這里還是有必要詳細解釋一下。它是基於1開始且隨時間變化的一個因子。例如1秒過去了，它的值就是1，英雄的速度將會乘以1，也就是每秒移動256像素；如果半秒鍾則它的值為0.5，英雄的速度就乘以0.5也就是說這半秒內英雄以正常速度一半的速度移動。理論上說因為這個update 方法被調用的非常快且頻繁，所以modifier的值會很小，但有了這一因子後，不管我們的代碼跑得快慢，都能夠保證英雄的移動速度是恆定的。
現在英雄的移動已經是基於用戶的輸入了，接下來該檢查移動過程中所觸發的事件了，也就是英雄與怪物相遇。這就是本游戲的勝利點，monstersCaught +1然後重新開始新一輪。
渲染物體
// 畫出所有物體
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// 計分
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};
之前的工作都是枯燥的，直到你把所有東西畫出來之後。首先當然是把背景圖畫出來。然後如法炮製將英雄和怪物也畫出來。這個過程中的順序是有講究的，因為後畫的物體會覆蓋之前的物體。
這之後我們改變了一下Canvas的繪圖上下文的樣式並調用fillText來繪制文字，也就是記分板那一部分。本游戲沒有其他復雜的動畫效果和打鬥場面，繪制部分大功告成！
主循環函數
// 游戲主函數
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// 立即調用主函數
requestAnimationFrame(main);
};
上面的主函數控制了整個游戲的流程。先是拿到當前的時間用來計算時間差（距離上次主函數被調用時過了多少毫秒）。得到modifier後除以1000(也就是1秒中的毫秒數)再傳入update函數。最後調用render 函數並且將本次的時間保存下來。
關於游戲中循環更新畫面的討論可參見「Onslaught! Arena Case Study」。
關於循環的進一步解釋
// requestAnimationFrame 的瀏覽器兼容性處理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代碼也沒關系，我只是覺得拿出來解釋一下總是極好的
為了循環地調用main函數，本游戲之前用的是setInterval。但現今已經有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考慮瀏覽器兼容性。上面的墊片就是出於這樣的考慮，它是Paul Irish 博客原版的一個簡化版本。
啟動游戲！
// 少年，開始游戲吧！
var then = Date.now();
reset();
main();
總算完成了，這是本游戲最後一段代碼了。先是設置一個初始的時間變數then用於首先運行main函數使用。然後調用 reset 函數來開始新一輪游戲（如果你還記得的話，這個函數的作用是將英雄放到畫面中間同時將怪物放到隨機的地方以方便英雄去捉它）。
到此，相信你已經掌握了開發一個簡單H5小游戲需要的基本功了。玩玩這個游戲或者下載代碼自己研究研究吧 :)
Feel free to repost but keep the link to this page please!
5. h5游戲的開發製作方法有哪些
學習一下網頁設計相關知識，就可以接觸到html5+css3+jq，就可以做一些簡單的h5游戲，現在很多游戲開發工具都支持導出h5模式支持線上，比如game maker studio, godot, rpg maker
6. 如何在微信公眾平台上做HTML5游戲
微信公眾平台上做HTML5游戲，基本的有三個法子。
1 閱讀原文中添加鏈接。但，如果這樣坐引導的文章一定要做好來，不然轉換率會很低的。千萬要走心一點，不要平白無故的就放在閱讀原文，誰看？反正俺是不會看的。
2 圖片的形式，在圖片中添加入h5的二維碼。別人只要長按就可識別二維碼跳轉到你的h5去，什麼圖片你隨意，例如植入到節日的場景啊、各種動漫圖片均可。同樣要做好引導，才能引發轉化。
3 最直接的形式，你們大部分可能都實現不了，以前公眾號有一種功能可以開通，叫直接跳轉，也就是只要點擊標題就可以直接看到h5，但據我所知現在這個功能申請不了，也就是大多數人都實現不了，原來申請通過的才可以。
另外需要了解HTML5用什麼軟體製作的，一般的有maka、易企秀、兔展。
選擇毋庸贅述，可以都嘗試一下，都是較為簡單上手的，如果你覺得逼格不夠，可以用互動大師。用這些軟體如果自己有一定的設計能力做出簡易的h5頁面基本是沒有問題啦。
但如果是很復雜炫技的h5，一些是可以在前面提及的平台的模板處購買，一些是找第三方公司做的。
製作的小貼士：
1 不要用原生字體、真的好hi丑，自己選好看的字體然後做成png格式，然後放進去。
2 如果你有設計能力，最好把圖層分開放進去，才能設置每個不同的動態動畫。也就是不要做整張圖放進去，其實一頁可能是好幾張圖甚至十來張圖。
3 如果你自己沒有設計能力，那還是在平台上找模板吧。。。然後配合自己的文案。尤其是節日類的h5，模板一搜一大堆，但即便是用模板，也請走走心，不要全特么照搬過來一句話不改。
4 如果不會用ps，去練慣用美圖秀秀，基礎效果基本沒多大問題。
5 如果你連png都不會做，藝術字體在線生成器 藝術字轉換器 這個神器送給你，大把字體你挑。
6 如何插入報名表 免費製作報名網頁 報名表設置後可在後台查看以及下載excel模式。
7 文字盡量少而美，沒人願意看你長篇大論，尤其是h5.
8 文字太多、頁面太復雜要注意，很可能造成打開的時候回很卡。
7. HTML5游戲是怎麼做的。有誰知道
從學習HTML開始，建議先去w3school找一些HTML教程，
再去買本HTML5的書研究網頁。 最好還要學好css和JavaScript，這對於HTML的處理有很大作用的培仿配合，而且最好能掌握jQuery。
都建議用引擎,其實現在壓根沒有什麼很完善的HTML5游戲引擎,都處於發展階段,本身HTML5就是新興技術,入引擎首先得去理解引擎里各種組件,然後還未必知道組件為什麼態中腔要這么寫.
如何上手?
1,用canvas畫張圖片,寫兩個字
2,用循環函數改變圖片和文字的屬性讓他們動起來
3,旋轉,放大縮小,位移,混合,透明....
4,綁定按鍵事件,去控制元素的屬性
好了,差不多像個游戲了
這個過程會學到很多javascript的處理經驗.比較懶的人就會開始想辦法寫對象復用調取和設置屬性.
然後就會去考慮一些增加的部分:滑鼠帆衫事件,觸控事件,繪制性能優化,屏幕適配,資源載入.....
逐漸的就豐富起來了,就這樣...
8. h5小游戲開發是怎麼做的簡單嗎
這個問題還真不好回答，
H5小游戲，其實就是 html5 + css3 + javascript 等原生技術開發的小游戲。至於簡不簡單，那得看你的學習能力和理解能力了。html5+css3+javascript 是前端開發的基礎技術，但是也是最重要的技術。入門比較容易，但是要精通還真的不簡單。
小游戲主要就是結合html5，使用canvas 和 css3的各種屬性，然後結合 js來進行操作。學好這些技術，開發一個簡單的小游戲並不難。
9. 怎麼用HTML5製作一款小游戲
用HTML5製作一款小游戲首先肯定得學會HTML，然後推薦可以考慮先去學習別人的成品游戲，借鑒甚至模仿出來，再去構思自己的游戲就很簡單了，我目前就在雲創動力華中區學習游戲製作，感覺用HTML5製作游戲真的並不難。
10. html5游戲開發，需要學習什麼技術
html5游戲開發，需要學習的技術：
1、HTML5教程
主要學習HTML標簽、屬性和事件。
2、CSS教程
主要學習使用CSS來控制網頁的樣式和布局。
3、JavaScript教程
做HTML5開發，主要使用JS語言。所以要學習JS語言。
4、HTML5其它的核心技術
做HTML5開發，可能會用到下面的技術。
（1）WebWorker
可以在瀏覽器中運行多個JS腳本。可以用於需要後台執行某種耗時工作的場合。
（2）WebSocket
瀏覽器可以與伺服器間雙向通信。Socket方式能夠大大提高瀏覽器與伺服器間的通信效率。可以用於瀏覽器與伺服器間通信頻繁的場合，比如實時聊天。
(10)html5游戲怎麼做擴展閱讀：
HTML5的優點：
新一代網路標准能夠讓程序通過Web瀏覽器，消費者從而能夠從包括個人電腦、筆記本電腦、智能手機或平板電腦在內的任意終端訪問相同的程序和基於雲端的信息。
HTML5允許程序通過Web瀏覽器運行，並且將視頻等目前需要插件和其它平台才能使用的多媒體內容也納入其中，這將使瀏覽器成為一種通用的平台，用戶通過瀏覽器就能完成任務。此外，消費者還可以訪問以遠程方式存儲在「雲」中的各種內容，不受位置和設備的限制。
缺點：
1、開放性帶來的困擾
在從前網路平台上存在大量的專利產品，想要實現HTML5技術的大量應用首先就需要將這些專利性的產品變為開放式的產品，由於各種原因，當前面對這一問題還存在許多爭議。
以視頻格式為例，兩大陣營對於視頻格式的設置存在爭議，一大陣營以蘋果為代表，另一大陣營則以Opera、火狐、谷歌為代表。
WPEG陣營是蘋果所屬陣營，由於其自身全部使用的是這一種格式，所以堅持認為應當將此格式作為標准，而WebM陣營則認為由於WPEG格式的專利依然沒有解除，對於HTML5技術要求的開放性沒有達標，所以不同意將其作為標准格式。
2、發展的速度有待提升
在HTML5中提出了一些從前HTML技術中不具有的新技術，但是有許多主流瀏覽器在長時間的發展過程中已經完成了此種技術的開發，在自身瀏覽器中實現了此種功能，就這一情況來說HTML5的發展速度方面存在一定的問題。
同時由於HTML5的不成熟，當前關於HTML5的相關技術標准還沒有完全確定，所以在短時間想要將其投入大規模應用還比較困難。
參考資料：網路-html5