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

演示地址

点击打开链接

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. [Asp.net]站点地图SiteMap

    原文:[Asp.net]站点地图SiteMap 引言 在项目中发现使用站点地图的控件,之前没总结过这方面的东西,就写了一个demo测试了一下,这里记录一下,算是总结吧. Web.sitemap < ...

  2. vSphere HA状况：未知配置错误解决的方法

    问题:vSphere HA配置出现未知错误,导致打不开主机上的虚拟机电源,vmware client连接vcenter后,主机显示警报信息,例如以下: 解决:例如以下图,选中有问题的物理主机,然后又一 ...

  3. Java JDK 8 安装和环境变量的配置(Linux and Windows)

    Java JDK 8 的安装以及环境变量的配置(Linux and Windows) JDK(Java Development Kit)包含了Java语言的编译器,能够在这里下载: http://ww ...

  4. UIButton UIImage 用法分析

    一.UIButton和UIImageView的区别 1.显示图片 1> UIImageView只能显示一种图片(图片默认会填充整个UIImageView) image\setImage: 2&g ...

  5. jQuery验证插件

    原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate. ...

  6. 安卓MonkeyRunner源码分析之工作原理架构图及系列集合

    花了点时间整理了下MonkeyRunner的工作原理图,请配合本人博客里面MonkeyRunner其他源码分析文章进行阅读.下面整理成相应系列列表方便大家阅读: MonkeyRunner源码分析之-谁 ...

  7. PHP 18：data_valid_fns.php 看正则表达式

    原文:PHP 18:data_valid_fns.php 看正则表达式 本章介绍正则表达式.先看看data_valid_fns.php的代码吧.                 简要介绍一下.fill ...

  8. 用一条SQL语句取出第 m 条到第 n 条记录的方法

    原文:用一条SQL语句取出第 m 条到第 n 条记录的方法   --从Table 表中取出第 m 条到第 n 条的记录:(Not In 版本)       *    FROM Table     id ...

  9. 有趣的游戏：Google XSS Game

    Google最近出了一XSS游戏: https://xss-game.appspot.com/ 我这个菜鸟看提示,花了两三个小时才全过了.. 这个游戏的规则是仅仅要在攻击网页上弹出alert窗体就能够 ...

  10. openwrt的GPIO控制

    为什么有些GPIO可以在/sys/class/gpio中控制,而有些不行呢? 先来看一看普通不需要C程序而是使用脚本的控制方法(Linux普遍适用): First step is making GPI ...