马里奥大逃亡

最新推荐文章于 2021-05-30 19:13:34 发布

Simms叔叔

最新推荐文章于 2021-05-30 19:13:34 发布

阅读量385

点赞数

分类专栏：前端文章标签：马里奥大逃亡

本文链接：https://blog.csdn.net/qq_43241999/article/details/102538056

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

马里奥大逃亡

<!DOCTYPE html>
<html lang="en">
<meta charset="gb2312">
<script src="jQuery-3.4.1.js"></script>
    <title>马里奥逃亡</title>
<body>
<canvas id="gameCanvas" width="600px" height="600px">您的浏览器不支持Canvas</canvas>
<script type="text/JavaScript">
    //获取画布元素
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.genContext("2d");

    //定义游戏场景
    var bgReady = false;
    var bgImage = new Image();
    bgImage.src = "timg (2).jpg";
    bgImage.onload =function () {
        bgReady = true;
    }

    //定义mario对象样式
    var marioReady = false;
    var marioImage = new Image();
    marioImage.src = "timg.jpg";
    marioImage.onload = function () {
        marioReady = true;
    }

    //定义怪物样式
    var monsterReady = false;
    var monsterImage = new Image();
    monsterImage.src = "timg (1).jpg";
    monsterImage.onload = function () {
        monsterReady = true;
    }

    //定义mario初始参数
    var mario = {
         speed:256,
        x:canvas.width/2,
        y:canvas.height/2
    }

    //定义怪物初始参数
    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.herght - 32)
         {
             this.y = canvas.herght - 32;
             this.yDirection = -1;
         }else if (this.y <= 0)
         {
             this.y = 0 ;
             this.yDirection = 1;
         }
        };
    }

    var mosterSum = 0;
    var monsterList = new Array();
    monsterList[monsterSum] = new monster();

    var keysDown = {};

    //添加键盘操作监控事件
    addEventListener(
        "keydown",
        function (e) {
            keyDown[e.keyCode] = true;
        },
        false
    );
    addEventListener(
        "keyup",
        function (e) {
            delete keyDown[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.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.fon = "24px Helvetica";
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        last = Date.now() - start;
        ctx.fillText(last/1000,12,canvas.herght - 590);
    }

    //设定怪物刷新并判断位置
    var Check = function (){
        if ( monsterSum !=Math.floor(last / 5000)){
            monsterSums ++;
            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 then = date.now();
    var start = then;
    timer = setInterval(main,1);

</script>
</body>
</html>

Simms叔叔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
马里奥大逃亡

马里奥大逃亡<!DOCTYPE html><html lang="en"><meta charset="gb2312"><script src="jQuery-3.4.1.js"></script> <title>马里奥逃亡</title><body><canvas id="g...
复制链接

扫一扫