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

演示地址

点击打开链接

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. 让Docker功能更强大的10个开源工具

    让Docker功能更强大的10个开源工具 更好的管理.Web前端程序.更深入地了解容器应用程序,Docker生态系统正在迅速发展,这还得归功于其充满活力的开源社区. 软件项目的成功常常根据其催生的生态 ...

  2. std::move()

    #include <iostream> #include <utility> #include <vector> #include <string> i ...

  3. asp.net mvc3 数据验证（四）—Remote验证的一个注意事项

    原文:asp.net mvc3 数据验证(四)-Remote验证的一个注意事项         前几篇把asp.net mvc3 中基于Model的主要数据验证的方法都已经讲完了,本节纯粹只是讲一个我 ...

  4. 欧几里德欧几里德原理和扩展的原则，(Euclidean Theory and Extended Euclidean Theory)学习笔记

    题记:这是我第四次审查扩展欧几里德原理,由于不经常使用.当你想使用,可以不记得细节,经常检查信息,所以,简单地梳理这一原则和扩展欧几里德的原则,以博客存档以备查用. 一个.欧几里德原理 欧几里德原理( ...

  5. DB2数据类型

    DB2数据库的内置数据类型主要分成数值型(numeric).字符串型(character string).图形字符串(graphic string).二进制字符串型(binary string)或日期 ...

  6. 腾讯云安装openvz，高速搭建測试环境

    CSDN送了腾讯云的測试资格,准备拿来作为cici的软件公布首页,想在上面做个demo,无奈没有设备环境,于是想要用openvz来虚拟一些vps: 第一步:选择腾讯云的os模板,centos6.3 第 ...

  7. 探讨javascript面向对象编程

    (个人blog迁移文章.) 前言: 下面将探讨javascript面向对象编程的知识. 请不要刻意把javascript想成面向对象编程是理所当然的. javascript里面,对象思想不可少,但是不 ...

  8. each与list的用法

    each与list的用法(PHP学习) 1.each的用法 先看API array each ( array &$array ) api里是这么描述的:each — 返回数组中当前的键/值对并 ...

  9. tornado settings想到的

    今天有足够多的时间来看看Tornado中RequestHandler和Application这两个类的关系. 昨天想要调用settings中的内容,找了好半天不知道怎么在handler中使用setti ...

  10. SQL点滴19—T-SQL中的透视和逆透视

    原文:SQL点滴19-T-SQL中的透视和逆透视 透视 今天抽一点时间来看看透视和逆透视语句,简单的说就是行列转换.假设一个销售表中存放着产品号,产品折扣,产品价格三个列,每一种产品号可能有多种折扣, ...