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 ...
随机推荐
- POJ 2407.Relatives-欧拉函数O(sqrt(n))
欧拉函数: 对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目. 对于一个正整数N的素数幂分解N=P1^q1*P2^q2*...*Pn^qn. Euler函数表达通式:euler(x)=x(1 ...
- 【python】ipython与python的区别
[python]ipython与python的区别 (2014-06-05 12:27:40) 转载▼ 分类: Python http://mba.shengwushibie.com/itbook ...
- 二分+Dfs【p1902】刺杀大使
题目描述--->p1902 刺杀大使 题意概括: 找一条路径,使得从第1行到第n行路径的最大值最小. 分析: 题目概括出来,很容易想到二分. 求最大值最小,因此我们可以对最大伤害值进行二分. 如 ...
- 16、Django实战第16天：优化url
今天完成的是一个优化url.... 前面我们所有的url都是配置在一个mxonline.urls.py中.因为我们根据项目实际情况配置了多个app,那么我们相应的url是可以配置在自己的app中的,这 ...
- mysql 列转行,合并字段的方法
数据表(表名:xsk) +----+------+-----------+-------+ | id | name| course | score | +----+------+----------- ...
- TDD开发案例
前段时间把一个界面框架完成了,今天基于这个框架开发一个小模块,在这里把这个模块设计的全过程记录下来,希望大家讨论并指正. 一.起因 公司交给我一个任务,为测试员写一个手机模拟界面,以方便她们的手机短信 ...
- POJ 3532 Resistance（高斯消元+基尔霍夫定理）
[题目链接] http://poj.org/problem?id=3532 [题目大意] 给出n个点,一些点之间有电阻相连,求1~n的等效电阻 [题解] 有基尔霍夫定理:任何一个点(除起点和终点)发出 ...
- leetcode笔记：Word Ladder
一. 题目描写叙述 Given two words (start and end), and a dictionary, find the length of shortest transformat ...
- MyBatis学习-偏实践（单独MyBatis项目）
准备先把MyBatis搞熟悉了,然后把SpringMVC搞熟悉了. MyBatis的材料,除了我之前自己实验的 http://www.cnblogs.com/charlesblc/p/5906431. ...
- 一起來玩鳥 Starling Framework 簡介
開場 Starling Framework是一套Flash 2D遊戲開發"工具",是使用Flash最新的Stage3D API建構出來的一套Framework.最大優點在於使用GP ...