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

演示地址

点击打开链接

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. hdu2203 KMP水的问题

    两种方法     首先是纯KMP #include<stdio.h> #include<string.h> #include<iostream> using nam ...

  2. hdu1848 Fibonacci again and again(SG游戏功能)

    现在的变化是看不清楚SG功能什么寻求方法 临时模板标题是首当 性能mex1它正在寻求g(x) 然后XOR #include<cstdio> #include<iostream> ...

  3. 浅谈移动Web开发（上）：深入概念

    PPI 什么是PPI PPI的复杂之处在于如果他所属的上下文环境不同,意义也会完全不一样. 当我们在谈论显示设备的PPI时,它代指的屏幕的像素密度:当我们在谈论和图片相关时,我们谈论的是打印时的分辨率 ...

  4. JAVA学习课第五十三届 — IO流程（七）File打靶 &amp; Properties设置

    一个.锻炼 深度遍历目录 深度遍历非常自然而然想到递归,而递归就非常自然的想到事实上现的底层算法是栈 对指定文件夹下列出全部内容(包括子文件夹的内容) PS:建议不要遍历C盘 import java. ...

  5. [译]Java 设计模式之装饰器

    (文章翻译自Java Design Pattern: Decorator – Decorate your girlfriend) 1.装饰模式的来历 让我们假设你在寻找一个女朋友.有来自像没美国中国日 ...

  6. 小猪Android越来越方式 Day 5 - part 2

    小猪的Android入门之路 Day 5 - part 2 Activity片段:Fragment(碎片)                                  ------转载请注明出处 ...

  7. 记第五届山东省ACM程序设计比赛——遗憾并非遗憾

    记第五届山东省ACM程序设计比赛 5月10日上午9点半左右,我们的队伍从学校出发,一个多小时后到达本次比赛的地点-哈尔滨工业大学. 报道,领材料,吃午饭,在哈工大的校园里逛了逛,去主楼的自习室歇息了一 ...

  8. struts2 &lt;s: select 标签值

    JSP页面: <s:select label="家长导航"  value="id" name="navson.pid" list=&q ...

  9. ODBC操作excel

    //ODBC连接Excel public static void main(String[] args) {  Connection conn = null;  Statement stm = nul ...

  10. document对象属性documentMode与CompatMode

    DOCTYPE DOCTYPE全称Document Type Declaration(文档类型声明,缩写DTD) DTD的声明影响浏览器对于CSS代码及Javascript脚本的解析. 渲染模式 渲染 ...