用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

宇宙小猿(不下载附件不能运行)

2021-04-03 作者: Ivan举报

[html]代码库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>宇宙小猿</title>
    <style>
        body{
            text-align: center
        }
        canvas{
            margin: 0 auto
        }
    </style>
</head>
<body>
    <canvas id="main" width="396" height="644"></canvas>
    <script>
        var canvas = document.getElementById('main')
        var ctx = canvas.getContext('2d')
        var bgImg = new Image()
        bgImg.src = 'images/bg.png'
        var columnImg = new Image()
        columnImg.src = 'images/column.png'
        var groundImg = new Image()
        groundImg.src = 'images/ground.png'
        var monkeyImg = new Image()
        monkeyImg.src = 'images/1.png'
        var overImg = new Image()
        overImg.src = 'images/over.png'
        var readyImg = new Image()
        readyImg.src = 'images/ready.png'
        var canvasWidth = 396
        var canvasHeight = 644
        var ground ={
            img: groundImg,
            x: 0,
            y: canvasHeight - 147,
            width: 803,
            height: 147
        }
        var column ={
            img: columnImg,
            x: canvasWidth,
            y: getColumnY(),
            width: 83,
            height: 1547,
            columnUp: 676,
            columnGap: 194
        }
        var monkey ={
            img: monkeyImg,
            x: 183,
            y: 200,
            v: 0,
            width: 53,
            height: 58
        }
        var a = 500
        var t = 1 / 60
        const GAME_RUNNING = 1
        const GAME_OVER = -1
        const GAME_READY = 0
        var gameState = GAME_READY
        var score = 0
        window.onload = function(){
            canvas.onclick = mouseClickHandler
            setInterval(gameHandler, 1000 / 60)
        }
        function gameHandler(){
            if (gameState == GAME_READY){
                ctx.drawImage(bgImg, 0, 0)
                ctx.drawImage(readyImg, 0, 0)
                ctx.drawImage(monkey.img, 183, 200)
            } else if (gameState == GAME_RUNNING){
                ctx.clearRect(0, 0, canvasWidth, canvasHeight)
                ctx.drawImage(bgImg, 0, 0)
                ctx.drawImage(column.img, column.x, column.y)
                ctx.drawImage(ground.img, ground.x, ground.y)
                ctx.drawImage(monkey.img, monkey.x, monkey.y)
                ctx.font = '30px Arial'
                ctx.fillStyle = 'white'
                ctx.fillText(score,6,30)
                columnMove()
                groundMove()
                monkeyMove()
                checkHit()
                addScore()
            } else if (gameState == GAME_OVER){
                ctx.drawImage(overImg, 0, 0)
            }
        }
        function columnMove(){
            column.x = column.x - 1
            if (column.x <= -column.width){
                column.x = canvasWidth
                column.y = getColumnY()
            }
        }

        function groundMove(){
            ground.x = ground.x - 1
            if (ground.x <= -canvasWidth){
                ground.x = 0
            }
        }
        function getColumnY(){
            var columnUp = 676
            var columnGap = 194
            var gap = 30
            var minY = -(columnUp - gap)
            var maxY = -(columnUp + columnGap + gap - (canvasHeight - ground.height))
            var y = parseInt(Math.random() * (maxY - minY) + minY)
            return y
        }
        function monkeyMove(){
            var s = monkey.v * t + a * t * t / 2
            monkey.y = monkey.y + s
            monkey.v = monkey.v + a * t
        }
        function mouseClickHandler(){
            if (gameState == GAME_READY){
                gameState = GAME_RUNNING
            } else if (gameState == GAME_RUNNING){
                monkey.v = -210
            } else if (gameState == GAME_OVER){
                gameState = GAME_READY
                monkey.x = 183
                monkey.y = 200
                monkey.v = 0
                column.x = canvasWidth
                ground.x = 0
                column.y = getColumnY()
                score = 0
            }
        }
        function checkHit(){
            var monkeyTop = monkey.y
            var monkeyBottom = monkey.y + monkey.height
            if (monkeyTop <= 0 || monkeyBottom >= ground.y){
                gameState = GAME_OVER
            }
            var minX = column.x - monkey.width
            var maxX = column.x + column.width
            var gapTop = column.y + column.columnUp
            var gapBottom = gapTop + column.columnGap
            if (monkey.x >= minX && monkey.x <= maxX){
                if (monkeyTop <= gapTop || monkeyBottom >= gapBottom){
                    gameState = GAME_OVER
                }
            }
        }
        function addScore(){
            var columnRight = column.x + column.width
            if(monkey.x - columnRight > 0 && monkey.x - columnRight <= 1){
                console.log('小猿穿过了管道')
                score = score + 100
            }
        }
    </script>
</body>
</html>

[源代码打包下载]




网友评论    (发表评论)

共1 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...