最后编辑:2026-06-05
- 资源介绍
- 更新记录
- 安装教程
网页坦克大战小游戏源码，坦克页面小游戏，经典90版html坦克大战游戏代码。
电脑键盘操作说明：
玩家1：wasd上左下右，space(空格键)射击;
玩家2：方向键，enter射击。n下一关，p上一关。
html页面代码
- <!DOCTYPE html>
- <html lang=“zh” class=“no-js demo-1”>
- <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”>
- <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” />
- <style type=“text/css”>
- #canvasDiv canvas{
- position:absolute;
- }
- </style>
- </head>
- <body>
- <div class=“container”>
- <head>
- <h3>操作说明：玩家1：wasd上左下右，space(空格键)射击；玩家2：方向键，enter射击。n下一关，p上一关。</h3>
- </head>
- <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><!– /container –>
- </body>
- </htm
部分js代码
- var Stage = function(context,l){
- this.ctx = context;
- this.ctx.fillStyle = “#7f7f7f”;
- this.drawHeigth = 15;
- this.level = l;
- this.temp = 0;
- this.dir = 1; //中间切换的方向，1：合上，2：展开
- this.isReady = false;//标识地图是否已经画好
- this.levelNum = new Num(context);
- this.init = function(level){
- this.dir = 1;
- this.isReady = false;
- this.level = level;
- this.temp = 0;
- };
- this.draw = function(){
- if(this.dir == 1){
- //temp = 15*15 灰色屏幕已经画完
- if(this.temp == 225){
- //78,14为STAGE字样在图片资源中的宽和高，194,208为canvas中的位置
- this.ctx.drawImage(RESOURCE_IMAGE, POS[“stageLevel”][0], POS[“stageLevel”][1], 78, 14, 194, 208, 78, 14);
- //14为数字的宽和高，308, 208为canvas中的位置
- this.levelNum.draw(this.level,308, 208);
- //this.ctx.drawImage(RESOURCE_IMAGE,POS[“num”][0]+this.level*14,POS[“num”][1],14, 14,308, 208,14, 14);
- //绘制地图,调用main里面的方法
- initMap();
- }else if(this.temp == 225 + 600){
- //600即调用了600/15次，主要用来停顿
- this.temp = 225;
- this.dir = –1;
- START_AUDIO.play();
- }else{
- this.ctx.fillRect(0, this.temp, 512, this.drawHeigth);
- this.ctx.fillRect(0, 448 – this.temp – this.drawHeigth , 512, this.drawHeigth);
- }
- }else{
- if(this.temp >= 0){
- this.ctx.clearRect(0, this.temp , 512, this.drawHeigth);
- this.ctx.clearRect(0, 448 – this.temp – this.drawHeigth, 512, this.drawHeigth);
- }else{
- this.isReady = true;
- }
- }
- this.temp += this.drawHeigth * this.dir;
- };
- };
猜你在找
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 大资源
- 2026-06-05Hi,初次和大家见面了,请多关照！
