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 ...
随机推荐
- [Jquery]斑马线表格
<!doctype html> <html> <head> <script src='js/jquery-1.9.1.min.js'></scri ...
- 线段树 (区间合并)【p2894】[USACO08FEB]酒店Hotel
Descripion 奶牛们最近的旅游计划,是到苏必利尔湖畔,享受那里的湖光山色,以及明媚的阳光.作为整个旅游的策划者和负责人,贝茜选择在湖边的一家著名的旅馆住宿.这个巨大的旅馆一共有N (1 < ...
- 免费Jdk选择：jdkadoptOpenJdk
oracle公司的jdk即将要收费,不在给免费用户提供更新,点击查看. jira在7.13版本将jdk从oracle jdk变更为adoptOpenJdk.点击查看.
- [Codeforces 8E] Beads
Brief Intro: 将所有n位二进制串中满足字典序不大于其逆序串,取反串,逆序取反串中按字典序排序的第m个输出 n<=50 Algorithm: 首次接触数位DP的题目 根据数据范围,我们 ...
- 【树套树】bzoj3110 [Zjoi2013]K大数查询
题解很多,实现起来以外地简洁.内层的区间线段树上用了标记永久化. #include<cstdio> using namespace std; #define N 50001 struct ...
- Mybatis全部标签
一.定义SQL语句 (1)select 标签的使用 属性介绍: id :唯一的标识符. parameterType:传给此语句的参数的全路径名或别名 例:com.test.poso.User或user ...
- 十. 图形界面(GUI)设计13.鼠标事件
鼠标事件的事件源往往与容器相关,当鼠标进入容器.离开容器,或者在容器中单击鼠标.拖动鼠标时都会发生鼠标事件.java语言为处理鼠标事件提供两个接口:MouseListener,MouseMotionL ...
- JNI之数组
Array Operations -- 数组操作 1.GetArrayLength jsize GetArrayLength(JNIEnv *env, jarray array); Returns t ...
- 重大新闻：腾讯大杀器来了，QQ浏览器微信版推出
今日,腾讯在推出windows桌面版的微信后,又发布了一个重量级产品:QQ浏览器微信版 我们在PC端用微信又多了一种方式,而且比windows桌面版本更加友好,更加方便. 我相信:对于我们绝大多数办公 ...
- Inno Setup入门（十三）——Pascal脚本（2）
事件函数(2) function CheckPassword(Password: String): Boolean; 如果安装程序在Pascal 脚本中发现该函数,它自动显示密码页并调用CheckPa ...