當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )...

發布時間：2023/12/10 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

坦克大戰js小游戲源碼 HTML5坦克大戰游戲代碼(HTML+CSS+JavaScript )

HTML5坦克大戰網頁小游戲，完美還原小霸王學習機效果，以坦克戰斗及保衛基地為主題，屬于策略型類游戲。

游戲介紹

操作說明：：玩家1：wasd上左下右，space射擊；玩家2：方向鍵，enter射擊。n下一關，p上一關。

游戲的設計思路

1、要有作戰區域，這有canvas 可以幫我們解決。2、要有坦克，包括自己的、敵人的。3、要能有子彈，包括自己的、敵人的。4、要有炸彈。5、我的坦克要能按鍵發射子彈，敵人的坦克要能連續自動發射子彈。6、我的子彈打到敵人時子彈要消失，同時敵人爆炸并消失，不能再發子彈。以上是游戲設計的簡單思路，這是初步設計，接下來以代碼來分析詳細的設計過程：

文章目錄

坦克大戰js小游戲源碼 HTML5坦克大戰游戲代碼(HTML+CSS+JavaScript )
游戲介紹
游戲的設計思路
一、游戲演示
二、代碼目錄
三、代碼實現
- 1.繪制子彈
- 2.檢測碰撞
- 3.繪制菜單
- 4.繪制坦克
四、web前端入門到高級(視頻+源碼+資料+面試)一整套 (教程)
五、源碼獲取
六、更多HTML期末大作業(成品下載)
- >>>戳我>>>點擊進入200例期末大作業作品

一、游戲演示

二、代碼目錄

三、代碼實現  <!DOCTYPE html> <html lang="zh" class="no-js demo-1"><head><title>坦克大戰js小游戲源碼 HTML5坦克大戰游戲代碼 </title><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="js/jquery.min.js"></script><script src="js/Helper.js"></script><script src="js/keyboard.js"></script><script src="js/const.js"></script><script src="js/level.js"></script><script src="js/crackAnimation.js"></script><script src="js/prop.js"></script><script src="js/bullet.js"></script><script src="js/tank.js"></script><script src="js/num.js"></script><script src="js/menu.js"></script><script src="js/map.js"></script><script src="js/Collision.js"></script><script src="js/stage.js"></script><script src="js/main.js"></script><style type="text/css">#canvasDiv canvas {position: absolute;}#canvasDiv {position: absolute;left: 30%;}</style> </head> <body><div class="container"><center><head><h3>操作說明：玩家1：wasd上左下右，space射擊；玩家2：方向鍵，enter射擊。n下一關，p上一關。</h3></head></center><div class="main clearfix"><div id="canvasDiv"><canvas id="wallCanvas"></canvas><canvas id="tankCanvas"></canvas><canvas id="grassCanvas"></canvas><canvas id="overCanvas"></canvas><canvas id="stageCanvas"></canvas></div></div></div> </body> </html>

1.繪制子彈

1.碰撞檢測,2.臨界檢測,3.判斷子彈是否碰撞了其他子彈4.是否擊中坦克

2.檢測碰撞

1.檢測2個物體是否碰撞2.坦克與地圖塊碰撞3.子彈與地圖塊的碰撞

/*** 檢測2個物體是否碰撞* @param object1 物體1* @param object2 物體2* @param overlap 允許重疊的大小* @returns {Boolean} 如果碰撞了，返回true*/ function CheckIntersect(object1, object2, overlap) {// x-軸 x-軸// A1------>B1 C1 A2------>B2 C2// +--------+ ^ +--------+ ^// | object1| | y-軸 | object2| | y-軸// | | | | | |// +--------+ D1 +--------+ D2////overlap是重疊的區域值A1 = object1.x + overlap;B1 = object1.x + object1.size - overlap;C1 = object1.y + overlap;D1 = object1.y + object1.size - overlap;A2 = object2.x + overlap;B2 = object2.x + object2.size - overlap;C2 = object2.y + overlap;D2 = object2.y + object2.size - overlap;//假如他們在x-軸重疊if (A1 >= A2 && A1 <= B2 ||B1 >= A2 && B1 <= B2) {//判斷y-軸重疊if (C1 >= C2 && C1 <= D2 || D1 >= C2 && D1 <= D2) {return true;}}return false; }/*** 坦克與地圖塊碰撞* @param tank 坦克對象* @param mapobj 地圖對象* @returns {Boolean} 如果碰撞，返回true*/ function tankMapCollision(tank, mapobj) {//移動檢測，記錄最后一次的移動方向，根據方向判斷+-overlap,var tileNum = 0; //需要檢測的tile數var rowIndex = 0; //map中的行索引var colIndex = 0; //map中的列索引var overlap = 3; //允許重疊的大小//根據tank的x、y計算出map中的row和colif (tank.dir == UP) {rowIndex = parseInt((tank.tempY + overlap - mapobj.offsetY) / mapobj.tileSize);colIndex = parseInt((tank.tempX + overlap - mapobj.offsetX) / mapobj.tileSize);} else if (tank.dir == DOWN) {//向下，即dir==1的時候，行索引的計算需要+tank.HeightrowIndex = parseInt((tank.tempY - overlap - mapobj.offsetY + tank.size) / mapobj.tileSize);colIndex = parseInt((tank.tempX + overlap - mapobj.offsetX) / mapobj.tileSize);} else if (tank.dir == LEFT) {rowIndex = parseInt((tank.tempY + overlap - mapobj.offsetY) / mapobj.tileSize);colIndex = parseInt((tank.tempX + overlap - mapobj.offsetX) / mapobj.tileSize);} else if (tank.dir == RIGHT) {rowIndex = parseInt((tank.tempY + overlap - mapobj.offsetY) / mapobj.tileSize);//向右，即dir==3的時候，列索引的計算需要+tank.HeightcolIndex = parseInt((tank.tempX - overlap - mapobj.offsetX + tank.size) / mapobj.tileSize);}if (rowIndex >= mapobj.HTileCount || rowIndex < 0 || colIndex >= mapobj.wTileCount || colIndex < 0) {return true;}if (tank.dir == UP || tank.dir == DOWN) {var tempWidth = parseInt(tank.tempX - map.offsetX - (colIndex) * mapobj.tileSize + tank.size - overlap); //去除重疊部分if (tempWidth % mapobj.tileSize == 0) {tileNum = parseInt(tempWidth / mapobj.tileSize);} else {tileNum = parseInt(tempWidth / mapobj.tileSize) + 1;}for (var i = 0; i < tileNum && colIndex + i < mapobj.wTileCount; i++) {var mapContent = mapobj.mapLevel[rowIndex][colIndex + i];if (mapContent == WALL || mapContent == GRID || mapContent == WATER || mapContent == HOME || mapContent == ANOTHREHOME) {if (tank.dir == UP) {tank.y = mapobj.offsetY + rowIndex * mapobj.tileSize + mapobj.tileSize - overlap;} else if (tank.dir == DOWN) {tank.y = mapobj.offsetY + rowIndex * mapobj.tileSize - tank.size + overlap;}return true;}}}/*** 子彈與地圖塊的碰撞* @param bullet 子彈對象* @param mapobj 地圖對象*/ function bulletMapCollision(bullet, mapobj) {var tileNum = 0; //需要檢測的tile數var rowIndex = 0; //map中的行索引var colIndex = 0; //map中的列索引var mapChangeIndex = []; //map中需要更新的索引數組var result = false; //是否碰撞//根據bullet的x、y計算出map中的row和colif (bullet.dir == UP) {rowIndex = parseInt((bullet.y - mapobj.offsetY) / mapobj.tileSize);colIndex = parseInt((bullet.x - mapobj.offsetX) / mapobj.tileSize);} else if (bullet.dir == DOWN) {//向下，即dir==1的時候，行索引的計算需要+bullet.HeightrowIndex = parseInt((bullet.y - mapobj.offsetY + bullet.size) / mapobj.tileSize);colIndex = parseInt((bullet.x - mapobj.offsetX) / mapobj.tileSize);} else if (bullet.dir == LEFT) {rowIndex = parseInt((bullet.y - mapobj.offsetY) / mapobj.tileSize);colIndex = parseInt((bullet.x - mapobj.offsetX) / mapobj.tileSize);} else if (bullet.dir == RIGHT) {rowIndex = parseInt((bullet.y - mapobj.offsetY) / mapobj.tileSize);//向右，即dir==3的時候，列索引的計算需要+bullet.HeightcolIndex = parseInt((bullet.x - mapobj.offsetX + bullet.size) / mapobj.tileSize);}if (rowIndex >= mapobj.HTileCount || rowIndex < 0 || colIndex >= mapobj.wTileCount || colIndex < 0) {return true;}if (bullet.dir == UP || bullet.dir == DOWN) {var tempWidth = parseInt(bullet.x - map.offsetX - (colIndex) * mapobj.tileSize + bullet.size);if (tempWidth % mapobj.tileSize == 0) {tileNum = parseInt(tempWidth / mapobj.tileSize);} else {tileNum = parseInt(tempWidth / mapobj.tileSize) + 1;}for (var i = 0; i < tileNum && colIndex + i < mapobj.wTileCount; i++) {var mapContent = mapobj.mapLevel[rowIndex][colIndex + i];if (mapContent == WALL || mapContent == GRID || mapContent == HOME || mapContent == ANOTHREHOME) {//bullet.distroy();result = true;if (mapContent == WALL) {//墻被打掉mapChangeIndex.push([rowIndex, colIndex + i]);} else if (mapContent == GRID) {} else {isGameOver = true;break;}}}}//更新地圖map.updateMap(mapChangeIndex, 0);return result; }

3.繪制菜單

1.畫菜單2.畫選擇坦克3.畫背景4.畫選擇坦克

/*** 游戲開始菜單**/var Menu = function(context) {this.ctx = context;this.x = 0;this.y = SCREEN_HEIGHT;this.selectTank = new SelectTank();this.playNum = 1;this.times = 0;/*** 畫菜單*/this.draw = function() {this.times++;var temp = 0;if (parseInt(this.times / 6) % 2 == 0) {temp = 0;} else {temp = this.selectTank.size;}if (this.y <= 0) {this.y = 0;} else {this.y -= 5;}this.ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);this.ctx.save();//畫背景this.ctx.drawImage(MENU_IMAGE, this.x, this.y);//畫選擇坦克this.ctx.drawImage(RESOURCE_IMAGE, POS["selectTank"][0], POS["selectTank"][1] + temp, this.selectTank.size, this.selectTank.size,this.selectTank.x, this.y + this.selectTank.ys[this.playNum - 1], this.selectTank.size, this.selectTank.size);this.ctx.restore();};/*** 選擇坦克上下移動*/this.next = function(n) {this.playNum += n;if (this.playNum > 2) {this.playNum = 1;} else if (this.playNum < 1) {this.playNum = 2;}}; };

4.繪制坦克

1.坦克基類2.臨界檢測3.碰撞檢測4.地圖檢測

/*** 坦克基類* @returns*/ var Tank = function() {this.x = 0;this.y = 0;this.size = 32; //坦克的大小this.dir = UP; //方向0：上 1：下 2：左3：右this.speed = 1; //坦克的速度this.frame = 0; //控制敵方坦克切換方向的時間this.hit = false; //是否碰到墻或者坦克this.isAI = false; //是否自動this.isShooting = false; //子彈是否在運行中this.bullet = null; //子彈this.shootRate = 0.6; //射擊的概率this.isDestroyed = false;this.tempX = 0;this.tempY = 0;/*** 碰撞檢測*/this.isHit = function() {//臨界檢測if (this.dir == LEFT) {if (this.x <= map.offsetX) {this.x = map.offsetX;this.hit = true;}} else if (this.dir == RIGHT) {if (this.x >= map.offsetX + map.mapWidth - this.size) {this.x = map.offsetX + map.mapWidth - this.size;this.hit = true;}} else if (this.dir == UP) {if (this.y <= map.offsetY) {this.y = map.offsetY;this.hit = true;}} else if (this.dir == DOWN) {if (this.y >= map.offsetY + map.mapHeight - this.size) {this.y = map.offsetY + map.mapHeight - this.size;this.hit = true;}}if (!this.hit) {//地圖檢測if (tankMapCollision(this, map)) {this.hit = true;}}/*** 射擊*/this.shoot = function(type) {if (this.isAI && emenyStopTime > 0) {return;}if (this.isShooting) {return;} else {var tempX = this.x;var tempY = this.y;this.bullet = new Bullet(this.ctx, this, type, this.dir);if (this.dir == UP) {tempX = this.x + parseInt(this.size / 2) - parseInt(this.bullet.size / 2);tempY = this.y - this.bullet.size;} else if (this.dir == DOWN) {tempX = this.x + parseInt(this.size / 2) - parseInt(this.bullet.size / 2);tempY = this.y + this.size;} else if (this.dir == LEFT) {tempX = this.x - this.bullet.size;tempY = this.y + parseInt(this.size / 2) - parseInt(this.bullet.size / 2);} else if (this.dir == RIGHT) {tempX = this.x + this.size;tempY = this.y + parseInt(this.size / 2) - parseInt(this.bullet.size / 2);}};/*** 坦克被擊毀*/this.distroy = function() {this.isDestroyed = true;crackArray.push(new CrackAnimation(CRACK_TYPE_TANK, this.ctx, this));TANK_DESTROY_AUDIO.play();}; };/*** 玩家坦克* @param context 畫坦克的畫布* @returns*/ var PlayTank = function(context) {this.ctx = context;this.lives = 3; //生命值this.isProtected = true; //是否受保護this.protectedTime = 500; //保護時間this.offsetX = 0; //坦克2與坦克1的距離this.speed = 2; //坦克的速度this.draw = function() {this.hit = false;this.ctx.drawImage(RESOURCE_IMAGE, POS["player"][0] + this.offsetX + this.dir * this.size, POS["player"][1], this.size, this.size, this.x, this.y, this.size, this.size);if (this.isProtected) {var temp = parseInt((500 - this.protectedTime) / 5) % 2;this.ctx.drawImage(RESOURCE_IMAGE, POS["protected"][0], POS["protected"][1] + 32 * temp, 32, 32, this.x, this.y, 32, 32);this.protectedTime--;if (this.protectedTime == 0) {this.isProtected = false;}}};}; EnemyOne.prototype = new Tank(); 四、web前端入門到高級(視頻+源碼+資料+面試)一整套 (教程)

web前端零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

五、源碼獲取

? 2.關注我 ~ 每天帶你學習 :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

?3.以上內容技術相關問題可以相互學習，可關注↓公Z號獲取更多源碼 !

六、更多HTML期末大作業(成品下載)

>>>戳我>>>點擊進入200例期末大作業作品

200多例 HTML5期末考核大作業源碼包含個人、美食、公司、學校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、明星、服裝、體育、化妝品、物流、環保、書籍、婚紗、軍事、游戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!

總結

以上是生活随笔為你收集整理的100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： .net mysql-connector
下一篇： BZOJ 1016--[JSOI2008