DAY 27
0
Modern Web

## Day27. 雖然今年是2021，但我們要做2048(1)

• 基本容器宣告與畫面初始
• 依據滑動改變重力
• 隨機初始圓形
• 滑行後生出新的圖形但是短暫 Sleep
• 滑行後喚醒全部的 Sleep 圖形
• 碰撞時判定合併
• 合併計分
• 自適應畫面大小

• 基本容器宣告與畫面初始
• 依據滑動改變重力

// main.js
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Events = Matter.Events,
Plugins = Matter.Plugins;

var engine;
var render;
var runner;
const canvasWidth = 600;
const canvasHeight = 600;
const wallThickness = 30;

// main.js
var wallA = Bodies.rectangle(canvasWidth/4, canvasHeight/4, canvasWidth, wallThickness, { isStatic: true, angle : getRadiusByDegree(315), render:{fillStyle:"#BC6C25"}});
var wallB = Bodies.rectangle(canvasWidth*3/4, canvasHeight/4, canvasWidth, wallThickness, { isStatic: true, angle : getRadiusByDegree(45), render:{fillStyle:"#DDA15E"}});
var wallC = Bodies.rectangle(canvasWidth/4, canvasHeight*3/4, canvasWidth, wallThickness, { isStatic: true, angle : getRadiusByDegree(45), render:{fillStyle:"#283618"}});
var wallD = Bodies.rectangle(canvasWidth*3/4, canvasHeight*3/4, canvasWidth, wallThickness, { isStatic: true, angle : getRadiusByDegree(315), render:{fillStyle:"#606C38"}});

// formObject.js
function createBall(side)
{
var x;
var y;
var offset = 20;
switch(side)
{
case "top":
x = canvasWidth / 2;
y = wallThickness + offset;
break;
case "left":
x = wallThickness + offset;
y = canvasHeight / 2;
break;
case "right":
x = canvasWidth - wallThickness - offset;
y = canvasHeight / 2;
break;
case "down":
x = canvasWidth / 2;
y = canvasHeight - wallThickness - offset;
break;
}
var ballInfo = getBallInfo(1);
var ball = Bodies.circle(x, y, ballInfo.size, options = { render : {fillStyle: ballInfo.color}, isSleeping : true}, 80);
Composite.add(engine.world, [ball]);
}

function getBallInfo(level)
{
const ballColor = ["#D8F3DC","#B7E4C7","#95D5B2","#74C69D","#52B788","#40916C","#2D6A4F","#1B4332","#1B4332","#081C15"];
var ballSzie = Math.sqrt(4*level)* 10;
return {
color : ballColor[level-1],
size : ballSzie
}
}

// swipedEvent.js
document.addEventListener('swiped-up', function(e) {
swipeScreen("up");
});
document.addEventListener('swiped-down', function(e) {
swipeScreen("down");
});
document.addEventListener('swiped-left', function(e) {
swipeScreen("left");
});
document.addEventListener('swiped-right', function(e) {
swipeScreen("right");
});

function swipeScreen(side)
{
gravityChange(side);
}

// swipedEvent.js
function gravityChange(side)
{
switch(side)
{
case "up":
engine.gravity.x = 0;
engine.gravity.y = -1;
return;
case "down":
engine.gravity.x = 0;
engine.gravity.y = 1;
return;
case "left":
engine.gravity.x = -1;
engine.gravity.y = 0;
return;
case "right":
engine.gravity.x = 1;
engine.gravity.y = 0;
return;
}

}

### 1 則留言

0
juck30808
iT邦新手 2 級 ‧ 2021-10-12 18:38:16