<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fighting - HTML5</title>
<body onkeydown="javascript:keyPress(event);" onkeyup="javascript:keyRelease(event);" >
<div id="gameContainer">
<canvas id="gameCanvas" width="1024" height="500">
</canvas>
</div>
</body>
</html>
<script>
function RemoveArray(array,attachId )
{
for ( var i = 0 ,n = 0 ;i < array.length;i ++ )
{
if (array[i] != attachId)
{
array[n ++ ] = array[i]
}
}
array.length -= 1 ;
}
Array.prototype.remove = function (obj) {
return RemoveArray( this,obj );
} ;
var $ = function(id){
return "string"==typeof(id) ? document.getElementById(id) : id ;
}
var inputFlag = {
right : false,
up : false,
left : false,
down : false,
quick : false,
keyDown : false,
quik : false,
addblood : false,
fire : false
};
var KEY = { D: 68, W: 87, A: 65, S:83, DOWN:40, RIGHT:39, UP:38, LEFT:37, QUICK:88,ADDBLOOD:90,FIRE:17};
//按键按下相应动作修改
var keyPress = function(event){
inputFlag.keyDown = true;
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: inputFlag.right = true; break;
case KEY.UP:
case KEY.W: inputFlag.up = true; break;
case KEY.LEFT:
case KEY.A: inputFlag.left = true; break;
case KEY.DOWN:
case KEY.S: inputFlag.down = true; break;
case KEY.QUICK:inputFlag.quik = true; break;
case KEY.ADDBLOOD:inputFlag.addblood = true; break;
case KEY.FIRE:inputFlag.fire = true; break;
}
};
var keyRelease = function(event) {
inputFlag.keyDown = false;
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: inputFlag.right = false; break;
case KEY.UP:
case KEY.W: inputFlag.up = false; break;
case KEY.LEFT:
case KEY.A: inputFlag.left = false; break;
case KEY.DOWN:
case KEY.S: inputFlag.down = false; break;
case KEY.QUICK:inputFlag.quik = false; break;
case KEY.ADDBLOOD:inputFlag.addblood = false; break;
case KEY.FIRE:inputFlag.fire = false; break;
}
};
var westCowBoy = {
arrayBullet :new Array(),
gridSize:50,
x : 100,
y : 100,
picSN : 0,
diffX : 1,
diffY : 1 ,
direction : 3 ,
r : 20,
isCollect : false,
bloodValue:200,
bcount:0,
cowboyPicSRC : "http://hi.csdn.net/attachment/201112/17/65387_1324102531Z4He.png",
cowboyPicObj : "",
init: function(){
var img=new Image();
img.src=this.cowboyPicSRC;
this.cowboyPicObj=img;
},
move : function(){
if(inputFlag.quik){
this.diffX = 4;
this.diffY = 4;
}else{
this.diffX = 1;
this.diffY = 1;
}
if(inputFlag.addblood){
this.bloodValue++;
}
if(this.bloodValue>0){
if (inputFlag.right) this.x += this.diffX;
if (inputFlag.left) this.x -= this.diffX;
if (inputFlag.down) this.y += this.diffY;
if (inputFlag.up) this.y -= this.diffY;
}
var c=$("gameCanvas");
var cxt=c.getContext("2d");
if(!westCowBoy.isCollect&& westCowBoy.bloodValue>0){
if(inputFlag.fire==true){
var bullet = new Bullet();
bullet.x = westCowBoy.x;
bullet.y = westCowBoy.y;
if(this.direction==3){
bullet.direction = 3;
}else if(this.direction==4){
bullet.direction = 4;
}
bullet.init();
this.arrayBullet[this.bcount++] = bullet;
}
for(var i = 0 ;i < this.arrayBullet.length;i++){
alert(this.arrayBullet[i]);
this.arrayBullet[i].move();
var isHit = this.arrayBullet[i].hit();
var bullet = this.arrayBullet[i];
if(isHit){
this.arrayBullet.remove(bullet);
}
}
if(inputFlag.right==true){
this.direction = 4;
cxt.drawImage(this.cowboyPicObj,this.gridSize*this.picSN,this.gridSize*this.direction,this.gridSize,this.gridSize,this.x,this.y,this.gridSize, this.gridSize);
}else if(inputFlag.left==true){
this.direction = 3;
cxt.drawImage(this.cowboyPicObj,this.gridSize*this.picSN,this.gridSize*this.direction,this.gridSize,this.gridSize,this.x,this.y,this.gridSize, this.gridSize);
}else if(inputFlag.up){
cxt.drawImage(this.cowboyPicObj,this.gridSize*this.picSN,this.gridSize*this.direction,this.gridSize,this.gridSize,this.x,this.y,this.gridSize, this.gridSize);
}else if(inputFlag.down){
cxt.drawImage(this.cowboyPicObj,this.gridSize*this.picSN,this.gridSize*this.direction,this.gridSize,this.gridSize,this.x,this.y,this.gridSize, this.gridSize);
}
else{
cxt.drawImage(this.cowboyPicObj,this.gridSize*3,this.gridSize*this.direction,this.gridSize,this.gridSize,this.x,this.y,this.gridSize, this.gridSize);
}
}
if(westCowBoy.bloodValue==0){
cxt.drawImage(this.cowboyPicObj,this.gridSize*4,this.gridSize*3,this.gridSize,this.gridSize,this.x,this.y,this.gridSize, this.gridSize);
}
cxt.font="10px Arial";
cxt.fillStyle="#6600FF";
cxt.fillText("Life:"+this.bloodValue,this.x+this.r*2,this.y+this.r);
this.picSN+=1;
if(this.picSN>=4)
this.picSN=0;
}
}
function Bullet(){
this.x = 0;
this.y = 0;
this.diffX = 10;
this.direction = 3;
this.init = function(){
if(this.direction==3){
this.diffX = -10;
}else{
this.diffX = 10;
}
}
this.move = function(){
var c=$("gameCanvas");
var cxt=c.getContext("2d");
cxt.beginPath();
cxt.fillStyle = "#000000";
cxt.arc(this.x+20,this.y+20,1,0,Math.PI * 2,true);
cxt.closePath();
cxt.fill();
this.x += this.diffX;
}
this.hit = function(){
for(var i = 0; i <arrEnemy.length;i++){
if(this.x>(arrEnemy[i].x+15)&&this.y>arrEnemy[i].y&&this.x<(arrEnemy[i].x+35)&&this.y<arrEnemy[i].y+50){
arrEnemy[i].bloodValue--;
return true;
}
}
return false;
}
}
function enemy() {
this.x = 0;
this.y = 0;
this.gridSize=50;
this.picSN = 0;
this.diffX = 1;
this.diffY = 1 ;
this.direction=0;
this.movedirection =0;
this.bloodValue = 100;
this.cowboyPicSRC = "http://hi.csdn.net/attachment/201112/17/65387_1324102531Z4He.png";
this.r = 20;
this.cowboyPicObj = "";
this.init= function(){
var img=new Image();
img.src=this.cowboyPicSRC;
this.cowboyPicObj=img;
};
this.move = function(){
this.direction = parseInt( Math.random()*3);
var c=$("gameCanvas");
var cxt=c.getContext("2d");
if(this.bloodValue>0){
cxt.drawImage(this.cowboyPicObj,this.gridSize*this.picSN,this.gridSize*this.direction,this.gridSize,this.gridSize,this.x,this.y,this.gridSi
html5实现的动画小人
4星 · 超过85%的资源 需积分: 44 134 浏览量
2014-08-23
13:56:05
上传
评论
收藏 3KB RAR 举报
wangqinghuan1111
- 粉丝: 1
- 资源: 5
最新资源
- NetOps-py通过sftp替换网络设备启动文件
- STM32单片机FPGA毕设电路原理论文报告任务驱动教学法在单片机课程教学中的应用
- STM32单片机FPGA毕设电路原理论文报告任务驱动法在单片机教学中的应用
- STM32单片机FPGA毕设电路原理论文报告人造金刚石压机智能化压力测控系统设计
- 以某列为依据匹配多项(Excel版)
- STM32单片机FPGA毕设电路原理论文报告人体短臂离心机实验台的显示控制系统
- STM32单片机FPGA毕设电路原理论文报告人工气候室监控系统的环境控制器研究
- STM32单片机FPGA毕设电路原理论文报告染整自动线张力控制系统的设计
- 数据挖掘与机器学习-实验
- 基于Linux系统Nginx的动态网站的LNMP环境源码包
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈