用JS写一个简单游戏以入门如何编程游戏

百度已收录   阅读次数: 55
2021-10-1013:16:04 发表评论
摘要

编写游戏,这个方面伯衡君一直想做,但是一直没提上议程,最近终于有了兴致,就准备开始研究如何编写游戏了,先从JS入手写一个小游戏好了。无论是编写复杂的游戏,还是编写简单的游戏,都是一个个逻辑汇合而成,一个个功能的堆积,堆积的多了,简单的游戏也就变成了复杂的游戏。所以,先分解游戏要实现的目的,之后再按照目的一个个去实现就会事半功倍了……

用JS写一个简单游戏以入门如何编程游戏

开篇寄语

编写游戏,这个方面伯衡君一直想做,但是一直没提上议程,最近终于有了兴致,就准备开始研究如何编写游戏了,先从JS入手写一个小游戏好了。无论是编写复杂的游戏,还是编写简单的游戏,都是一个个逻辑汇合而成,一个个功能的堆积,堆积的多了,简单的游戏也就变成了复杂的游戏。所以,先分解游戏要实现的目的,之后再按照目的一个个去实现就会事半功倍了。

Demo地址

  • https://zhangboheng.github.io/Easy-Web-TV-M3u8/,选择游戏模块后,选择躲避方块游戏即可

游戏目标

  • 场景:分数栏,方块,障碍物,控制按钮,移动的场景
  • 终止条件:方块碰到顶部和底部的边框或者障碍物,游戏即宣告结束

涉及知识

  • html
  • css
  • javascript
  • canvas

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        canvas {
            border: 1px solid #d3d3d3;
            background-image: url('../../images/bg.jpg');
        }
    </style>
</head>

<body onload="startGame()">
    <script>
        var myGamePiece;
        var myObstacles = [];
        var myScore;

        function startGame() {
            myGamePiece = new component(20, 20, randomColor(), 50, 120);
            myGamePiece.gravity = 0.05;
            myScore = new component("30px", "Consolas", "white", 20, 40, "text");
            myGameArea.start();
        }

        var myGameArea = {
            canvas: document.createElement("canvas"),
            start: function() {
                this.canvas.width = window.innerWidth - 2;
                this.canvas.height = window.innerHeight - 2;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.frameNo = 0;
                this.interval = setInterval(updateGameArea, 20);
            },
            clear: function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }
        }

        function component(width, height, color, x, y, type) {
            this.type = type;
            this.score = 0;
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;
            this.x = x;
            this.y = y;
            this.gravity = 0;
            this.gravitySpeed = 0;
            this.update = function() {
                ctx = myGameArea.context;
                if (this.type == "text") {
                    ctx.font = this.width + " " + this.height;
                    ctx.fillStyle = color;
                    ctx.fillText(this.text, this.x, this.y);
                } else {
                    ctx.fillStyle = color;
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                }
            }
            this.newPos = function() {
                this.gravitySpeed += this.gravity;
                this.x += this.speedX;
                this.y += this.speedY + this.gravitySpeed;
                this.hitBottom();
            }
            this.hitBottom = function() {
                var rockbottom = myGameArea.canvas.height - this.height;
                if (this.y > rockbottom) {
                    this.y = rockbottom;
                    this.gravitySpeed = 0;
                }
            }
            this.crashWith = function(otherobj) {
                var myleft = this.x;
                var myright = this.x + (this.width);
                var mytop = this.y;
                var mybottom = this.y + (this.height);
                var otherleft = otherobj.x;
                var otherright = otherobj.x + (otherobj.width);
                var othertop = otherobj.y;
                var otherbottom = otherobj.y + (otherobj.height);
                var crash = true;
                if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
                    crash = false;
                }
                return crash;
            }
        }

        function updateGameArea() {
            var x, height, gap, minHeight, maxHeight, minGap, maxGap;
            for (i = 0; i < myObstacles.length; i += 1) {
                //Set end game conditions
                if (myGamePiece.crashWith(myObstacles[i]) || myGamePiece.y == window.innerHeight - 22 || myGamePiece.y <= 0) {
                    return;
                }
            }
            myGameArea.clear();
            myGameArea.frameNo += 1;
            if (myGameArea.frameNo == 1 || everyinterval(150)) {
                x = myGameArea.canvas.width;
                minHeight = 20;
                maxHeight = 200;
                height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight);
                minGap = 50;
                maxGap = 200;
                gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap);
                myObstacles.push(new component(10, height, randomlor(), x, 0));
                myObstacles.push(new component(10, x - height - gap, randomlor(), x, height + gap));
            }
            for (i = 0; i < myObstacles.length; i += 1) {
                myObstacles[i].x += -1;
                myObstacles[i].update();
            }
            myScore.text = "SCORE: " + myGameArea.frameNo;
            myScore.update();
            myGamePiece.newPos();
            myGamePiece.update();
        }

        function everyinterval(n) {
            if ((myGameArea.frameNo / n) % 1 == 0) {
                return true;
            }
            return false;
        }

        function accelerate(n) {
            myGamePiece.gravity = n;
        }
        //Set random square colors
        function randomColor() {
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

        //Set random line colors
        function randomlor() {
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        //Restart game
        function restartGame() {
            window.location.reload();
        }
    </script>
    <div style="position: relative; bottom: 50px; text-align: center;">
        <button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
        <button onclick="restartGame()">RESTART</button>
    </div>
</body>

</html>
分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: