TankGame1

经典的坦克大战

var page = document.getElementById('page');

var canvas = document.getElementById('tankMap');

var cxt = canvas.getContext("2d");

var key = []

var heroColor = ['#6699CC' , '#006699']

var hero = new Hero(225 ,470 ,0 ,heroColor);

hero.speed = 5;

curMap = 0;

var enemies = map[curMap].enemies.slice(0);

var showEnemies = enemies.splice(0,4);

var bricks = map[curMap].bricks.slice(0);

var steels = map[curMap].steels.slice(0);

var endTimer=null;

function flashMap() {

cxt.clearRect ( 0 , 0, 1200, 600 );

keyEvent();

if( !endTimer && showEnemies.length === 0 ){

endTimer = setTimeout( function(){

console.log('Game over')

clearInterval(flashInterval);

drawEnd();

if(curMap < map.length) curMap++;

else{

console.log('游戏完全结束');

alert('恭喜你通关了!刷新页面重新闯关');

return;

}

enemies = map[curMap].enemies.slice(0);

showEnemies = enemies.splice(0,4);

bricks = map[curMap].bricks.slice(0);

steels = map[curMap].steels.slice(0);

endTimer=null;

hero.x = 225;

hero.y = 470;

setTimeout(function(){

for (var i = 0; i < showEnemies.length; i++) {

enemyRun( showEnemies[i] ,i );

}

flashInterval = setInterval( flashMap,13 );

},5000);

} , 5000)

}

drawTank( hero );

for (var i = 0; i < showEnemies.length; i++) {

drawTank( showEnemies[i] );

if( showEnemies.length < 4 && enemies.length !== 0 ){

var newEnemy = enemies.splice(0,1)[0];

showEnemies.push( newEnemy );

enemyRun( newEnemy )

}

}

drawHeroLife();

for (var i = 0; i < bricks.length; i++) {

drawBrick(bricks[i])

}

for (var i = 0; i < steels.length; i++) {

drawSteel(steels[i]);

}

}

// 刷新重绘

var flashInterval = setInterval( flashMap,13 );

// 敌机AI

// 自由移动发射

for (var i = 0; i < showEnemies.length; i++) {

enemyRun( showEnemies[i] ,i );

}

function enemyRun(itemEnemy){

var direct = 2;

var count = 0;

var steps = 80;

itemEnemy.timer = setInterval(function () {

if( count > steps ){

direct = parseInt(Math.random() * 4);

count = -direct;

steps = parseInt(Math.random() * 200);

}

count++;

var dir = ['moveUp' , 'moveRight' , 'moveDown' , 'moveLeft'];

itemEnemy[ dir[ direct ] ]();

// 敌机子弹发射频率

if( !itemEnemy.fireTimer ){

itemEnemy.fireTimer = setTimeout(function(){

itemEnemy.fire();

itemEnemy.fireTimer = null;

},parseInt(Math.random() * 5000));

}

}, 2 * 15 / itemEnemy.speed );

}

// 英雄操作

page.onkeydown = function (ev) {

var ev = ev || window.event;

var keycode = ev.keyCode;

// console.log(ev);

if( !key.contain( keycode ) ) key.push( keycode );

//switch( keycode ){

//case 87: // up

//if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveUp();} , 30);

//break;

//case 68: // right

//if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveRight();} , 30);

//break;

//case 83: // down

//if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveDown();} , 30);

//break;

//case 65: // left

//if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveLeft();} , 30);

//break;

//case 74: // J

//hero.fire();

//break;

//}

}

page.onkeyup = function (ev) {

var ev = ev || window.event;

var keycode = ev.keyCode;

key.remove( keycode );

//switch( keycode ){

//case 87: // up

//clearInterval( hero.moveTimer );

//hero.moveTimer = null;

//break;

//case 68: // right

//clearInterval( hero.moveTimer );

//hero.moveTimer = null;

//break;

//case 83: // down

//clearInterval( hero.moveTimer );

//hero.moveTimer = null;

//break;

//case 65: // left

//clearInterval( hero.moveTimer );

//hero.moveTimer = null;

//break;

//case 74: // J

//hero.fire();

//break;

//}

}

function keyEvent(){

if( key.contain( UP ) ){

hero.moveUp();

}else if( key.contain( RIGHT ) ){

hero.moveRight();

}else if( key.contain( LEFT ) ){

hero.moveLeft();

}else if( key.contain( DOWN ) ){

hero.moveDown();

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

tank html5,index.html相关推荐

  1. html5 index属性,深入理解CSS z-index属性

    当你打开一个HTML页面的时候,你会不会注意到其实页面上的元素都是处于3D空间中的?HTML页面上的每一个元素不仅有X轴和Y轴属性,它还具有Z轴属性. CSS属性margin.float和其它位置属性 ...

  2. HTML5 新标签总汇

    HTML5 新标签总汇 2010-12-16 20:44  聂微东  阅读(5060)  评论(8)  编辑  收藏 HTML5新标签总汇:   有问题欢迎指出,有关于CSS3方面的知识点较多,下周一 ...

  3. 前端:HTML5/36/HTML5简介,文档类型定义,网页字符集,页面结构标记,文章相关的标记,其它标记,音频标记,视频标记,表单中新增的属性,表单input元素type属性的值

    HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...

  4. 关于HTML5中Video标签无法播放mp4的解决办法

    1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...

  5. HTML入门学习 -- HTML5 视频与音频

    HTML5教程参见 http://www.w3school.com.cn/html5/index.asp HTML5对视频音频提供了原生支持,对图形图像也大大加强(除了IE10明确不支持WebGL以外 ...

  6. android webview video标签,Android WebView支持html5 video标签

    看到这个标题很兴奋了吧,但是内容肯定会让你失望...这先告诉结果了,我没在2.3上搞出什么名堂来. 起因是项目需要在android 2.3.*的版本上调用有video标签的页面,调研是否支持.百度,g ...

  7. HTML5.笔记.案例

    HTML 一 . html简介 1.HTML是什么? HTML:hyper text makrup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面 2.作 ...

  8. HTML5笔记+案例

    HTML笔记 文件扩展名 Word.docx Excel.xlsx PPT.pptx 打开文件扩展名的方法: 或者: 一 . html简介 1.HTML是什么? HTML:Hyper Text Mar ...

  9. 如何学习HTML5?

    如何 学习 HTML5 ?这个话题,问的人很多,随便百度一下就能看到各种各样的回答.不过感觉每种回答都不给力.下面我给出一个自己理解的HTML5学习的路线图,按照这个路线图学习以后,一般的HTML5项 ...

最新文章

  1. 独家 | Python 3.10发布——你应该知道的五大新特性
  2. java cutdown_Java并发程序入门介绍
  3. php5.6的apaches的dll_Windows 10下 搭建Apache2.4、php5.6、mysql5.6
  4. 谱聚类方法-MATLAB
  5. Go-Web框架-Beego架构(二)
  6. 【渝粤教育】国家开放大学2018年春季 0007-22T文书档案管理 参考试题
  7. 安卓应用安全指南 4.5.1 使用 SQLite 示例代码
  8. java webservice soap请求_使用Java对WebService的SOAP请求
  9. [NOI2014]魔法森林
  10. ILSpy .NET反编译工具下载地址
  11. 【TiChoo资讯站】
  12. 最新高级JAVA架构师之路(价值3万元+年薪百万计划)
  13. 格雷码和二进制的转换及典型例题(4bits格雷码计数器)
  14. 如何做抖音小程序赚钱?抖音小程序怎么赚钱?抖音最简单的赚钱方式
  15. 核磁共振成像读片指南(一)
  16. layui外部引入_layui use 定义js外部引用函数的方法
  17. 添加、修改、删除以及查看本地git的用户名和邮箱
  18. 【java-日志组件】slf4j+logback配置及详解
  19. 【Python 实战基础】Pandas如何输出表格数据标题名称列表
  20. 开源工具利器之基于主机的IDS:Wazuh

热门文章

  1. vscode安装设置go
  2. Hadoop生态圈-Hive的自定义函数之UDF(User-Defined-Function)
  3. Vue 进入/离开动画
  4. oracle查看列数据类型
  5. Linux tmux分屏工具
  6. the 12th UESTC Programming Contest Final Justice is Given by Light (几何+ 二分)
  7. Qt学习之路_1(安装及首次体验)
  8. 生成ssh key (Mac Linux )
  9. worktools-源码下拉问题
  10. 每日站立会议4-20(张硕)