❶ h5小游戲製作需要分幾步誰能簡單介紹下
自己開發要5步.
資料庫
後台功能
前端顯示
操控
最後是美術呈現.
任何東西都是後台的發送,
比如你發招,實際是後台計算得出事件,而後前端接收進行,拿網路游戲舉例,如果你斷開網路點發技能是無法出招,行走和做其他事情的,因為無法接收後台數據. 單機也是如此,不會說做技能時候寫按按鍵出招.這樣搞等於全交由前端了,如果畫面卡或播放有問題,整體項目就會白費了.
製作項目一般是有協議,如果出現卡頓崩潰會問題,那麼製作者是需要賠償雙倍或更多錢,如果導致項目流產或嚴重事故是會被判刑的.所以程序員是需要謙卑嚴謹細心的.(如早期嵌入系統程序員因採用過多變數導致系統崩潰被判5年,和近期鏈接錯資料庫那位程序員被判7年徒刑)
因為上邊說的責任問題,所以實際游戲開發很多採用現成的游戲引擎,因為專做引擎的人要比自己寫代碼熟練.而製作游戲的人只需要設計游戲劇情和美術.
用引擎情況下,分美術,代碼開發,策劃,其中重要的是游戲策劃,代碼開發則是綁定美術和引擎.比如採用Unity(王者榮耀,使命召喚,俠客風雲傳)製作游戲,你只需要把美術的東西綁定,並不需要太多知識.
❷ 網頁游戲是什麼編寫的
網頁游戲也分很多種，一般市面上的網頁游戲就是沿用的網頁的交互模式，基於HTTP實現與伺服器的交互，這些游戲的後端可以使用任何Web開發語言來實現，比如PHP，Java，C#，http://VB.NET，Ruby，Python這些，都沒有問題。游戲的前端現在普遍依然使用Flash平台，開發語言就是ActionScript，比較前衛的游戲有使用HTML5的，就是JavaScript，還有一些社交平台上的游戲直接使用HTML頁面來做交互，有一些傳統游戲廠商轉過來做網頁游戲的也有採用ActiveX技術直接把現有的游戲移植過來的，這些游戲前端往往採用C＋＋這些來開發。有些游戲需要實時與伺服器交互（比如MMORPG），這些游戲的後端往往就是和傳統的網游一樣的架構，開發語言也一般會比較傳統的採用C+＋，也有一些採用Erlang來搞定網路及分布式計算的平台部分。值得一提的是Lua語言，Lua在網頁游戲的客戶端用的不多，但是在伺服器端依然有不少採用，主要是用在游戲的實際邏輯部分。
❸ h5游戲開發，前端要做什麼，後端java要做什麼，老闆讓我做後端，知道要鏈接資料庫
前端負責顯示游戲圖形圖象和控制游戲操作，接收用戶的數據，Java後端要接收客戶端的數據，並對數據進行過濾，邏輯判斷，存儲玩家信息。建議你添加一些Java伺服器開發群，不明白的地方可以在群裡面實時問，也可以看看別人在討論什麼，有助於自己學習
❹ 前端要開發游戲我的媽呀，各位給我個思路好嗎要學什麼東西拿什麼來做
h5 canvas 或者一些游戲引擎...一般前端只做很簡單的小游戲，移動端的
❺ 學習web前端能做游戲開發嗎
學習web前端能做游戲開發嗎。
學習Web前端是可以做游戲開發的，但是只能做一些休閑的小游戲，或者是做一些頁游的前端，總體而言，游戲的品質並不高，技術也會偏簡單一些。
想要做游戲的話，還是要學習一些專業的游戲引擎，以及go、c++等編程語言。
web開發主要還是用於開發Web應用程序。兩者分工還是不同的。
希望對你有幫助。
❻ 如何開發一個簡單的HTML5 Canvas 小游戲
創建畫布
// 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();