HTML5 canvas 跑动的小人
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>
上一个:古典的HTML5钟表效果
下一个:CSS3制作苹果手机的Message图标,超强大!