原生JS写贪食蛇游戏(一)

编程语言 2018-09-30 12:17:42 阅读次数: 0

**

JS写贪食蛇游戏(一)

**

今天用js来实现贪食蛇游戏的基本玩法，往后博主会不定时更新贪食蛇的进阶模式
例如增添关卡、蛇加速、双人同屏操作等等
话不多说,开始吧

贪食蛇的基本思路：
1.构造两个对象：蛇、食物；
2.让蛇动起来；
3.设立游戏规则：蛇头碰到边界是gameOver，蛇头碰到自身时gameOver
4.蛇头与食物重合时身体伸长一节同时食物出现在别的地方

先搭好骨架，界面的样式可以随心所欲

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪食蛇游戏</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            background-color: khaki;
        }
        .plat{
            width: 800px;
            height: 400px;
            margin: 40px auto;
        }
        .map{
            width: 800px;
            height: 400px;
            background-color: grey;
            position: relative;
        }
        .btn{
            width: 400px;
            font-size: 50px;
            font-family: '楷体';
        }

        .btn1{
            width: 400px;
            font-size: 50px;
            font-family: '楷体';
            float: left;
        }
    </style>
</head>
<body>
<div class="plat">
    <div class="map" id="map"></div>
    <input type='button' id="btn" class="btn" value="开始游戏">
    <input type='button' id="btn1" class="btn1" value="暂停游戏">
</div>
</body>
</html>

然后在创建食物对象（为啥？因为它简单啊）

var map = document.getElementById('map');  //选中地图元素
function Food() {
            this.display = function () {
                var f = document.createElement('div');   //创建一个div块保存到f变量中
                this.flag = f;    //将节点保存到标记变量中，方便之后好删除
                f.style.width  ='10px';
                f.style.height = '10px';
                f.style.backgroundColor = 'white';
                f.style.borderRadius = '50%';
                f.style.position = 'absolute';
                this.x = Math.floor(Math.random()*80);
                this.y = Math.floor(Math.random()*40)；
                //食物的位置
                f.style.left=this.x*10+'px'; 
                f.style.top =this.y*10+'px';
                //将创建的div块添加到地图中去
                map.appendChild(f);
            }
        }
        /*你可以在后面用
        *var food =new Food();
        *food.display();
        *来验证代码的正确性
		*/

创建蛇对象

 function Snake() {
            this.direction = 'right';  //这是蛇的运动方向，以后我们只通过改变这个属性来改变它的方向
            this.body = [        //这是蛇的身体的缩小版坐标
                {x: 2, y: 0},		//先将它们保存在一个数组中
                {x: 1, y: 0},
                {x: 0, y: 0}
            ];
            this.display = function () {
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].x !=null) { 	/* 当蛇吃到食物时
                                                     *  会在body中push一组null值
                                                     * 即蛇新增的一节身体
												     *这里给有坐标的
													 *创造身体
													 */
                        var s = document.createElement('div');
                        this.body[i].flag = s;
                        s.style.width = '10px';
                        s.style.height = '10px';
                        s.style.backgroundColor = 'white';
                        s.style.borderRadius = '50%';
                        s.style.position = 'absolute';
                        s.style.left = 10 * this.body[i].x + 'px';
                        s.style.top = 10 * this.body[i].y + 'px';
                        map.appendChild(s);
                    }
                }
            }
        }

接下来让蛇动起来，在蛇对象中添加一个run的方法属性

this.run = function () { //把前一节的身体坐标传给它的后一节身体
                for (var i = this.body.length - 1; i > 0; i--) {
                    this.body[i].x = this.body[i-1].x;
                    this.body[i].y = this.body[i-1].y;
                }
                //根据方向，来调整蛇头的坐标
                switch (this.direction) {
                    case 'right':
                        this.body[0].x += 1;
                        break;
                    case 'left':
                        this.body[0].x -= 1;
                        break;
                    case 'up':
                        this.body[0].y -= 1;
                        break;
                    case 'down':
                        this.body[0].y += 1;
                        break;
                }
                //删掉初始化的蛇，不然跑一路会创建一路的div块
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].flag != null) {
                        map.removeChild(this.body[i].flag);
                    }
                }

如此蛇还跑不起来，我们还要在对象之外添加几个方法来控制蛇运动的开始、暂停、方向

document.onkeydown = function (e) {
            var ev = e || window.event;
            switch (ev.keyCode) {
                case 38:
                    if (snake.direction != 'down') {   // 不允许返回，向上的时候不能向下
                        snake.direction = "up";
                    }
                    break;
                case 40:
                    if (snake.direction != "up") {
                        snake.direction = "down";
                    }
                    break;
                case 37:
                    if (snake.direction != "right") {
                        snake.direction = "left";
                    }
                    break;
                case 39:
                    if (snake.direction != "left") {
                        snake.direction = "right";
                    }
                    break;
            }
        }
        var snake = new Snake();
        var food =new Food();
        var btn =document.getElementById('btn');
        var btn1=document.getElementById('btn1');
        var timer;
        snake.display();
        food.display();
        btn.onclick = function () {
            timer = setInterval('snake.run()',100);
        }
        btn1.onclick = function () {
            clearInterval(timer);
        }

至此蛇已经能跑起来，我们再来将规则用代码实现
在蛇对象的run方法中写如下代码

//这个是蛇头碰到边界是gameOver
if (this.body[0].x<0 || this.body[0].x>79 ||this.body[0].y<0 || this.body[0].y>39) {
                    clearInterval(timer);    //清除掉定时器，即蛇停止运动
                    alert('傻啊,用头撞墙');   //弹出框
                    window.location.reload(); //刷新界面，当然也可以不用刷新
                    						  //
                }
                //蛇头碰到自身时gameOver
                for (var i=4;i<this.body.length;i++){
                    if (this.body[0].x == this.body[i].x && this.body[0].y ==this.body[i].y) {
                        clearInterval(timer);
                        alert('人才,自己吃自己');
                        window.location.reload();
                    }
                }`
  //相信这里不用小编详细说明了吧

最后实现蛇吃食物自身生长
(这片代码大家多参悟参悟，也是写在蛇对象的run方法中)

if (this.body[0].x == food.x && this.body[0].y == food.y ) {  //当蛇头坐标与食物坐标重合时
                    this.body.push({x:null,y:null,flag:null}); //如上所说，加了一组null，这个在接下来调用
                    																//display方法时，系统会自动赋值，如此相当于
                    																//多了一组身体坐标，蛇就自动伸长啦
                    map.removeChild(food.flag); //一处被吃掉的食物
                    food.display(); //再随机创建一个食物
                }
 this.display();

好啦，简易版贪食蛇完成!

总代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪食蛇.自修—1</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            background-color: khaki;
        }
        .plat{
            width: 800px;
            height: 400px;
            margin: 40px auto;
        }
        .map{
            width: 800px;
            height: 400px;
            background-color: grey;
            position: relative;
        }
        .btn{
            width: 400px;
            font-size: 50px;
            font-family: '楷体';
        }

        .btn1{
            width: 400px;
            font-size: 50px;
            font-family: '楷体';
            float: left;
        }
    </style>
</head>
<body>
<div class="plat">
    <div class="map" id="map"></div>
    <input type='button' id="btn" class="btn" value="开始游戏">
    <input type='button' id="btn1" class="btn1" value="暂停游戏">
    <script>
        var map = document.getElementById('map');
        function Snake() {
            this.direction = 'right';
            this.body = [
                {x: 2, y: 0},
                {x: 1, y: 0},
                {x: 0, y: 0}
            ];
            this.display = function () {
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].x !=null) {
                        var s = document.createElement('div');
                        this.body[i].flag = s;
                        s.style.width = '10px';
                        s.style.height = '10px';
                        s.style.backgroundColor = 'white';
                        s.style.borderRadius = '50%';
                        s.style.position = 'absolute';
                        s.style.left = 10 * this.body[i].x + 'px';
                        s.style.top = 10 * this.body[i].y + 'px';
                        map.appendChild(s);
                    }
                }
            }
            this.run = function () {
                for (var i = this.body.length - 1; i > 0; i--) {
                    this.body[i].x = this.body[i-1].x;
                    this.body[i].y = this.body[i-1].y;
                }
                switch (this.direction) {
                    case 'right':
                        this.body[0].x += 1;
                        break;
                    case 'left':
                        this.body[0].x -= 1;
                        break;
                    case 'up':
                        this.body[0].y -= 1;
                        break;
                    case 'down':
                        this.body[0].y += 1;
                        break;
                }
                if (this.body[0].x<0 || this.body[0].x>79 ||this.body[0].y<0 || this.body[0].y>39) {
                    clearInterval(timer);
                    alert('傻啊,用头撞墙');
                    window.location.reload();
                }
                for (var i=4;i<this.body.length;i++){
                    if (this.body[0].x == this.body[i].x && this.body[0].y ==this.body[i].y) {
                        clearInterval(timer);
                        alert('人才,自己吃自己');
                        window.location.reload();
                    }
                }
                if (this.body[0].x == food.x && this.body[0].y == food.y ) {
                    this.body.push({x:null,y:null,flag:null});
                    map.removeChild(food.flag);
                    food.display();
                }
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].flag != null) {
                        map.removeChild(this.body[i].flag);
                    }
                }
                this.display();
            }

        }
        function Food() {
            this.display = function () {
                var f = document.createElement('div');
                this.flag = f;
                f.style.width  ='10px';
                f.style.height = '10px';
                f.style.backgroundColor = 'white';
                f.style.borderRadius = '50%';
                f.style.position = 'absolute';
                this.x = Math.floor(Math.random()*80);
                this.y= Math.floor(Math.random()*40)
                f.style.left=this.x*10+'px';
                f.style.top =this.y*10+'px';
                map.appendChild(f);
            }
        }
        document.onkeydown = function (e) {
            var ev = e || window.event;
            switch (ev.keyCode) {
                case 38:
                    if (snake.direction != 'down') {   // 不允许返回，向上的时候不能向下
                        snake.direction = "up";
                    }
                    break;
                case 40:
                    if (snake.direction != "up") {
                        snake.direction = "down";
                    }
                    break;
                case 37:
                    if (snake.direction != "right") {
                        snake.direction = "left";
                    }
                    break;
                case 39:
                    if (snake.direction != "left") {
                        snake.direction = "right";
                    }
                    break;
            }
        }
        var snake = new Snake();
        var food =new Food();
        var btn  =document.getElementById('btn');
        var btn1 =document.getElementById('btn1');
        var timer;
        snake.display();
        food.display();
        btn.onclick = function () {
            timer = setInterval('snake.run()',100);
        }
        btn1.onclick = function () {
            clearInterval(timer);
        }
    </script>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_28919991/article/details/82903035
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022