AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

模仿微信"转你妹"游戏

2017-10-19 1172
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>微信小游戏-转你妹</title>
</head>
<body>
<div>
    <canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>
    <script>

        var canvas = document.getElementById('canvas');
        var cxt = canvas.getContext('2d');

        var index = 0;
        var timer;
        var iStop = false;
        var ladderLen = 60;
        var outerLen = 200;
        var boxLen = 20;
        var score = 0;
        var isCal = false;

        var ladderA = {'degree':0, 'boxes':[{'index':1,'color':'red'}, {'index':2,'color':'green'}]};
        var ladderB = {'degree':60, 'boxes':[{'index':1,'color':'yellow'}]};
        var ladderC = {'degree':120, 'boxes':[]};
        var ladderD = {'degree':180, 'boxes':[]};
        var ladderE = {'degree':240, 'boxes':[]};
        var ladderF = {'degree':300, 'boxes':[{'index':1,'color':'blue'}]};

        var ladderX = [{'degree':300, 'index':7, 'color':'red'}, {'degree':240, 'index':7, 'color':'red'}];

        var colors =  ['yellow', 'blue', 'green', 'red'];

        function drawBg(){

            /*********外部六边形**********/
            cxt.save();
            cxt.beginPath();
            cxt.fillStyle = 'gray';
            cxt.translate(300, 300);

            cxt.moveTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);

            cxt.closePath();
            cxt.fill();
            cxt.restore();

            /********内部六边形***********/
            cxt.save();
            cxt.beginPath();
            cxt.translate(300, 300);

            cxt.moveTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);

            cxt.closePath();
            cxt.fill();
            cxt.restore();
        }

        function drawLadder(ladderA){
            for(var i=0; i<ladderA.boxes.length; i++){
                cxt.save();
                cxt.translate(300, 300);
                cxt.fillStyle = ladderA.boxes[i].color;
                cxt.beginPath();
                cxt.rotate(ladderA.degree*Math.PI/180);
                cxt.moveTo(ladderLen + (ladderA.boxes[i].index - 1)*boxLen, 0);
                cxt.lineTo(ladderLen + ladderA.boxes[i].index*boxLen, 0);
                cxt.rotate(60*Math.PI/180);
                cxt.lineTo(ladderLen + ladderA.boxes[i].index*boxLen, 0);
                cxt.lineTo(ladderLen + (ladderA.boxes[i].index - 1)*boxLen, 0);
                cxt.closePath();
                cxt.fill();
                cxt.restore();
            }
        }

        // 画下落的梯形
        function drawX(){
            isCal = true;
            var _ladderX = [];
            for(var i=0; i<ladderX.length; i++){

                cxt.save();
                cxt.translate(300, 300);
                cxt.fillStyle = ladderX[i].color;
                cxt.beginPath();
                cxt.rotate(ladderX[i].degree * Math.PI / 180);
                cxt.moveTo(ladderLen + (ladderX[i].index - 1) * boxLen, 0);
                cxt.lineTo(ladderLen + ladderX[i].index * boxLen, 0);
                cxt.rotate(60 * Math.PI / 180);
                cxt.lineTo(ladderLen + ladderX[i].index * boxLen, 0);
                cxt.lineTo(ladderLen + (ladderX[i].index - 1) * boxLen, 0);
                cxt.closePath();
                cxt.fill();
                cxt.restore();

                var isDel = false;
                var _ladder = qryLadder(ladderX[i].degree);
                if(_ladder.boxes.length == 0){
                    if(ladderX[i].index == 1){
                        isDel = true;
                        _ladder.boxes.push({'index':ladderX[i].index,'color':ladderX[i].color});
                        getScore();
                    }
                }else if(_ladder.boxes.length == 7 && ladderX[i].index == 7){
                    iStop = true;
                    alert('game over!');
                }else if((_ladder.boxes[_ladder.boxes.length-1].index + 1) == ladderX[i].index){
                    isDel = true;
                    _ladder.boxes.push({'index':ladderX[i].index,'color':ladderX[i].color});
                    getScore();
                }

                if(!isDel){
                    _ladderX.push(ladderX[i]);
                }

                if(index%20 == 0){
                    ladderX[i].index -= 1;
                }

            }

            ladderX = _ladderX;

            if(ladderX.length == 0){
                randomX();
            }

            isCal = false;
        }

        // 随机下落的梯形
        function randomX(){
            ladderX = [];
            var degree = Math.floor(Math.random()*6)*60;
            var color = colors[Math.floor(Math.random()*4)];

            var num = Math.round(Math.random()*3);
            for(var i=0; i<num; i++){
                var _degree = degree + i*60;
                if(_degree >= 360){
                    _degree -= 360;
                }

                ladderX.push({'degree':_degree, 'index':7, 'color':color});
            }
            console.log(ladderX);
        }

        // 依据degree查找相应的梯形
        function qryLadder(degree){
            if(ladderA.degree == degree){
                return ladderA;
            }
            if(ladderB.degree == degree){
                return ladderB;
            }
            if(ladderC.degree == degree){
                return ladderC;
            }
            if(ladderD.degree == degree){
                return ladderD;
            }
            if(ladderE.degree == degree){
                return ladderE;
            }
            if(ladderF.degree == degree){
                return ladderF;
            }
        }

        function draw(){
            drawBg();
            drawLadder(ladderA);
            drawLadder(ladderB);
            drawLadder(ladderC);
            drawLadder(ladderD);
            drawLadder(ladderE);
            drawLadder(ladderF);
            drawX();
            drawScore();
        }

        function erase(){
            cxt.clearRect(0, 0, canvas.width, canvas.height);
        }

        function add60(ladder){
            if(ladder.degree == 300){
                ladder.degree = 0;
            }else{
                ladder.degree += 60;
            }
        }

        function del60(ladder){
            if(ladder.degree == 0){
                ladder.degree = 300;
            }else{
                ladder.degree -= 60;
            }
        }

        function getScore(){
            var minLen = ladderA.boxes.length;
            minLen = ladderB.boxes.length<minLen?ladderB.boxes.length:minLen;
            minLen = ladderC.boxes.length<minLen?ladderC.boxes.length:minLen;
            minLen = ladderD.boxes.length<minLen?ladderD.boxes.length:minLen;
            minLen = ladderE.boxes.length<minLen?ladderE.boxes.length:minLen;
            minLen = ladderF.boxes.length<minLen?ladderF.boxes.length:minLen;

            score += minLen*10;
            for(var i=0; i<minLen; i++){
                ladderA.boxes.shift();
                for(var j=0; j<ladderA.boxes.length; j++){
                    ladderA.boxes[j].index --;
                }
                ladderB.boxes.shift();
                for(var j=0; j<ladderB.boxes.length; j++){
                    ladderB.boxes[j].index --;
                }
                ladderC.boxes.shift();
                for(var j=0; j<ladderC.boxes.length; j++){
                    ladderC.boxes[j].index --;
                }
                ladderD.boxes.shift();
                for(var j=0; j<ladderD.boxes.length; j++){
                    ladderD.boxes[j].index --;
                }
                ladderE.boxes.shift();
                for(var j=0; j<ladderE.boxes.length; j++){
                    ladderE.boxes[j].index --;
                }
                ladderF.boxes.shift();
                for(var j=0; j<ladderF.boxes.length; j++){
                    ladderF.boxes[j].index --;
                }
            }
        }

        function drawScore(){
            cxt.save();
            cxt.font="40px Verdana";
            cxt.fillStyle = 'skyblue';
            cxt.fillText(score + "", 280, 314);
            cxt.restore();
        }

        var last = new Date();
        document.onkeydown = (function(e){
            var now = new Date();
            if((now.getTime() - last.getTime()) < 200 || isCal){
                return;
            }
            last = now;
            switch(e.which){
                case 39:
                    del60(ladderA);
                    del60(ladderB);
                    del60(ladderC);
                    del60(ladderD);
                    del60(ladderE);
                    del60(ladderF);
                    break;
                case 37:
                    add60(ladderA);
                    add60(ladderB);
                    add60(ladderC);
                    add60(ladderD);
                    add60(ladderE);
                    add60(ladderF);
                    break;
            }
        });

        window.requestAnimationFrame =
                window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame;

        window.cancelRequestAnimationFrame =
                window.cancelRequestAnimationFrame ||
                window.mozCancelRequestAnimationFrame ||
                window.webkitCancelRequestAnimationFrame ||
                window.msCancelRequestAnimationFrame;

        function animate() {
            index ++;
            erase();
            draw();
            if(iStop){
                cancelRequestAnimationFrame(timer);
            }else{
                timer = requestAnimationFrame(animate);
            }
        }

        animate();
    </script>
</div>
</body>
</html>






本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5325899.html，如需转载请自行联系原作者

文章标签：
索引
前端开发
关键词：
微信游戏
技术mix呢
目录
相关文章
八音盒coding
|
7月前
|
小程序 JavaScript Java
基于微信小程序的游戏账号交易微信小程序的设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的游戏账号交易微信小程序的设计与实现(源码+lw+部署文档+讲解等)
八音盒coding
53 1
特创码农
|
7月前
|
小程序 API
微信小程序飞机大战游戏步骤及代码
微信小程序飞机大战游戏步骤及代码
特创码农
229 0
特创码农
|
7月前
|
存储 小程序 开发者
微信小程序猜拳游戏步骤及代码
微信小程序猜拳游戏步骤及代码
特创码农
149 0
特创码农
|
7月前
|
小程序 开发者
微信小程序狼人杀游戏代码及步骤
微信小程序狼人杀游戏代码及步骤
特创码农
249 0
小蚂蚁XMY
|
7月前
微信小游戏制作工具关于游戏屏幕适配，看这篇就够了！
微信小游戏制作工具关于游戏屏幕适配，看这篇就够了！
小蚂蚁XMY
204 0
小蚂蚁XMY
|
开发工具 Android开发 图形学
微信小游戏是个人尝试做游戏最好的选择
我自己现在正在做微信小游戏，而且也在教很多的学员做微信小游戏。你可能会觉得我这样说是有一定的动机的，但其实不然，如果我自己不相信这个平台的话，那其实我是没有必要自己做的，只需要忽悠让别人相信就可以了。但是现在我自己也正在致力于做这件事，这也证明了我对它的认可。不是有这么一句话吗？不要轻易相信一个人说了什么，而要看他做了什么
小蚂蚁XMY
151 0
小蚂蚁XMY
微信小游戏开发系列教程3-熟悉所使用的游戏制作工具
这一节我们会熟悉一下将要使用的游戏制作工具-微信小游戏制作工具，然后制作出第一个“你好，小游戏”的事例，向小游戏开发世界问好。 欢迎体验我的微信小游戏作品精致1010。
小蚂蚁XMY
108 0
小蚂蚁XMY
微信小游戏开发系列教程2-了解游戏全貌和一些游戏开发中的术语
这一节小蚂蚁将会带着大家先从整体上了解一个小游戏的全貌，然后再熟悉一些游戏开发领域中常用的术语。最后分享一下自己的一些经验和方法，希望能够帮助到那些刚进入游戏开发领域的新人。 欢迎体验我的微信小游戏作品：精致1010
小蚂蚁XMY
102 0
游客xddhikypg4wzc
|
小程序 开发者
微信公众号在线答题小程序系统怎么做答题游戏活动
微信公众号在线答题小程序系统怎么做答题游戏活动
游客xddhikypg4wzc
236 0
qasxfte752dni
|
小程序 JavaScript 前端开发
微信小程序 | 做一个小程序端的扫雷游戏
微信小程序 | 做一个小程序端的扫雷游戏
qasxfte752dni
385 0
微信小程序 | 做一个小程序端的扫雷游戏