模仿微信"转你妹"游戏
<!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>
模仿微信"转你妹"游戏的更多相关文章
- 自定义控件(模仿微信ToggleButton控件)
弄过android开发的都知道,系统有一个默认的ToggleButton,但很多人都觉得他很难看,当然也包括我.如果你感觉他不难看,那你就继续使用系统的吧,这篇文章对你来说是多余的了. 今天来写一个模 ...
- （转）ZXing生成二维码和带logo的二维码，模仿微信生成二维码效果
场景:移动支付需要对二维码的生成与部署有所了解,掌握目前主流的二维码生成技术. 1 ZXing 生成二维码 首先说下,QRCode是日本人开发的,ZXing是google开发,barcode4j也是老 ...
- Android Studio精彩案例(三)《模仿微信ViewPage+Fragment实现方式二》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 写在前面的话:此专栏是博主在工作之余所写,每一篇文章尽可能写的思路清晰一些,属于博主的"精华"部分,不同于以往专栏 ...
- 微信小程序开发(5) 2048游戏
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...
- css模仿微信弹出菜单
css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
- js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
- 微信小程序——【百景游戏小攻略】
微信小程序--[百景游戏小攻略] 本次课程小项目中的图片以及文章还未获得授权!请勿商用!未经授权,请勿转载! 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE ...
- 一个模仿微信群聊的H5页面
开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品. 页面的主体是群聊对话,同时在对话中包含了很多 ...
- Android 模仿微信启动动画（转）
本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...
随机推荐
- 在后台代码中引入XAML的方法
本文将介绍三种方法用于在后台代码中动态加载XAML,其中有两种方法是加载已存在的XAML文件,一种方法是将包含XAML代码的字符串转换为WPF的对象. 一.在资源字典中载入项目内嵌资源中的XAML文件 ...
- POJ 3273 Monthly Expense 二分枚举
题目:http://poj.org/problem?id=3273 二分枚举,据说是经典题,看了题解才做的,暂时还没有完全理解.. #include <stdio.h> #include ...
- 自定义modal一个控制器的效果, presentViewController
presentViewController 一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UI ...
- [原博客] POI系列(1)
正规.严谨.精妙. -POI 发现POI(波兰信息学奥赛)的题都很有意思.于是开刷bzoj上的poi题目(按ac人数降序..).顺手写一写题解,加深印象. 为了防止一篇文章过于长,打算每五道题另起一篇 ...
- csu 10月 月赛 J 题
Description CSU又到了一年中评奖学金的时候了……各大学霸都或多或少地拿到了各种奖学金(你们自己看着办吧). 在这里,评奖学金有个很奇怪的规矩——每个同学得到的奖学金数一定满足相邻的两个非 ...
- linux下使用NFS挂载文件系统
转自linux如何使用NFS挂载文件系统 设备:一台服务器和一台客户端,这里我们把装在PC机上的RedHat作为服务器,而客户端则是嵌入式linux开发板. 环境:开发板已启动,连接好串口和网线,串口 ...
- PYTHON小CASE
import os import time source = ['C:\\py\\', 'C:\\work\\'] target_dir = 'C:\\backup' today = target_d ...
- IE连EXCHANGE的HTTPS时，出现错误
"There is a problem with this website's security certificate" 这种问题,一般是SSL或CA认证证书的问题. 一般从服务 ...
- vs2010自带的报表
本例用来显示Northwind中的order details表中的数据交分组 1.建立一WinForm程序,并建立一数据库连接,选择order details表,此时会自动建立一个xsd的数据集类,如 ...
- [OJ] Matrix Zigzag Traversal
LintCode #46. Matrix Zigzag Traversal (Easy) class Solution { public: vector<int> printZMatrix ...