文章目录

1.设计来源
- 1.1 游戏主界面
- 1.2 游戏界面
2.效果和源码
- 2.1 动态效果
- 2.2 源代码
源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/130617759

html实现经典坦克大战小游戏 ,这是一款很老的游戏，相信大家都有玩过，基本操作方法：玩家1：W A S D 上左下右，SPACE 射击；玩家2： ↑ ← ↓ → 上左下右，ENTER 射击。N 下一关，P 上一关。基本功能都实现，简单易上手。用 html+js+css+canvas 实现，可以借用上手学习。

1.设计来源

1.1 游戏主界面

游戏主界面，有游戏面板，游戏规则面板组成。

1.2 游戏界面

通过操作自己的坦克，攻击敌方坦克，墙分为实体墙，加固墙，普通墙，不同的墙需要攻击次数不一样；敌方坦克也有不一样的防御力，攻击次数也不一样。

胜利： 攻击掉所有敌方坦克；
失败： 敌方坦克攻击掉自己的核心堡垒。

2.效果和源码

2.1 动态效果

html实现经典坦克大战小游戏

2.2 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html><head><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"> <title>经典坦克大战小游戏 - xcLeigh</title><link rel="icon" type="image/png" href="images/favicon.ico" /> <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><link rel="stylesheet" type="text/css" href="css/default.css" /></head><body><div class="container"><div class="main clearfix"><div id="canvasDiv" style="margin-top: 60px;" ><canvas id="wallCanvas" ></canvas> <canvas id="tankCanvas" ></canvas><canvas id="grassCanvas" ></canvas><canvas id="overCanvas" ></canvas> <canvas id="stageCanvas" ></canvas></div></div></div><!-- 四个角链接，底部说明 --><div style="position:absolute;left:0;top:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0F85F4;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/127635252" title="html实现飞机小游戏(源码)" target="_blank" style="text-decoration:none; font-weight:bold">打飞机</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div style="position:absolute;right:0;top:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0BABC4;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/127631871" title="html实现贪吃蛇游戏(源码)" target="_blank" style="text-decoration:none; font-weight:bold">贪吃蛇</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div style="position:absolute;right:0;bottom:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:red;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" title="html制作好看的五子棋（源码）" target="_blank" style="text-decoration:none; font-weight:bold">五子棋</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div style="position:absolute;left:0;bottom:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:orange;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/127886480" title="html实现扫雷小游戏(附源码)" target="_blank" style="text-decoration:none; font-weight:bold;">扫雷</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div  style="position:absolute;left:0;bottom:0; width:100%;height:70px; line-height:30px; text-align:center; z-index:99;"><div style="color:white;">玩家1：<b style="color:orange;">W A S D </b> 上左下右，<b style="color:orange;">SPACE</b> 射击；玩家2：<b style="color:orange;"> ↑ ← ↓  → </b> 上左下右，<b style="color:orange;">ENTER</b> 射击。<b style="color:orange;">N</b> 下一关，<b style="color:orange;">P</b> 上一关。</div><a href="https://blog.csdn.net/weixin_43151418" target="_blank" style="text-decoration:none; font-weight:bold;color:white;">xcLeigh | 星空系列 | 经典赛车小游戏</a></div></body>
</html>

源码下载

html实现经典坦克大战小游戏（源码）点击下载

html实现经典坦克大战小游戏相关推荐

Java实现的经典坦克大战小游戏
Java实现的经典坦克大战小游戏先看一下游戏结构: 有点多,没有耐心的可以不用看,这里先给出链接吧! 云链接:经典坦克大战提取码:s9ai 这里就不介绍功能了,贴了一张游戏运行的截图,具体的功能自 ...
用python做一个坦克小游戏_Python制作经典坦克大战小游戏
image.png 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块. 环境搭建安装Python并添加到环境变量,pip安装需要的相关模块即可. ...
【JAVA程序设计】基于JAVA的坦克大战小游戏--入门级小游戏
基于JAVA的坦克大战小游戏--入门级小游戏零.项目获取一.项目简介二.开发环境三.游戏玩法四.运行截图零.项目获取获取方式(点击下载):是云猿实战项目经过多人测试运行,可以确保100 ...
《HTML5经典坦克大战》游戏（代码）
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
C++实用编程——坦克大战小游戏
C++实用编程--坦克大战小游戏 Warning: 转载类原文地址:*HTML https://yq.aliyun.com/articles/683666 改变速度的玩意坏了我们直接看代码吧,适于 ...
【180930】坦克大战小游戏源码
坦克大战小游戏源码程序实现了小霸王游戏机上坦克大战的功能,主要功能是开火.移动.3种不同的敌方坦克.用户自制地图等,缺点是有些小细节还处理的不好,感觉画面不够好,还没实现自动的下一关功能(主要是嫌做默 ...
canvas+js实现简单的坦克大战小游戏
使用canvas和js实现经典的坦克大战并不难,坦克和炮弹的绘制可以使用canvas的里API画出,而坦克的移动和炮弹的发射可以依赖于键盘事件和定时器来实现. 在这里我要实现的坦克大战是双人模式,有木 ...
一小时制作java坦克大战小游戏
<坦克大战>是由日本南梦宫Namco游戏公司开发的一款平面射击游戏,于1985年发售.游戏以坦克战斗及保卫基地为主题,属于策略型联机类. 同时也是FC平台上少有的内建关卡编辑器的几个游戏之 ...
python3小游戏代码教程_Python3制作仿“经典90坦克大战”小游戏|python3教程|python入门|python教程...
https://www.xin3721.com/eschool/pythonxin3721/ 本文转载至知乎ID:Charles(白露未晞)知乎个人专栏下载W3Cschool手机App,0基础随时随 ...