Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h2>刮刮樂小遊戲</h2>
<canvas id="bottom"></canvas>
<canvas id="top"></canvas>
<div id="btn">
  <button onclick="next()">再來一次</button>
  <p>温馨提示:每人每天三次刮刮樂機會~</p>
</div>
              
            
!

CSS

              
                 *{
   margin: 0;
   padding: 0;
}
html,body{
  width: 100%;
  height: 100%;
  position: relative;
  color: #f40;
}
h2{
  padding-top: 20%;
  text-align: center;
  font-size: 30px;
}
canvas{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-100px;
  margin-top: -50px;
  cursor: pointer;
}
#btn{
  margin-top: 20%;
  text-align: center;
}
#btn button{
  font-size: 20px;
  color: #fff;
  background: #169bd5;
  border-color: #169bd5;
  border-radius: 5px;
  padding: 5px 20px;
  display: none;
  margin: 0 auto 10px;
}
img{
  width: 200px;
  height: 100px;
  display: none;
}
              
            
!

JS

              
                var useNumber=0,
    luckNumber=[],
    mousedown,
    w = 200,
    h = 100;
var bottomCanvas = document.querySelector("#bottom");
var topCanvas = document.querySelector('#top');
topCanvas.width = bottomCanvas.width = w;
topCanvas.height = bottomCanvas.height = h;
var ctxBot = bottomCanvas.getContext("2d");
var ctxTop = topCanvas.getContext('2d');
bottomCanvas.style.background = "#f40";
ctxBot.font = "30px 微軟雅黑";

function drawBot(){
    //清除區域,為了點擊再來一次進行頁面重繪
    ctxBot.clearRect(0, 0, w, h);
    luckNumber.push(random());
    //fillText(填充)實心數字 改為strokeText(描邊)為空心數字
    ctxBot.fillText( luckNumber[luckNumber.length-1],70,55);
}

//獲取1-1000隨機數
function random(){
    return Math.ceil(Math.random()*1000);
}

drawBot();
drawTop();  

function drawTop(){
    ctxTop.canvas.style.opacity = 1;
    ctxTop.fillStyle = 'purple';
    ctxTop.fillRect(0, 0, w, h);
    
    //判斷當前是否為第一次刮開,不是則清除上一次區域
    if(ctxTop.globalCompositeOperation != 'destination-out'){
        ctxTop.globalCompositeOperation = 'destination-out';
    }else{
        ctxTop.clearRect(0, 0, w, h);
    }
}

//鼠標移動開始刮圖層
topCanvas.addEventListener('touchstart', eventDown);
topCanvas.addEventListener('touchend', eventUp);
topCanvas.addEventListener('touchmove', eventMove);
topCanvas.addEventListener('mousedown', eventDown);
document.addEventListener('mouseup', eventUp);
topCanvas.addEventListener('mousemove', eventMove);

function eventDown(ev){
    ev = ev || event;
    ev.preventDefault();
    mousedown=true;
}

function eventUp(ev){
    ev = ev || event;
    ev.preventDefault();
    mousedown=false;
}

function eventMove(ev){
    ev = ev || event;
    ev.preventDefault();
    if(mousedown) {
        if(ev.changedTouches){
            ev=ev.changedTouches[ev.changedTouches.length-1];
        }
        var x = ev.pageX - this.offsetLeft;
        var y = ev.pageY - this.offsetTop;
        ctxTop.beginPath();
        ctxTop.arc(x, y, 10, 0, Math.PI * 2);
        ctxTop.fill();
        alertInfo();
    }
}


// 判斷刮開區域大於60%時,頂層canvas消失,顯示底層數據
function alertInfo(){
    var data = ctxTop.getImageData(0,0,w,h).data;
    var n = 0 ;
    for (var i = 0; i < data.length; i++) {
      if (data[i] == 0) {
        n++;
      };
		};
    if (n >= data.length * 0.6) {
        ctxTop.globalCompositeOperation = 'destination-over';
        ctxTop.canvas.style.opacity = 0;
        document.querySelector("button").style.display="block";
        alert(luckNumber[luckNumber.length-1]);
    }
}


//點擊再來一次進行頁面重繪next
function next(){
    useNumber++;
//判斷當前點擊次數
    if(useNumber>2){
        alert("今日抽獎次數用完啦~今日所抽號碼為"+luckNumber);
        document.querySelector("button").disabled = true;
    }else{
        drawBot();
        drawTop();
    }
}
              
            
!
999px

Console