Skip to content

php / dencare-game

Go to a project
Commit 536de39f by zhangheng
Options

1

parent 0b868ed6
Showing with 428 additions and 26 deletions
Application/Home/View/default/Index_index.tpl
......@@ -229,21 +229,26 @@
<div class="dialog dialog-share" style="display: none">
<img src="__CDN__/images/share.png">
</div>
<div class="page-no-prize" style="display: none">
<div class="zhou m-b-zhou-sate-two"></div>
<div class="c-d m-b-sate-two"></div>
<div class="btn">
<div class="btn-share"></div>
<div class="btn-j-x"></div>
<div class="page-sate page-g" style="display: none">
<div class="bj">
<div class="g-bj">
<div id="scratch">
<div id="card">
<img src="__CDN__/images/no-przie.jpg">
</div>
</div>
<div class="btn-g-g-bj"></div>
</div>
<div class="no-prize" style="display: block"></div>
<div class="prize" style="display: none">
<div class="btn-info"></div>
</div>
<div class="btn">
<div class="btn-share"></div>
<div class="btn-j-x"></div>
</div>
</div>
</div>
<div class="page-prize" style="display: none">
<div class="zhou m-b-zhou-sate-two"></div>
<div class="c-d m-b-sate-two"></div>
<img class="prize-map" src="__CDN__/images/prize-1.jpg">
<div class="btn-info"></div>
</div>
<div class="page-info" style="display: none">
<div class="zhou m-b-zhou-sate"></div>
<div class="c-d m-b-sate"></div>
......@@ -285,6 +290,7 @@
}
</script>
<script type="text/javascript" src="__CDN__/js/konva.min.js"></script>
<script type="text/javascript" src="__CDN__/js/lucky-card.js"></script>
<script type="text/javascript" src="__CDN__/js/swiper.min.js"></script>
<script type="text/javascript"
src="http://api2.izhida.cn/wechat_js_config?app_id=wx4c3c856ab83a946b&v=1.2.1&api_list=all"></script>
......
Public/static/css/main.css
......@@ -1004,13 +1004,6 @@ ul, li {
}
.page-lang .map-30 {
opacity: 0;
position: absolute;
display: inline-block;
left: 214px;
top: 10017px;
background: url("../images/word-two.png") left top;
width: 247px;
height: 24px;
-webkit-animation: down 1s 1 linear 1s;
animation-fill-mode: forwards;
}
......@@ -1352,3 +1345,93 @@ ul, li {
height: 1091px;
background: url("../images/bj-two.jpg") no-repeat center;
}
.page-g {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 1234px;
}
.page-g .bj {
position: relative;
width: 601px;
height: 1093px;
background: url("../images/bj-three.jpg") no-repeat center;
}
.page-g .bj .g-bj {
position: absolute;
top: 60px;
left: 29px;
width: 539px;
height: 401px;
background: url("../images/map-.png") no-repeat center;
}
.page-g .bj .g-bj #scratch {
position: relative;
top: 48px;
left: 45px;
width: 447px;
height: 292px;
}
.page-g .bj .g-bj #cover {
position: absolute;
top: 0;
left: 0;
}
.page-g .bj .g-bj #card {
height: 292px;
font-weight: bold;
}
.page-g .bj .g-bj #card img {
width: 447px;
height: 292px;
}
.page-g .bj .g-bj .btn-g-g-bj {
position: absolute;
display: inline-block;
left: 83px;
top: 105px;
background: url("../images/g-g.png") left top;
width: 386px;
height: 182px;
}
.page-g .bj .no-prize {
position: absolute;
display: inline-block;
left: 111px;
top: 461px;
background: url("../images/h-z.png") left top;
width: 430px;
height: 263px;
}
.page-g .bj .prize {
position: absolute;
display: inline-block;
left: 111px;
top: 443px;
background: url("../images/map-two.png") left top;
width: 422px;
height: 599px;
}
.page-g .bj .prize .btn-info {
position: absolute;
left: 0;
bottom: 0;
width: 391px;
height: 104px;
}
.page-g .btn {
display: flex;
justify-content: space-between;
position: absolute;
top: 990px;
left: 116px;
width: 422px;
height: 60px;
background: url("../images/no-prize.png") top center no-repeat;
}
.page-g .btn div {
flex: 1;
height: 60px;
}
Public/static/css/main.scss
......@@ -372,7 +372,7 @@ ul, li {
width: 640px;
height: 1111px;
.h-b{
.h-b {
position: absolute;
top: 108px;
left: 58px;
......@@ -731,7 +731,7 @@ ul, li {
.map-30 {
opacity: 0;
@include image_bounds_by_pos("../images/word-two.png", 214px, 10017px);
//@include image_bounds_by_pos("../images/word-two.png", 214px, 10017px);
-webkit-animation: down 1s 1 linear 1s;
animation-fill-mode: forwards
}
......@@ -873,8 +873,8 @@ ul, li {
.dialog_game_rule {
.map {
position: relative;
left: 77px!important;
top: 61px!important;
left: 77px !important;
top: 61px !important;
width: 489px !important;
height: 870px !important;
}
......@@ -898,14 +898,17 @@ ul, li {
left: 585px !important;
top: 18px !important;
}
.m-b-zhou-sate-two {
left: 585px !important;
top: 104px !important;
}
.m-b-sate-two{
.m-b-sate-two {
left: 541px !important;
top: 103px !important;
}
.m-b-sate {
left: 542px !important;
top: 20px !important;
......@@ -1093,10 +1096,87 @@ ul, li {
-webkit-transform: translate3d(0, -10px, 0)
}
}
.b-j-two {
position: relative;
display: block;
width:100%;
width: 100%;
height: 1091px;
background: url("../images/bj-two.jpg") no-repeat center;
}
.page-g {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 1234px;
.bj {
position: relative;
width: 601px;
height: 1093px;
background: url("../images/bj-three.jpg") no-repeat center;
.g-bj {
position: absolute;
top: 60px;
left: 29px;
width: 539px;
height: 401px;
background: url("../images/map-.png") no-repeat center;
#scratch {
position: relative;
top: 48px;
left: 45px;
width: 447px;
height: 292px;
}
#cover {
position: absolute;
top: 0;
left: 0;
}
#card {
height: 292px;
font-weight: bold;
img {
width: 447px;
height: 292px;
}
}
.btn-g-g-bj {
@include image_bounds_by_pos("../images/g-g.png", 83px, 105px);
}
}
.no-prize {
@include image_bounds_by_pos("../images/h-z.png", 111px, 461px);
}
.prize {
@include image_bounds_by_pos("../images/map-two.png", 111px, 443px);
.btn-info {
position: absolute;
left: 0;
bottom: 0;
width: 391px;
height: 104px;
}
}
}
.btn {
display: flex;
justify-content: space-between;
position: absolute;
top: 990px;
left: 116px;
width: 422px;
height: 60px;
background: url("../images/no-prize.png") top center no-repeat;
div {
flex: 1;
height: 60px;
}
}
}
\ No newline at end of file
Public/static/js/index.js
......@@ -55,6 +55,9 @@ $(document).ready(function () {
});
var prize_lock = true;
$('.btn-prize').on(clickEvent, function () {
$('.page-s-c').hide();
$('.page-g').show();
return;
if (!prize_lock) {
return;
......
Public/static/js/lucky-card.js 0 → 100644
/*
* lucky-card.js - Scratch CARDS based on HTML5 Canvas
*
* Copyright (c) 2015 Frans Lee dmon@foxmail.com
*
* https://github.com/Franslee/lucky-card
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Version: 1.0.3
*
* Update:
* 1.0.1 Fixed a bug with "coverImg".(Thanks to dongnanyanhai reported the problem) 2015-11-10
* 1.0.2 Fixed a bug when page can be scrolling.(Thanks to agileago's report & Tomatoo's pull) 2016-03-17
* 1.0.3 Fixed some bugs. 2017-08-17
*
*/
;
(function(window, document, undefined) {
'use strict';
/**
* Instantiate parameters
*
* @constructor
*/
function LuckyCard(settings, callback) {
this.cover = null;
this.ctx = null;
this.scratchDiv = null;
this.cardDiv = null;
this.cHeight = 0;
this.cWidth = 0;
this.supportTouch = false;
this.events = [];
this.startEventHandler = null;
this.moveEventHandler = null;
this.endEventHandler = null;
this.opt = {
coverColor: '#C5C5C5',
coverImg: '',
ratio: .8,
callback: null
};
this.init(settings, callback);
};
function _calcArea(ctx, callback, ratio) {
var pixels = ctx.getImageData(0, 0, this.cWidth, this.cHeight);
var transPixels = [];
_forEach(pixels.data, function(item, i) {
var pixel = pixels.data[i + 3];
if (pixel === 0) {
transPixels.push(pixel);
}
});
if (transPixels.length / pixels.data.length > ratio) {
callback && typeof callback === 'function' && callback();
}
}
function _forEach(items, callback) {
return Array.prototype.forEach.call(items, function(item, idx) {
callback(item, idx);
});
}
function _isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
/**
* touchstart/mousedown event handler
*/
function _startEventHandler(event) {
event.preventDefault();
this.moveEventHandler = _moveEventHandler.bind(this);
this.cover.addEventListener(this.events[1],this.moveEventHandler,false);
this.endEventHandler = _endEventHandler.bind(this);
document.addEventListener(this.events[2],this.endEventHandler,false);
};
/**
* touchmove/mousemove event handler
*/
function _moveEventHandler(event) {
event.preventDefault();
var evt = this.supportTouch?event.touches[0]:event;
var coverPos = this.cover.getBoundingClientRect();
var pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var mouseX = evt.pageX - coverPos.left - pageScrollLeft;
var mouseY = evt.pageY - coverPos.top - pageScrollTop;
this.ctx.beginPath();
this.ctx.fillStyle = '#FFFFFF';
this.ctx.globalCompositeOperation = "destination-out";
this.ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI);
this.ctx.fill();
};
/**
* touchend/mouseup event handler
*/
function _endEventHandler(event) {
event.preventDefault();
if (this.opt.callback && typeof this.opt.callback === 'function') _calcArea.call(this,this.ctx, this.opt.callback, this.opt.ratio);
this.cover.removeEventListener(this.events[1],this.moveEventHandler,false);
document.removeEventListener(this.events[2],this.endEventHandler,false);
};
/**
* Create Canvas element
*/
LuckyCard.prototype.createCanvas = function() {
this.cover = document.createElement('canvas');
this.cover.id = 'cover';
this.cover.height = this.cHeight;
this.cover.width = this.cWidth;
this.ctx = this.cover.getContext('2d');
if (this.opt.coverImg) {
var _this = this;
var coverImg = new Image();
coverImg.src = this.opt.coverImg;
coverImg.onload = function() {
_this.ctx.drawImage(coverImg, 0, 0, _this.cover.width, _this.cover.height);
}
} else {
this.ctx.fillStyle = this.opt.coverColor;
this.ctx.fillRect(0, 0, this.cover.width, this.cover.height);
}
this.scratchDiv.appendChild(this.cover);
this.cardDiv.style.opacity = 1;
}
/**
* To detect whether support touch events
*/
LuckyCard.prototype.eventDetect = function() {
if('ontouchstart' in window) this.supportTouch = true;
this.events = this.supportTouch ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];
this.addEvent();
};
/**
* Add touchstart/mousedown event listener
*/
LuckyCard.prototype.addEvent = function() {
this.startEventHandler = _startEventHandler.bind(this);
this.cover.addEventListener(this.events[0],this.startEventHandler,false);
};
/**
* Clear pixels of canvas
*/
LuckyCard.prototype.clearCover = function() {
this.ctx.clearRect(0, 0, this.cover.width, this.cover.height);
this.cover.removeEventListener(this.events[0],this.startEventHandler);
this.cover.removeEventListener(this.events[1],this.moveEventHandler);
this.cover.removeEventListener(this.events[2],this.endEventHandler);
};
/**
* LuckyCard initializer
*
* @param {Object} settings Settings for LuckyCard
* @param {function} callback callback function
*/
LuckyCard.prototype.init = function(settings, callback) {
if(!_isCanvasSupported()){
alert('对不起，当前浏览器不支持Canvas，无法使用本控件！');
return;
}
var _this = this;
_forEach(arguments, function(item) {
if (typeof item === "object") {
for (var k in item) {
if (k === 'callback' && typeof item[k] === 'function') {
_this.opt.callback = item[k].bind(_this);
} else {
k in _this.opt && (_this.opt[k] = item[k]);
}
}
} else if (typeof item === "function") {
_this.opt.callback = item.bind(_this);
}
});
this.scratchDiv = document.getElementById('scratch');
this.cardDiv = document.getElementById('card');
if (!this.scratchDiv || !this.cardDiv) return;
this.cHeight = this.cardDiv.clientHeight;
this.cWidth = this.cardDiv.clientWidth;
this.cardDiv.style.opacity = 0;
this.createCanvas();
this.eventDetect();
};
/**
* To generate an instance of object
*
* @param {Object} settings Settings for LuckyCard
* @param {function} callback callback function
*/
LuckyCard.case = function(settings, callback) {
return new LuckyCard(settings, callback);
};
if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
define(function() {
return LuckyCard;
});
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = LuckyCard.case;
module.exports.LuckyCard = LuckyCard;
} else {
window.LuckyCard = LuckyCard;
}
})(window, document);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment