JS 面向对象版贪吃蛇

最新推荐文章于 2024-05-23 22:21:26 发布

牛盾爱吃苹果

最新推荐文章于 2024-05-23 22:21:26 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： JS-面向对象-贪吃

本文链接：https://blog.csdn.net/sc4599/article/details/46609471

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前的账号丢了,现在重新写好这个博客.
众所周知,自从HTML5串红后,JS的的地位又一次提高了,对于这个门脚本语言来说,他的巅峰时刻快到了.
JS的官方文档上说,JS是一门面向对象的语言,然而很多人在使用JS之后都觉得她是面向过程的.其实不然,
1, js中函数可以当做一种数据类型来看,而事实上他是一种Function对象的实例.
2, 函数与对象的对等性,在JS中对象一般采用函数来定义。
3, js中的变量的作用域和变量的声明方法.

下面是js贪吃蛇的目录结构:
js
|->node.js //节点类
|->stage.js //游戏场地类
|->worm.js //蛇体类
snake.html //所有js运行的场地

node.js中的代码:

    function Node (x,y) {
    this.x=x;
    this.y=y;
    //比较当前点和传入点是否相同
    this.equals=function  (i,j) {
        return this.x==i&&this.y==j;
    }
    //判断当前食物有没有被吃
    this.eaten=function (node){
        return this.x==node.x&&this.y==node.y;
    }
}

stage.js中的代码:

    function Stage (ctx) {
    this.width=50;
    this.height=50;
    this.worm=new Worm();
    //打印游戏场地,同时生产食物
    this.print1=function  () {
        for(i=0;i<this.width;i++){
            for(j=0;j<this.height;j++){
                if(this.worm.contains(i,j)){
                    if(this.worm.ishead(i,j)){//如果是蛇头 使用红色绘制
                        ctx.fillStyle="#ff0000";
                        ctx.fillRect(i*10,j*10,10,10);
                    }else{//否则是蛇身   
                        ctx.fillStyle="#111fff";
                        ctx.fillRect(i*10,j*10,10,10);
                    }
                }else if(this.worm.food.equals(i,j)){//如果该点是食物点 则使用白色绘制
                    ctx.fillStyle="#ffffff";
                    ctx.fillRect(i*10,j*10,10,10);
                }else {
                    ctx.fillStyle="#aaafff";
                    ctx.fillRect(i*10,j*10,10,10);
                }
            }
        }
    }
}

worm.js中的代码:

var UP=1;
var DOWN=2;
var LEFT=3;
var RIGHT=4;
var dir=1;
function Worm () {

    this.nodes=[];//建立一个空数组用于储存蛇身 node节点
    this.nodes[this.nodes.length]=new Node(10,10);
    this.nodes[this.nodes.length]=new Node(10,11);
    this.nodes[this.nodes.length]=new Node(10,12);
    this.nodes[this.nodes.length]=new Node(11,12);
    this.nodes[this.nodes.length]=new Node(12,12);
    this.nodes[this.nodes.length]=new Node(13,12);
    this.nodes[this.nodes.length]=new Node(13,13);
    this.nodes[this.nodes.length]=new Node(13,14);

    //判断蛇身是否包含的node
    this.contains=function  (i,j) {
//      alert("i="+i+" j="+j);
        for(n=0;n<this.nodes.length;n++){
            var node = this.nodes[n];
            if(node.x==i && node.y==j){
                return true;
            }
        }
        return false;
    }
    //判断是否是蛇头
    this.ishead=function  (i,j) {
        return this.nodes[0].x==i && this.nodes[0].y==j;
    }

    //虫子的移动函数 每移动一次次函数执行一次
    this.step=function  () {
        var head=this.nodes[0]
        var newHead;
        switch (dir){
            case UP:
                newHead=new Node(head.x,head.y-1);
                break;
            case DOWN:
                newHead=new Node(head.x,head.y+1);
                break;
            case LEFT:
                newHead=new Node(head.x-1,head.y);
                break;
            case RIGHT:
                newHead=new Node(head.x+1,head.y);
                break;
        }
        //判断新的头结点是否出界
        if(newHead.x<0){
            newHead.x=49;
        }else if(newHead.x>49){
            newHead.x=0;
        }else if(newHead.y<0){
            newHead.y=49;
        }else if(newHead.y>49){
            newHead.y=0;
        }
        //在nodes数组的头部追加一个node
        this.nodes.unshift(newHead);
        //在尾部删除一个节点,如果没有吃到东西
        if(newHead.eaten(this.food)){
            this.food=this.randomFood();
        }else{
            this.nodes.pop();
        }
    }

    //创建随即食物 的方法
    this.randomFood=function(){
        var i;
        var j;
        do{
            i=Math.floor(Math.random()*50);
            j=Math.floor(Math.random()*50);
        }while(this.contains(i,j));
        return new Node(i,j);
    }
    this.food=this.randomFood();
}

snake.html中的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/node.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/stage.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/worm.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        var canvas;
        var ctx;
        var stage;
        var timeID;
        function onload () {
            canvas = document.getElementById("canvas1");
            ctx = canvas.getContext("2d");
            stage = new Stage(ctx);
            stage.print1();
        }
        function start () {
            canvas = document.getElementById("canvas1");
            ctx = canvas.getContext("2d");
            stage = new Stage(ctx);
            timeID=setInterval(function  () {
                stage.worm.step();      
                stage.print1();
            },100);
        }
        function pause () {
            clearInterval(timeID);
        }
        function changedir (orientation) {
            dir=orientation;
        }

        document.onkeydown=function(event){ 
            //通过键盘事件判断用户的意图
        var e = event || window.event || arguments.callee.caller.arguments[0]; 
            if(e && e.keyCode==37){ // 按 left  
                //要做的事情 
                changedir(3);
            }else if(e && e.keyCode==38){//Up
                changedir(1);
            }else if(e && e.keyCode==39){// Right
                changedir(4);
            }else if(e && e.keyCode==40){// Down
                changedir(2);
            }
        };  
        </script>
        <style type="text/css">
            canvas{
                border: 1px solid green;
            }
        </style>
    </head>
    <body onload="onload()">
        <canvas id="canvas1" width="500px" height="500px"></canvas>
        <br />
        <input type="button" value="start" onclick="start()" />
        <input type="button" value="pause" onclick="pause()" />
        <table border="" cellspacing="" cellpadding=""border="0px">
            <tr style="height: 30px;"><th style=""></th><th onclick="changedir(1)">up</th><th></th></tr>
            <tr style="height: 30px;"><th onclick="changedir(3)">left</th><td></td><th onclick="changedir(4)">right</th></tr>
            <tr style="height: 30px;"><td></td><th onclick="changedir(2)">down</th><td></td></tr>
        </table>

    </body>
</html>

牛盾爱吃苹果

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 面向对象版贪吃蛇

之前的账号丢了,现在重新写好这个博客.众所周知,自从HTML5串红后,JS的的地位又一次提高了,对于这个门脚本语言来说,他的巅峰时刻快到了.JS的官方文档上说,JS是一门面向对象的语言,然而很多人在使用JS之后都觉得她是面向过程的.其实不然,
复制链接

扫一扫