HTML5 canvas 跑动的小人

2020-01-27 14:16:48

字体：大中小

来源：转载

供稿：网友

HTML5 canvas 跑动的小人，其实游戏里的玩家动作也是这么实现的，就是把人物的动作放在一个精灵表(图片)里，然后逐帧绘制不同的动作，然后连起来就感觉人物在动了，其实挺简单的，大家自己看代码吧，你也可以联想一下那些网页游戏是如何实现的。请注意，运行本代码请确认您的浏览器支持canvas标签。

<!DOCTYPE html><html><head><title>HTML5 canvas 跑动的小人</title></head><body><canvas id="demo" style="border:1px solid #ddd;">您的浏览器不支持canvas标签。</canvas><script  type="text/javascript">var eventjs = {	//添加事件	bind: function(elem, type, handler){		if (elem.addEventListener) {			elem.addEventListener(type, handler, false);		} else if(elem.attachEvent){			//IE			elem.attachEvent("on" + type, handler);		}else{			elem["on" + type] = handler;		};	},	//删除事件	unbind: function(elem, type ,handler){		if (elem.removeEventListener) {			elem.removeEventListener(type, handler, false);		} else if(elem.detachEvent){			//IE			elem.detachEvent("on" + type, handler)		}else{			elem["on" + type] = handler;		};	},	//获取事件	getEvent: function(event){		return event ? event : window.event;	},	//获取事件目标	getTarget: function(event){		return event.target || event.srcElement;	},	//相关元素	relatedTarget: function(event){		if (event.relatedTarget) {			return event.relatedTarget;		} else if (event.toElement){			return event.toElement;		} else if (event.formElement) {			return event.formElement;		} else {			return null;		};	},	//阻止默认行为	preventDefault: function(event){		if(event.preventDefault){			event.preventDefault();		}else{			event.returnValue = false;		}	},	//取消捕获/冒泡	cancelBubble: function(event){		if (event.stopPropagation) {			event.stopPropagation();		} else{			event.cancelBubble = true;		};	},	//获取鼠标按钮	getMouseButton: function(event){		if (document.implementation.hasFeature("MouseEvents", "2.0")) {			return event.button;		} else{			switch (event.button){				case 0:				case 1:				case 3:				case 5:				case 7:					return 0;				case 2:				case 6:					return 2;				case 4:					return 1;			}		};	},	//获取键盘code	getCharCode: function(event){		if (typeof event.charCode == "number") {			console.log('char code');			return event.charCode;		} else{			return event.keyCode;		};	},	getDirection: function(event){		var keyCode = event.which || event.keyCode;		switch(keyCode){			case 1:			case 38:			case 269: //up				return 'up';				break;			case 2:			case 40:			case 270:				return 'down';				break;			case 3:			case 37:			case 271:				return 'left';				break;			case 4:			case 39:			case 272:				return 'right';				break;			case 339: //exit			case 240: //back				return 'back';				break;		}	}};</script><script type="text/javascript">(function(){    // canvas    var canvas = document.getElementById('demo');    var ctx = canvas.getContext('2d');    //player base    var playerImage = new Image();    playerImage.src = '/jscss/demoimg/201207/180652md4ydy2txwotdd7l.png';    var player = {        x: 50,       // 在canvas中的坐标        y: 0,        imageX: 0,  // 图像定位坐标        imageY: 0,        width: 50,  // 图像显示区域大小        height: 60,        stop: true  // 是否停止    };    function clean () {        // clear canvas        ctx.clearRect(0, 0, canvas.width, canvas.height);    }    function playerInit () {        // init player        playerImage.onload = _drawPlayer;    }    function playerMove (value) {        if('right' === value){            if (player.stop) {                player.imageX += 50;            }else{                player.imageX = 0;            }            if (player.imageX >= 150) {                player.imageX = 0;            };            // player move speed            player.x += 5;            player.imageY = 0;        } else if ('left' === value){            // move left            if (player.stop) {                player.imageX += 50;            }else{                player.imageX = 0;            }            if (player.imageX >= 150) {                player.imageX = 0;            };            player.x -= 5;            player.imageY = 60;        };        clean();        _drawPlayer();    }    function playerJump (value) {    }    function _drawPlayer () {        ctx.drawImage(playerImage, player.imageX, player.imageY, player.width, player.height, player.x, canvas.height - player.height, player.width, player.height);    }    function playerAction (value) {        var posX = 0;        var posY = 0;        switch(value){            case 'up':                playerJump();                break;            case 'right':                posX = player.x + player.width;                if (posX >= canvas.width) {                    return;                };                playerMove(value);                break;            case 'down':                break;            case 'left':                if (player.x < 5) {                    return;                };                playerMove(value);                break;        };        return {x: player.x, y: player.y};    }    var init = (function(options){        options = options || {};        canvas.width = options.width || 500;        canvas.height = options.height || 300;        playerInit();        eventjs.bind(document, 'keydown', function(event){            var d = eventjs.getDirection(event);            player.stop = true;            playerAction(d);        });        eventjs.bind(document, 'keyup', function(event){            var d = eventjs.getDirection(event);            player.stop = false;            playerAction(d);        });    })({width:800, height:400});})();</script></body></html>

上一篇：CSS3做的幻灯片特效

下一篇：CSS3动画遮罩文字特效