html5支持左右键切换页面代码,HTML5+JS打造的一个跑动小人（左右方向键控制）...

HTML5+JS打造的一个跑动小人(左右方向键控制)_网页代码站(www.webdm.cn)

您的浏览器不支持canvas标签,推荐您更换谷歌游览器，全面兼容html5。

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;

}

}

};

(function(){

// canvas

var canvas = document.getElementById('demo');

var ctx = canvas.getContext('2d');

//player base

var playerImage = new Image();

playerImage.src = '/images/20150413/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:400});

})();

© 2012 lee

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！