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 ...
随机推荐
- 【转】docker之Dockerfile实践
转自:https://www.cnblogs.com/jsonhc/p/7767669.html 上一篇介绍了Dockerfile中使用的指令,现在开始进行指令实践 先查看下本地的镜像,选一个作为ba ...
- 解决windows下文件拷贝到ubuntu下文件名乱码的问题
sudo apt-get install convmv 解压zip文件: convmv -f gbk -t utf8 -r --notest *
- HDU 1043 Eight 【经典八数码输出路径/BFS/A*/康托展开】
本题有写法好几个写法,但主要思路是BFS: No.1 采用双向宽搜,分别从起始态和结束态进行宽搜,暴力判重.如果只进行单向会超时. No.2 采用hash进行判重,宽搜采用单向就可以AC. No.3 ...
- hdu6166
hdu6166 题意 给出一个有向图,选择 \(k\) 个点,问这 \(k\) 个点任意两点距离的最小值. 分析 按结点编号的二进制位,每次可以把所有点分到两个集合,那么求两个集合的点间的最短路即可( ...
- poj2778（AC 自动机）
poj2778 题意 构造只包含 \(A, T, C, G\) 的字符串,且满足不出现指定的一些字符串,问长度为 \(n\) 的字符串有多少种 ? 分析 AC 自动机 + 矩阵快速幂的神题 ,知识点很 ...
- autossh反向隧道
实验目标 有两台主机: hostA: 阿里云公网主机 hostB: 本地内网主机 需求实现: 在hostB上使用autossh将hostB的80的端口映射到hostA的8080,使得其他机器访问hos ...
- mysql对表的操作
创建表 简单的方式 CREATE TABLE person ( number INT(11), name VARCHAR(255), birthday DATE ); 或者是 CREATE TABLE ...
- codevs 1643 线段覆盖 3
1643 线段覆盖 3 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 在一个数轴上有n条线段,现要选取其中 ...
- 使用MultipleInputs和MultipleOutputs
还是计算矩阵的乘积,待计算的表达式如下: S=F*[B+mu(u+s+b+d)] 其中,矩阵B.u.s.d分别存放在名称对应的SequenceFile文件中. 1)我们想分别读取这些文件(放在不同的文 ...
- 微软自家的.Net下的JavaScript引擎——ClearScript
之前我介绍过一个开源的.Net下的Javascript引擎Javascript .NET,今天发现微软自己也开源了一个JavaScript引擎——ClearScript(当然,也支持VB Script ...