HTML5方向键控制会奔跑的马里奥大叔-优快云博客

本文介绍了一个基于HTML5 Canvas的简单马里奥风格小游戏，玩家可以通过键盘的方向键控制角色移动，体验基本的游戏互动。文章提供了完整的源代码，并说明了兼容性问题。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>&copy; 2012 <a target='_blank' href="#" title=</a></footer></body>
    </html>
    <br>用左右方向键控制小人奔跑方向<br><br><font color=black>▲　目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr></font>