zoukankan      html  css  js  c++  java
  • Html5 贪吃蛇游戏

    <!documentTYPE html>
    <html lang="en">
    <head>
    <meta charset="gb2312" />
    <title>贪吃蛇游戏</title>
    <style type="text/css">
    body {text-align:center;}
    canvas { border:5px dotted #ccc; }
    h1 { font-size:35px; text-align: center; margin: 0; padding-bottom: 25px;}
    </style>
    <script type="text/javascript">
    function play_game()
    {
    var level = 160; //游戏水平,速度快慢
    var rect_w = 45; // 宽
    var rect_h = 30; // 高
    var inc_score = 50; // 分数,吃一个的分数
    var snake_color = "#006699"; // 蛇的颜色
    var ctx; // Canvas 属性
    var tn = []; // temp directions storage
    var x_dir = [-1, 0, 1, 0]; // 位置调整
    var y_dir = [0, -1, 0, 1]; // 位置调整
    var queue = [];
    var frog = 1; // 默认蛇
    var map = [];
    var MR = Math.random;
    var X = 5 + (MR() * (rect_w - 10))|0; // 计算位置
    var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions
    var direction = MR() * 3 | 0;
    var interval = 0;
    var score = 0;
    var sum = 0, easy = 0;
    var i, dir;
    // getting play area
    var c = document.getElementById('playArea');
    ctx = c.getContext('2d');
    // Map positions
    for (i = 0; i < rect_w; i++)
    {
    map[i] = [];
    }
    // 随机生成蛇食物
    function rand_frog()
    {
    var x, y;
    do
    {
    x = MR() * rect_w|0;
    y = MR() * rect_h|0;
    }
    while (map[x][y]);
    map[x][y] = 1;
    ctx.fillStyle = snake_color;
    ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);
    }
    // Default somewhere placement
    rand_frog();
    function set_game_speed()
    {
    if (easy)
    {
    X = (X+rect_w)%rect_w;
    Y = (Y+rect_h)%rect_h;
    }
    --inc_score;
    if (tn.length)
    {
    dir = tn.pop();
    if ((dir % 2) !== (direction % 2))
    {
    direction = dir;
    }
    }
    if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y])
    {
    if (1 === map[X][Y])
    {
    score+= Math.max(5, inc_score);
    inc_score = 50;
    rand_frog();
    frog++;
    }
    //ctx.fillStyle("#ffffff");
    ctx.fillRect(X * 10, Y * 10, 9, 9);
    map[X][Y] = 2;
    queue.unshift([X, Y]);
    X+= x_dir[direction];
    Y+= y_dir[direction];
    if (frog < queue.length)
    {
    dir = queue.pop()
    map[dir[0]][dir[1]] = 0;
    ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
    }
    }
    else if (!tn.length)
    {
    var msg_score = document.getElementById("msg");
    msg_score.innerHTML = "必须承认您的技术非常不错。<br /> <br />这是您的分数 : <b>"+score+"</b><br /><br /><input type='button' value='点击重玩' onclick='window.location.reload();' />";
    document.getElementById("playArea").style.display = 'none';
    window.clearInterval(interval);
    }
    }
    interval = window.setInterval(set_game_speed, level);
    document.onkeydown = function(e) {
    var code = e.keyCode - 37;
    if (0 <= code && code < 4 && code !== tn[0])
    {
    tn.unshift(code);
    }
    else if (-5 == code)
    {
    if (interval)
    {
    window.clearInterval(interval);
    interval = 0;
    }
    else
    {
    interval = window.setInterval(set_game_speed, 60);
    }
    }
    else
    {
    dir = sum + code;
    if (dir == 44||dir==94||dir==126||dir==171){
    sum+= code
    } else if (dir === 218) easy = 1;
    }
    }
    }
    </script>
    </head>
    <body onLoad="play_game()">
    <h1>贪吃蛇游戏</h1>
    <div id="msg"></div>
    <canvas id="playArea" width="450" height="300">对不起您的浏览器不支持 HTML5 建议使用Chrome</canvas>
    </body>
    </html>

    html5
  • 相关阅读:
    原生小程序音频播放
    Vue定义全局过滤器filter
    系统扩展性之引入外部包
    oracle update join
    OAuth2
    oracle pl/sql
    MySQL同步工具otter的使用介绍(一)
    python批量安装apk
    mac brew安装redis
    antd 修改Modal的底部按钮颜色
  • 原文地址:https://www.cnblogs.com/naokr/p/2478167.html
Copyright © 2011-2022 走看看