HTML5之坦克大战游戏开发
1.在使用arc方法进行画圆时,在IE9+，FF，Safari，Chrome等已经支持HTML5标准的浏览器中进行渲染时，采用逆时针方向画时，也就是说
arc(x, y, radius, startAngle, endAngle, counterclockwise) 中 counterclockwise值为true时，渲染存在问题。
解决方法：采用顺时针，即counterclockwise值为false
补充说明：在360安全浏览器中两种方法都可以。
2.移动坦克
<!Doctype html>
<html>
<head>
<meta charset='utf-8'/>
</head>
<body onkeydown="moveTank()">
<canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas>
<script type="text/javascript"> //获取画布
var canvas_1 = document.getElementById("canvas"); //获取上下文
var cxt = canvas_1.getContext("2d"); //坦克构造函数
function Tank(x,y,direct)
{
this.x = x;
this.y = y;
this.speed = 1;
this.direct = direct;
this.moveUp = function()
{
this.y-= this.speed;
} this.moveRight = function()
{
this.x+= this.speed;
} this.moveDown = function()
{
this.y+= this.speed;
} this.moveLeft = function()
{
this.x-= this.speed;
}
} var tank = new Tank(10,10,0); drawTank(tank); //画坦克
function drawTank(tank)
{
//设置画笔颜色
cxt.fillStyle="#DED284"; //画坦克左边轮子
cxt.fillRect(tank.x,tank.y,5,30); //画坦克右边的轮子
cxt.fillRect(tank.x+15,tank.y,5,30); //画坦克主体
cxt.fillRect(tank.x+6,tank.y+5,8,20); //画坦克盖子
cxt.fillStyle="#FFD972";
cxt.arc(tank.x+10,tank.y+15,4,0,360,false);
cxt.fill(); //画坦克炮筒
cxt.strokeStyle="#FFD972";
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(tank.x+10,tank.y+15);
cxt.lineTo(tank.x+10,tank.y);
cxt.closePath();
cxt.stroke();
} //移动坦克
function moveTank()
{
var code = event.keyCode; switch(code)
{
case 87: tank.moveUp();break;
case 68: tank.moveRight();break;
case 83: tank.moveDown();break;
case 65: tank.moveLeft();break;
} //清除画布内容
cxt.clearRect(0,0,500,500); drawTank(tank);
}
</script>
</body>
</html>
3.根据按键的方向来画坦克(运用OOP思想)
注：先插播一段上、下、左、右 按键的js代码
//获取canvas dom对象
var can = document.getElementById("move"); //获取画笔对象
var cxt = can.getContext("2d"); var ballX = 30;
var ballY = 30; drawBall(); //画圆
function drawBall()
{
cxt.beginPath();
cxt.fillStyle = "red";
cxt.arc(ballX,ballY,10,0,360,false);
cxt.closePath(); cxt.fill();
} function moveBall()
{
var code = event.keyCode;
switch(code)
{
case 87: ballY--;break;
case 83: ballY++;break;
case 65: ballX--;break;
case 68: ballX++;break;
} //每次重画之前要清除画布
cxt.clearRect(0,0,400,300); drawBall();
}
在drawTank方法中通过 语法switch case 来根据按键方向画tank.关键是要找准参考点
function drawTank(tank)
{
switch(tank.direct)
{
//向上
case 0:
//向下
case 2:
//添加画tank代码
//cxt
break; //向右
case 1:
//向左
case 3:
break;
}
}
第一阶段学习汇报，哈哈，my tank moves freely
<!Doctype html>
<html>
<head>
<meta charset='utf-8'/>
<script type="text/javascript" src="tank.js"></script>
<script type="text/javascript" src="move.js"></script>
</head>
<body onkeydown="moveTank()" onload="initTank()">
<canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas>
</body>
</html>
//坦克构造函数
function Tank(x,y,direct)
{
this.x = x;
this.y = y;
this.speed = 1;
this.direct = direct;
this.moveUp = function()
{
this.y-= this.speed;
this.direct = 0;
} this.moveRight = function()
{
this.x+= this.speed;
this.direct = 1;
} this.moveDown = function()
{
this.y+= this.speed;
this.direct = 2;
} this.moveLeft = function()
{
this.x-= this.speed;
this.direct = 3;
}
}
var tank;
var canvas_1;
var cxt; function initTank()
{
//获取画布
canvas_1 = document.getElementById("canvas"); //获取上下文
cxt = canvas_1.getContext("2d"); tank = new Tank(10,10,0); drawTank(tank);
} //画坦克
function drawTank(tank)
{
switch(tank.direct)
{
//向上和向下
case 0:
case 2:
//设置画笔颜色
cxt.fillStyle="#DED284"; //画坦克左边轮子
cxt.fillRect(tank.x,tank.y,5,30); //画坦克右边的轮子
cxt.fillRect(tank.x+15,tank.y,5,30); //画坦克主体
cxt.fillRect(tank.x+6,tank.y+5,8,20); //画坦克盖子
cxt.fillStyle="#FFD972";
cxt.arc(tank.x+10,tank.y+15,4,0,360,false);
cxt.fill(); //画坦克炮筒
cxt.strokeStyle="#FFD972";
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(tank.x+10,tank.y+15); //上和下主要就是tank的炮筒的方向的改变
if(0 == tank.direct)
{
cxt.lineTo(tank.x+10,tank.y);
}
else if(2 == tank.direct)
{
cxt.lineTo(tank.x+10,tank.y+30);
}
cxt.closePath();
cxt.stroke();
break; //向左和向右
case 1:
case 3:
cxt.fillStyle="#DED284";
cxt.fillRect(tank.x,tank.y,30,5);
cxt.fillRect(tank.x,tank.y+15,30,5);
cxt.fillRect(tank.x+5,tank.y+6,20,8); cxt.fillStyle="#FFD972";
cxt.arc(tank.x+15,tank.y+10,4,0,360,false);
cxt.fill(); cxt.strokeStyle="#FFD972";
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(tank.x+15,tank.y+10); if(1 == tank.direct)
{
cxt.lineTo(tank.x+30,tank.y+10);
}
else if(3 == tank.direct)
{
cxt.lineTo(tank.x,tank.y+10);
}
cxt.closePath();
cxt.stroke();
break;
} } //移动坦克
function moveTank()
{
var code = event.keyCode; switch(code)
{
case 87: tank.moveUp();break;
case 68: tank.moveRight();break;
case 83: tank.moveDown();break;
case 65: tank.moveLeft();break;
} //清除画布内容
cxt.clearRect(0,0,500,500); drawTank(tank);
}
HTML5之坦克大战游戏开发的更多相关文章
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
- 小强的HTML5移动开发之路（8）——坦克大战游戏2
来自:http://blog.csdn.net/cai_xingyun/article/details/48629015 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接 ...
- 《HTML5经典坦克大战》游戏（代码）
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
- 基于HTML5坦克大战游戏简化版
之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...
- cocos2d-x游戏开发系列教程-坦克大战游戏启动界面的编写
用前面介绍的方法,创建一个cocos2d-x项目,可以看到新项目内容如下图:
- 3D坦克大战游戏源码
3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...
- 3D坦克大战游戏iOS源码
3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（下）
在飞机大战游戏开发中遇到的问题和解决方法: 1.在添加菜单时,我要添加一个有背景的菜单,需要在菜单pMenu中添加一个图片精灵,结果编译过了但是运行出错,如下图: 查了很多资料,调试了很长时间,整个人 ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）
接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...
随机推荐
- HDU 1043 Eight 【经典八数码输出路径/BFS/A*/康托展开】
本题有写法好几个写法,但主要思路是BFS: No.1 采用双向宽搜,分别从起始态和结束态进行宽搜,暴力判重.如果只进行单向会超时. No.2 采用hash进行判重,宽搜采用单向就可以AC. No.3 ...
- ansible管理window
设置window以支持远程执行命令======================================= 升级powershell到3.0+-------------------------- ...
- 数据库的语言——SQL
DBMS 是一种系统软件,我们要与它交互的时候就必须使用某种语言,在数据库发展初期每一种DBMS 都有自己的特有的语言,不过逐渐的SQL 成为了所有DBMS 都支持的主流语言.SQL 是专为数据库而建 ...
- 索引（Index）
无索引的表就是一个无序的行集.比如下面的人员表中有一些数据: 这个表上没有索引,因此如果我们查找年龄等于17的人员时,必须查看表中的每一行,看它是否与所需的值匹配.这是一个全表扫描,很慢,如果表中只有 ...
- Web应用漏洞评估工具Paros
Web应用漏洞评估工具Paros Paros是Kali Linux集成的一款Web应用漏洞评估工具.该工具提供HTTP会话分析.网络爬虫.漏洞扫描三大功能.首先借助HTTP代理模式,该工具可以实时 ...
- 【递归】【栈】先修课 计算概论（A）/函数递归练习（2）5:布尔表达式
总时间限制: 1000ms 内存限制: 65536kB 描述 输入一个布尔表达式,请你输出它的真假值. 比如:( V | V ) & F & ( F | V ) V表示true,F表示 ...
- tomcat访问（access）日志配置、记录Post请求参数(转)
一.配置与说明 tomcat访问日志格式配置,在config/server.xml里Host标签下加上 <Valve className="org.apache.catalina.va ...
- Linux下数组遍历
声明一个数组变量 直接赋值: array[]=”Zero” array[]=”One” array[]=”Two” declare声明: declare -a array 小括号空格法: array= ...
- Oracle的取整和四舍五入函数——floor,round,ceil,trunc使用说明
Oracle的取整和四舍五入函数——floor,round,ceil,trunc使用说明 FLOOR——对给定的数字取整数位SQL> select floor(2345.67) from dua ...
- 推荐一些不错的开源免费易上手的web前端框架
1. bui 2.Semantic UI 3.oniui