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

演示地址

点击打开链接

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. NET 平台下的插件化开发内核

    .NET 平台下的插件化开发内核(Rabbit Kernel)   每个程序猿都有一个框架梦,曾经在2013年8月15日写过一篇“Koala Framework是什么?我为什么要写这个框架?”的文章, ...

  2. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  3. MySQL 存储过程 经常使用语法

    MySQL 存储过程是从 MySQL 5.0 開始添加的新功能.存储过程的长处有一箩筐.只是最基本的还是运行效率和SQL 代码封装.特别是 SQL 代码封装功能,假设没有存储过程,在外部程序訪问数据库 ...

  4. MySQL在Windows和Linux减少数据库

    Linux减少数据库代码: 1,创建一个空数据库cddl mysql> create database cddl; Query OK, 1 row affected (0.00 sec) 2,还 ...

  5. Windows，查看进程的连接的IP地址，批量模式，最后做成Excel

    1.CMD -> netstat -ano,复制到UltraEdit 2.把双空格替换为单空格,这种替换要进行很多次,直到全部替换完.其次点20次替换就行了. 3.单空格替换为 ^t,也就是制表 ...

  6. Math.random引发的骗术，绝对是用随机数骗前端妹纸的最佳方法

    我觉得今天我运气特好,今天我们来赌一赌,我们来搞个随机数,Math.floor(Math.random() * 10),如果这个数等于0到7,这个月的饭,我全请了,如果是8或9,你就请一个礼拜成不?于 ...

  7. Asp.Net MVC页面静态化功能实现一：利用IHttpModule，摒弃ResultFilter

    上一篇有提到利用IHttpModule和ResultFilter实现页面静态化功能.后来经过一些改动,将ResultFilter中要实现的功能全部转移到IHttpModule中来实现 Asp.Net ...

  8. 程序猿必要10免费的钱jquery小工具

    本周带来10款免费的jquery插件.假设你也有好的作品,欢迎分享到社区中来,在得到帮助的同一时候,也能与很多其它人分享来自你的作品. jQuery导航菜单置顶插件 - stickyUp . 在线演示 ...

  9. C#放缩、截取、合并图片并生成高质量新图的类

    原文:C#放缩.截取.合并图片并生成高质量新图的类 using System;using System.Drawing;using System.Drawing.Imaging;using Syste ...

  10. 【转】webAPP快速入门

    WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比较麻烦.每一次发布 ...