有没有人能说说为这个游戏添加一个这样的排行榜（附有图片）怎么弄啊？？帮帮忙呗。。

weishuichuizuijiao 2018-04-10 06:23:19

<html>

<meta charset="UTF-8" />

<p align="center"><input type="button" value="开始游戏" id="gamePlay">  <input type="button" value="结束游戏" id="gameOver"></p>

<p align="center">通过键盘的上下左右键控制游戏角色移动，避开小怪物，如果碰到小怪物则游戏结束</p>

<body align="center">

<canvas id="gameCanvas" width="600" height="600">您的浏览器不支持Canvas</canvas>

<script type="text/javascript" >

//获取画布元素

var canvas = document.getElementById("gameCanvas");

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

 

//定义游戏场景

var bgReady = false;

var bgImage = new Image();

bgImage.src = "img/bg.jpg";

bgImage.onload = function(){

    bgReady = true;

}

 

//定义mario对象样式

var marioReady = false;

var marioImage = new Image();

marioImage.src = "img/mario.png";

marioImage.onload = function(){

    marioReady = true;

}

 

//定义怪物样式

var monsterReady = false;

var monsterImage = new Image();

monsterImage.src = "img/monster.png";

monsterImage.onload = function(){

    monsterReady = true;

}

 

//定义mario初始参数

var mario;

 

//定义怪物初始参数

function monster() {

    this.x = Math.random() * canvas.width;

    this.y = Math.random() * canvas.height;

    this.speed = 100;

    this.xDirection = 1;

    this.yDirection = 1;

    this.move = function (modifier) {

        this.x += this.xDirection * this.speed * modifier;

        this.y += this.yDirection * this.speed * modifier;

        if (this.x >= canvas.width - 32)

        {

            this.x = canvas.width - 32;

            this.xDirection = -1;

        }else if (this.x <= 0)

        {

            this.x = 0;

            this.xDirection = 1;

        }else if (this.y >= canvas.height - 32)

        {

            this.y = canvas.height - 32;

            this.yDirection = -1;

        }else if (this.y <= 0)

        {

            this.y = 0;

            this.yDirection = 1;

        }

    };

}

 

var monsterSum;

var monsterList;

 

var keysDown = {};

 

//添加键盘操作监控事件

addEventListener(

    "keydown",

    function (e) {

        keysDown[e.keyCode] = true;

    },

    false

);

addEventListener(

    "keyup",

    function (e) {

        delete keysDown[e.keyCode];

    }

);

 

//定义移动事件

var Move = function (modifier) {

 

    if (38 in keysDown) {

        mario.y -= mario.speed * modifier;

    }

    if (40 in keysDown) {

        mario.y += mario.speed * modifier;

    }

    if (37 in keysDown) {

        mario.x -= mario.speed * modifier;

    }

    if (39 in keysDown) {

        mario.x += mario.speed * modifier;

    }

 

    if (mario.x >= canvas.width - 32) {

        mario.x = 0;

    }else if (mario.x <= 0) {

        mario.x = canvas.width - 32;

    }

    if (mario.y >= canvas.height - 32) {

        mario.y = 0;

    }else if (mario.y <= 0) {

        mario.y = canvas.height - 32;

    }

 

    for (var i = 0; i <= monsterSum; i++) {

        monsterList[i].move(modifier);

    }

}

 

//定义绘图事件

var Draw = function () {

    if (bgReady) {

        ctx.drawImage(bgImage, 0 ,0);

        if (marioReady) {

            ctx.drawImage(marioImage, mario.x, mario.y);

        }

 

        if (monsterReady) {

            for (var i = 0; i <= monsterSum; i++)

            ctx.drawImage(monsterImage, monsterList[i].x, monsterList[i].y);

        }

    }

    ctx.fillStyle = "rgb(250, 250, 250)";

    ctx.font =  "24px Helvetica";

    ctx.textAlign = "left";

    ctx.textBaseline = "top";

    last = Date.now() - start;

    ctx.fillText(last/1000, 12, canvas.height-590);

}

 

//

var Check = function () {

 

    if (monsterSum != Math.floor(last / 5000)){

        monsterSum ++;

        monsterList[monsterSum] = new monster();

    }

 

    for (var i = 0; i <= monsterSum; i++) {

        if (

            (monsterList[i].x - 32) <= mario.x

            && mario.x <= (monsterList[i].x + 32)

            && (monsterList[i].y - 32) <= mario.y

            && mario.y <= (monsterList[i].y + 32)

        ) {

            end = Date.now();

            alert("你被怪物捉到了，游戏结束");

            End();

        }

    }

}

 

var End = function () {

    if (bgReady) {

        ctx.drawImage(bgImage, 0 ,0);

    }

    window.clearInterval(timer);

    return;

}

 

var main = function () {

    var now = Date.now();

    var delta = now - then;

    Move(delta / 1000);

    Draw();

    Check();

 

    then = now;

}

var timer, then, start;

 

document.getElementById("gamePlay").onclick = function () {

    mario = {

        speed: 256,

        x: canvas.width/2,

        y: canvas.height/2

    }

    monsterSum = 0;

    monsterList = new Array();

    monsterList[monsterSum] = new monster();

    then = Date.now();

    start = then;

    clearInterval(timer);

    timer = setInterval(main, 1);

}

document.getElementById("gameOver").onclick = function () {

    end = Date.now();

    End();

}

</script>

</body>

</html>