标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/youtianxia/p/4311612.html
