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 ...
随机推荐
- paramiko 使用总结(SSH 操作远端机器)
1.用户名.密码登陆方式 import paramikoparamiko.util.log_to_file('paramiko.log') # 记录日志文件ssh = paramiko.SSHClie ...
- HDU 1159.Common Subsequence-最长公共子序列(LCS)
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 学习LSM(Linux security module)之四:一个基于LSM的简单沙箱的设计与实现
嗯!如题,一个简单的基于LSM的沙箱设计.环境是Linux v4.4.28.一个比较新的版本,所以在实现过程中很难找到资料,而且还有各种坑逼,所以大部分的时间都是在看源码,虽然写的很烂,但是感觉收获还 ...
- [PKUSC2018]最大前缀和(DP)
题意:求一个序列随机打乱后最大前缀和的期望. 考场上发现不管怎么设状态都写不出来,实际上只要稍微转换一下就好了. 一个前缀[1..k]是最大前缀,当且仅当前面的所有后缀[k-1,k],[k-2,k], ...
- 【函数式权值分块】【块状链表】bzoj3065 带插入区间K小值
显然是块状链表的经典题.但是经典做法的复杂度是O(n*sqrt(n)*log^2(n))的,出题人明确说了会卡掉. 于是我们考虑每个块内记录前n个块的权值分块. 查询的时候差分什么的,复杂度就是O(n ...
- 关于SQL优化方面的一些总结
在sql查询中为了提高查询效率,我们常常会采取一些措施对查询语句进行sql优化,下面总结的一些方法,有需要的可以参考参考. 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ord ...
- HttpClient 处理中文乱码
HttpClient 请求的中文乱码问题 相关类库: commons-codec-1.3.jar,commons-httpclient-3.1.jar,commons-logging-1.1.1.ja ...
- [测试技术分享]DNS域传送漏洞测试
DNS域传送漏洞测试 1.简介: DNS(Domain Name System)也叫域名管理系统,它它建立在一个分布式数据库基础之上,在这个数据库里,保存了IP地址和域名的相互映射关系.正因为DNS的 ...
- JAVA常见算法题(二十六)
package com.xiaowu.demo; import java.util.Scanner; /** * Java实现将阿拉伯数字转为汉字 * * @author WQ * */ public ...
- htmltestrunner解决错误日志出界问题
扩大背后的区域放大,让它看起来没有出界 .popup_window { display: none; position: relative; left: 0px; top: 0 ...