<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5会奔跑的马里奥大叔丨石家庄幼师|河北叉车|河北品牌策划公司</title>
</head>
<body>
<div align="center">
<canvas id="demo" style="border:1px solid #ddd;">您的浏览器不支持canvas标签,推荐您更换谷歌游览器，全面兼容html5。</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 = ‘http://www.csrcode.cn/imagesforcode/201209/go.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){
// move right
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 move speed
player.x -= 5;
player.imageY = 60;
};
clean();
_drawPlayer();
}
function playerJump (value) {
// player jump
}
function _drawPlayer () {
// draw player image
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;
// console.log(player.x);
switch(value){
case ‘up‘:
playerJump();
break;
case ‘right‘:
posX = player.x + player.width;
if (posX >= canvas.width) {
return;
};
//player.x += 5;
playerMove(value);
break;
case ‘down‘:
break;
case ‘left‘:
if (player.x < 5) {
return;
};
//player.x -= 5;
playerMove(value);
break;
};
// console.log(player.x);
return {x: player.x, y: player.y};
}
//init canvas
var init = (function(options){
options = options || {};
canvas.width = options.width || 500;
canvas.height = options.height || 300;
//init draw rect
playerInit();
//bind user event
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:200});
})();
</script>
<footer>© 2012 <a target=‘_blank‘ href="#" title=</a></footer></body>
</html>
<br>用左右方向键控制小人奔跑方向<br><br><font color=black>▲ 目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr></font>
时间： 2024-10-05 20:48:57