zoukankan      html  css  js  c++  java
  • js贪吃蛇-简单版

    分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <title>title</title>
    <style type="text/css">
    table{
        border: 1px solid gray;
        border-collapse:collapse;
    }
    td{
        width:2px;
        height:2px;
    }
    .red{
        background-color:black;
    }
    .black{
        background-color: red;
    }
    </style>
    
    <script type="text/javascript" >
    (function(window){
    
        function bind( fn, context ) {
            if ( typeof context === "string" ) {
                var tmp = fn[ context ];
                context = fn;
                fn = tmp;
            }
    
            var slice = Array.prototype.slice;
    
            // Simulated bind
            var args = slice.call( arguments, 2 ),
                proxy = function() {
                    return fn.apply( context, args.concat( slice.call( arguments ) ) );
                };
    
            return proxy;
        }
    
        function extend(o1, o2) {
            for (var i in o2) o1[i] = o2[i];
            return o1;
        }
        
        function clog(d){
            try{
                console.log(d);
            }catch(e){};
        }
    
        function each(obj, callback, args) {
            var name,i = 0,
                len = obj.length,
                isObj = len == undefined;
            if(args){
                if(isObj){
                    for(name in obj){
                        if(callback.apply(obj[name], args) === false ) break;
                    }
                }else{
                    for(;i < len;){
                        if(callback.apply(obj[i++], args) === false ) break;
                    }
                }
            }else{
                if(isObj){
                    for(name in obj){
                        if(callback.call(obj[name], name, obj[name]) === false ) break;
                    }
                }else{
                    for(;i < len;){
                        if(callback.call(obj[i], i, obj[i++]) === false ) break;
                    }
                }
            }
        }
        function range(m, n) {
            var arr = [];
            for(;m <= n; m++){
                arr[m] = m;
            }
            return arr;
        }
        var css = {
            hasClass: function(a, b) {
                return RegExp("\b" + b + "\b").test(a.className)
            },
            addClass: function(a, b) {
                if (!this.hasClass(a, b)) a.className = a.className + " " + b
            },
            removeClass: function(a, b) {
                a.className = a.className.replace(RegExp("\b" + b + "\b"), "")
            }
        };
        function Snake(conf) {
            var conf = extend({
                x: 0,
                y: 4,
                keycode: 39,
                move_arr: [[0,0,0],[0,1,1],[0,2,2],[0,3,3]],
                food_arr: [],
                step: 0,
                t_size: 40,
                speed: 100
            }, conf);
            extend(this, conf);
            this.init();
        };
        Snake.prototype.init = function() {
            var self = this, timer,
                auto = function() {
                    if(self.x >= 0 && self.x < self.t_size && self.y >= 0 && self.y < self.t_size && self.is_moved()){
                        self.direct_opt();
                        timer = setTimeout(auto, self.speed);
                    }
                };
            this.last_keycode = this.keycode;
            this.allow_arr = range(0, this.t_size * this.t_size - 1);
            this.drawTable();
            //按下按键
            document.onkeydown = function (e){
                var _code  = (window.event||e).keyCode;
                if(self.last_keycode != _code && Math.abs(_code-self.last_keycode) != 2){
                    self.last_keycode = self.keycode = _code;
                }
                clearTimeout(timer);
                auto();
            }
    
            var func = bind(this.random_food, this);
            each(range(0,8), func);
            this.random_food();
            auto();
        }
        Snake.prototype.two2one = function(num, scale) {
            scale = scale || this.t_size;
            if(typeof num == 'number'){
                return [Math.floor(num/scale), num%scale];
            }else{
                return num[0] * scale + num[1];
            }
        }
        Snake.prototype.is_moved = function() {
            var td = this.table.rows[this.x].cells[this.y]
            return !css.hasClass(td, 'red');
        }
        Snake.prototype.random_food = function() {
            var self = this,
                rand = function(m, n) {
                    return Math.floor(Math.random() * ( n - m + 1) + m);
                },
                in_array = function(val, arr) {
                    var flag = false;
                    for(var i = 0; i < arr.length; i++){
                        if(arr[i] == val){
                            flag = true;
                        }
                    }
                    return flag;
                },
                get_no_moved_arr = function() {
                    var tmp_arr = [],moved_arr = self.move_arr,
                        arr = [], f_arr, move_num, moved_str;
                    if(self.food_arr.length > 0) {
                        moved_arr = moved_arr.concat(self.food_arr);
                    }
                    for(var i = 0; i < self.move_arr.length; i++) {
                        tmp_arr.push(self.move_arr[i][2]);
                    }
                    moved_str = ',' + tmp_arr.join(',') + ',';
                    for(var i = 0; i < self.allow_arr.length; i++) {
                        if(moved_str.indexOf(',' + self.allow_arr[i] + ',') === -1) {
                            arr.push(self.allow_arr[i]);
                        }
                    }
                    move_num = arr[rand(0, arr.length - 1)];
                    f_arr  = self.two2one(move_num)
                    self.food_arr.push(f_arr.concat(move_num));
                    return f_arr;
                },
                no_moded_arr = get_no_moved_arr();
            var rand_handler = this.table.rows[no_moded_arr[0]].cells[no_moded_arr[1]];
            css.addClass(rand_handler, 'black');
        }
        Snake.prototype.drowSnake = function() {
             for(var i = 0; i < this.move_arr.length; i++){
                var cur = this.move_arr[i],
                    cur_handler = this.table.rows[cur[0]].cells[cur[1]];
                if(!css.hasClass(cur_handler, 'red')){
                    css.addClass(cur_handler, 'red');
                }
            }
        }
        Snake.prototype.drawTable = function() {
            document.body.innerHTML = 'total score: <span id="score">0</span>';
            var table = document.createElement('table');
            this.table = table;
            for(var i = 0; i < this.t_size; i++){
                var row = table.insertRow(0);
                for(var j = 0; j < this.t_size; j++){
                    row.insertCell(0);
                }
            }
            this.score = document.getElementById('score');
            document.body.appendChild(table);
            
            this.drowSnake();
        }
        Snake.prototype.direct_opt = function() {
            this.move_arr.push([this.x, this.y, this.two2one([this.x, this.y], this.t_size - 1)]);
            this.drowSnake();
            var next_pos = this.table.rows[this.x].cells[this.y];
            if(this.step++ && !css.hasClass(next_pos, 'black')){
                var last_pos = this.move_arr.shift();
                css.removeClass(this.table.rows[last_pos[0]].cells[last_pos[1]], 'red');
            }
            if(css.hasClass(next_pos, 'black')){
                css.removeClass(next_pos, 'black');
                this.score.innerHTML = parseInt(this.score.innerHTML) + 10;
                this.food_arr.shift();
                this.random_food();
                
                if(this.speed >80 && (this.move_arr.length - 4) % 10 == 0) {
                     this.speed *= 0.9;
                }
            }
            switch(+this.keycode){
                case 37:
                    this.y--;
                    break;
                case 38:
                    this.x--;
                    break;
                case 39:
                    this.y++;
                    break;
                default:
                    this.x++;
            }
        }
        Snake.prototype.drawTable1 = function() {
            var str = '',
                tr = [];
            for(var i = 0; i < this.t_size; i++){
                var td = [];
                for(var j = 0; j < this.t_size; j++){
                    td.push('<td></td>');
                }
                tr.push('<tr>' + td.join('') + '</tr>');
            }
            str = '<table>' + tr.join('') + '</table>';
            document.body.innerHTML = str;
        }
        window.Snake = Snake;
    })(window);
        window.onload = function() {
            new Snake();
        }
    </script>
    </head>
    <body >
    </body>
    </html>
     

    效果 

    作者:做想其成
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文链接,否则保留追究法律责任的权利。
  • 相关阅读:
    微信小程序支付完整示例
    二分查找,冒泡排序, 快速排序
    JQuery放大镜效果
    js瀑布流
    linux安装字体
    使用phantomjs截图【php】
    安装supervisor
    mysql报错:BIGINT UNSIGNED value is out of range
    curl https报错: curl: (35) SSL connect error
    给www用户添加登录权限
  • 原文地址:https://www.cnblogs.com/zxqc/p/6532542.html
Copyright © 2011-2022 走看看