手機apk樣板

點擊螢幕改變滑板位子

碰撞後變色再次碰撞後消失，計分器、計數器 三角變色

建置方塊 碰裝2次後消失 count++

設置計數器

count++

if(b.count  == 2){b.status = 0;}

三角形碰撞 底部漏接結束遊戲

反彈+擋板

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

function drawBall() {
    ctx.beginPath();
var height = 10*Math.sin(Math.PI/3);
ctx.moveTo(x-15,y+30);
ctx.lineTo(x,y);
ctx.lineTo(x+15,y+30);
var grd = ctx.createLinearGradient(0,0,250,0);
grd.addColorStop(0,"#4CE8B2");
grd.addColorStop(1,"#EFD458");
ctx.fillStyle=grd;
ctx.fill();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy < ballRadius) {
        dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
        if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else {
            alert("GAME OVER");
            document.location.reload();
        }
    }
 
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
 
    x += dx;
    y += dy;
}

setInterval(draw, 10);

test三角形反彈

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 5;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;

function drawBall() {
   ctx.beginPath();
var height = 10*Math.sin(Math.PI/3);//计算等边三角形的高
ctx.moveTo(x,y); //从A（100,0）开始
ctx.lineTo(x-15,y+30);//从A(100,0)开始，画到B (0,173)结束
ctx.lineTo(x+15,y+30); //B(0,173)-C(200,173)
var grd = ctx.createLinearGradient(0,0,20,0);//使用渐变颜色填充,从(0,0)到(200,0) （左到右）
grd.addColorStop(0,"#4CE8B2"); //起始颜色
grd.addColorStop(1,"#EFD458"); //终点颜色
ctx.fillStyle=grd; //以上面定义的渐变填充
ctx.fill(); //闭合形状并且以填充方式绘制出来
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }

 
    x += dx;
    y += dy;
}

setInterval(draw, 10);

消方塊製作練習 1

消除殘影

球的發射方向與速度



方向改變由XY軸上的正負方向改訂

TEST 大小

UTF-8  

ˊ轉換文字

顯示文字 點擊圖片超連結

按按圖片看內文

Stitch say love

變數>>迴圈>>判斷 Stitch say love


點擊2次變換圖片並顯示提示

按鍵切換圖片

判斷設定 Stitch say hi

if    else

= =為什麼案件不能弄

抱歉！瀏覽器不支援HTML5 canvas。
No canvas support in this browser

運用Google map的內建程式

點擊後出現座標：

定位座標並顯示座標位址

tast 總和

Your browser does not support the canvas element.

改變畫布

// 取得 Canvas 元素

var c=document.getElementById("myCanvas");

// 建立繪製物件

var ctx=c.getContext("2d");

// 設定顏色

ctx.fillStyle="#FF0000";

// 清空現行路徑，開始新路徑。

ctx.beginPath();

// 繪製圓形 參數依序為 x、y、半徑r、起始角度、結束角度、順時針繪製

ctx.arc(70, 18, 15, 0, Math.PI * 2, true);

// 封閉路徑

ctx.closePath();

// 執行繪製(填滿)

ctx.fill();

 一開始的圖換一張新的在畫上一個圓

Your browser does not support the canvas element.

三種指令 播放暫停/拖移/快慢

<button onclick="playVid()" type="button">播放</button>
<button onclick="pauseVid()" type="button">暂停</button>
<br />
<br />


拖移
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

影片快速慢速

影片放速度

指示音頻/視頻的默認播放速度。

例值：

• 1.0 正常速度
• 0.5 半速（更慢）
• 2.0 倍速（更快）
• -1.0 向後，正常速度
• -0.5 向後，半速

function setPlaySpeed()

  { 

  myVid.defaultPlaybackRate=0.25;

  myVid.load();

  } 

tast.2-9453<撥放>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>tast9453</title>
</head>
<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/6P8_hBRYxjw" frameborder="0" allowfullscreen></iframe>

</body>
</html>


測試播放 <崁入語法>
youtube > 分享 > 語法
   

tast bar