键盘方向键控制人物上下左右行走

演示地址

点击打开链接

MYCode

<html>

<head>

<meta charset=utf-8>

<title>html5人物行走</title>

<script>

var canvas;

var ctx;

//role

var role_x=50;

var role_y=50;

var role_width=32;

var role_height=48;

//每个方向有4个状态

role_direction=0;//value[0,3];

role_status=0;//value[0,3];

//box

var box_x=0;

var box_y=0;

var box_width=400;

var box_height=400;

//

var bound_left=0;

var bound_right=box_x+box_width-role_width;

var bound_top=0;

var bound_bottom=box_y+box_height-role_height;

var unit=10;

function draw_role()

{

        ctx.clearRect(box_x,box_y,box_width,box_height);

        ctx.lineWidth="5";

        ctx.strokeStyle="rgb(0,0,0)";

        ctx.beginPath();

        ctx.strokeRect(box_x,box_y,box_width,box_height);

	/*var img=new Image();

	img.src="role.png";

	ctx.drawImage(img,role_direction*role_height,role_status*role_width,role_width,role_height);*/

        var img=new Image();

        img.src="role.png";

        img.onload=function()

        {

            //ctx.drawImage(img,0,0,role_width,role_height);

            //alert(role_x+","+role_y);

            ctx.drawImage(img,role_status*role_width,role_direction*role_height,role_width,role_height,role_x,role_y,role_width,role_height);

        };

}

function move_role(event)

{

	//鼠标点击移动

	/*var mx;

	var my;

	if(ev.layerX||ev.layerX==0)

	{

		mx=ev.layerX;

		my=ev.layerY;

	}

	else if(ev.offsetX||ev.offsetX==0)

	{

		mx=ev.offsetX;

		my=ev.offsetY;

	}*/

	var keyCode;

	if(event==null)

	{

		keyCode=window.event.keyCode;

		window.event.preventDefault();

	}

	else

	{

		keyCode=event.keyCode;

		event.preventDefault();

	}

	var cur_direction;

	switch(keyCode)

	{

            case 37://left

            cur_direction=1;

            role_x=role_x-unit;

            if(role_x<bound_left)

            role_x=bound_left;

            break;

            case 38://up

            cur_direction=3;

            role_y=role_y-unit;

            if(role_y<bound_top)

            role_y=bound_top;

            break;

            case 39://right

            cur_direction=2;

            role_x=role_x+unit;

            if(role_x>bound_right)

            role_x=bound_right;

            break;

            case 40://down

            cur_direction=0;

            role_y=role_y+unit;

            if(role_y>bound_bottom)

            role_y=bound_bottom;

            break;

            default:

            break;

	}

	if(role_direction==cur_direction)

	{

		role_status=(role_status+1)%4;

	}

	else

	{

		role_direction=cur_direction;

		role_status=0;

	}

	draw_role();

}

/*function animate(now)

{

    draw_role();

    requestAnimationFrame(animate);

}*/

function init()

{

	canvas=document.getElementById("canvas");

	ctx=canvas.getContext('2d');

	window.addEventListener('keydown',move_role,false);

        ctx.clearRect(box_x,box_y,box_width,box_height);

        ctx.save();

        ctx.lineWidth="5";

        ctx.strokeStyle="rgb(0,0,0)";

        ctx.beginPath();

        ctx.strokeRect(box_x,box_y,box_width,box_height);

        draw_role();

        ctx.restore();

        //setInterval(draw_role,1000);

        //setInterval(function (e){animate();},1000/60);

        //requestAnimationFrame(animate);

}

</script>

</head>

<body onLoad="init();">

<canvas id="canvas" width="500" height="500"/>

</body>

</html>

人物行走图片

不足之处

如果连续按住方向键，人物行走的动画将会出现闪烁。这个问题没有解决。

html5 人物行走的更多相关文章

  1. 8款超酷的HTML5 3D图片动画源码

    1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

  2. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  3. 分享12款经典时尚的HTML5应用

    分享伟大,呵呵.今天给大家分享一下收集的12个HTML5小特效. 我整理一下源码,给大家打包一下,我博客园上传文件大小有限,传不了了. 需要的请留下邮箱就行了,觉得好的话,不要忘了点赞哦~ 1.CSS ...

  4. HTML5资源教程

    新款CSS3按钮组合 5组可爱CSS3按钮 Leave a reply 之前我分享过一些时尚的CSS3动画按钮,比如CSS3渲染Checkbox实现3D开关切换按钮.纯CSS3 3D按钮 按钮酷似牛奶 ...

  5. 分享9款最新超酷HTML5/CSS3应用插件

    新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看. 1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要 ...

  6. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...

  7. 『HTML5挑战经典』是英雄就下100层-开源讲座(一)从天而降的英雄

    是英雄就下100层是一款经典的手机小游戏,以前是在诺基亚手机上十分有名.今天我们就用HTML5和lufylegend一步步地实现它. 一,准备工作 首先,你需要下载lufylegend,下载地址如下: ...

  8. 用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...

  9. 使用HTML5制作简单的RPG游戏

    很久以前就想着做一个游戏,但什么都不会又不知道从哪里开始,胡乱找来一些书籍和资料结果太深奥看不懂,无奈只能放弃.这一弃就是十多年,倥偬半生,眼看垂垂老矣,还是没能有什么成果. 近年来游戏引擎越来越多, ...

随机推荐

  1. R.layout.main connot be resolved 和R.java消失

    出现例如以下问题: 鼠标放到出代码上面: 分析问题: 1.查看R文件是否被生成.假设没有生成,则勾选build Automatically,然后Clean: 2.假设R文件已生成.则删除去掉代码中: ...

  2. MySQL编程(0) - Mysql中文乱码问题解决方案

    MySQL 5.6 for Windows 解压缩版配置安装: http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html MySQL ...

  3. C#-面向对象的多态思想 ---ShinePans

    总结: 多态是面向对象的核心.---------能够理解为一个方法,多种实现, 在这里能够用虚方法,抽象类,接口能够实现多态 1.首先利用接口来实现多态: 接口相当于"功能,"接口 ...

  4. Hack 语言学习/参考---1.1 What is Hack?

    What is Hack?¶ Hack is a language for HHVM that interopates seamlessly with PHP. The barrier to entr ...

  5. windows系统下c语言暂停程序

    原文:windows系统下c语言暂停程序 windows系统下,很多C语言初学者的调试时,往往没看到结果程序就退出了,据我所知的方法主要有以下几种 方法一: #include int main() { ...

  6. jQuery选取和操纵元素的特点

    jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候, ...

  7. Java堆栈（转）

     Java栈与堆 ----对这两个概念的不明好久,最终找到一篇好文,拿来共享 1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自己主动管理栈和堆, ...

  8. Windows 8 常用第三方SDK使用概览

    原文:Windows 8 常用第三方SDK使用概览 应用开发过程中,我们或多或少会使用到第三方的公司平台的功能,例如:新浪微博.人人网.高德地图等. 那么在Windows 8 Store App开发中 ...

  9. Visual Studio 单元测试之二---顺序单元测试

    原文:Visual Studio 单元测试之二---顺序单元测试 此文是上一篇博文:Visual Studio 单元测试之一---普通单元测试的后续篇章.如果读者对Visual Studio的单元测试 ...

  10. Android的FrameLayout使用要注意的问题

    帧布局FrameLayout在Android的五大布局中是最简单的布局方式,在需要布局中的控件有重叠的情况下才使用. 今天Shamoo使用FrameLayout的时候,发现布局里面的控件设置layou ...