tank html5,index.html
经典的坦克大战
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相关推荐
- html5 index属性,深入理解CSS z-index属性
当你打开一个HTML页面的时候,你会不会注意到其实页面上的元素都是处于3D空间中的?HTML页面上的每一个元素不仅有X轴和Y轴属性,它还具有Z轴属性. CSS属性margin.float和其它位置属性 ...
- HTML5 新标签总汇
HTML5 新标签总汇 2010-12-16 20:44 聂微东 阅读(5060) 评论(8) 编辑 收藏 HTML5新标签总汇: 有问题欢迎指出,有关于CSS3方面的知识点较多,下周一 ...
- 前端:HTML5/36/HTML5简介,文档类型定义,网页字符集,页面结构标记,文章相关的标记,其它标记,音频标记,视频标记,表单中新增的属性,表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...
- 关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...
- HTML入门学习 -- HTML5 视频与音频
HTML5教程参见 http://www.w3school.com.cn/html5/index.asp HTML5对视频音频提供了原生支持,对图形图像也大大加强(除了IE10明确不支持WebGL以外 ...
- android webview video标签,Android WebView支持html5 video标签
看到这个标题很兴奋了吧,但是内容肯定会让你失望...这先告诉结果了,我没在2.3上搞出什么名堂来. 起因是项目需要在android 2.3.*的版本上调用有video标签的页面,调研是否支持.百度,g ...
- HTML5.笔记.案例
HTML 一 . html简介 1.HTML是什么? HTML:hyper text makrup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面 2.作 ...
- HTML5笔记+案例
HTML笔记 文件扩展名 Word.docx Excel.xlsx PPT.pptx 打开文件扩展名的方法: 或者: 一 . html简介 1.HTML是什么? HTML:Hyper Text Mar ...
- 如何学习HTML5?
如何 学习 HTML5 ?这个话题,问的人很多,随便百度一下就能看到各种各样的回答.不过感觉每种回答都不给力.下面我给出一个自己理解的HTML5学习的路线图,按照这个路线图学习以后,一般的HTML5项 ...
最新文章
- 独家 | Python 3.10发布——你应该知道的五大新特性
- java cutdown_Java并发程序入门介绍
- php5.6的apaches的dll_Windows 10下 搭建Apache2.4、php5.6、mysql5.6
- 谱聚类方法-MATLAB
- Go-Web框架-Beego架构(二)
- 【渝粤教育】国家开放大学2018年春季 0007-22T文书档案管理 参考试题
- 安卓应用安全指南 4.5.1 使用 SQLite 示例代码
- java webservice soap请求_使用Java对WebService的SOAP请求
- [NOI2014]魔法森林
- ILSpy .NET反编译工具下载地址
- 【TiChoo资讯站】
- 最新高级JAVA架构师之路(价值3万元+年薪百万计划)
- 格雷码和二进制的转换及典型例题(4bits格雷码计数器)
- 如何做抖音小程序赚钱?抖音小程序怎么赚钱?抖音最简单的赚钱方式
- 核磁共振成像读片指南(一)
- layui外部引入_layui use 定义js外部引用函数的方法
- 添加、修改、删除以及查看本地git的用户名和邮箱
- 【java-日志组件】slf4j+logback配置及详解
- 【Python 实战基础】Pandas如何输出表格数据标题名称列表
- 开源工具利器之基于主机的IDS:Wazuh
热门文章
- vscode安装设置go
- Hadoop生态圈-Hive的自定义函数之UDF(User-Defined-Function)
- Vue 进入/离开动画
- oracle查看列数据类型
- Linux tmux分屏工具
- the 12th UESTC Programming Contest Final Justice is Given by Light (几何+ 二分)
- Qt学习之路_1(安装及首次体验)
- 生成ssh key (Mac Linux )
- worktools-源码下拉问题
- 每日站立会议4-20(张硕)