# JavaScript 小遊戲(亂數 隨機 ) 座標
###### tags: `JavaScript`
---
## 亂數
### Math.random()
產生亂數
* 這個函數會隨機產生出0~1之間的小數，最大的數不會大於等於1，也就是0.9999...9而最小的數不會等於0也就是0.0000...01
### Math.floor()
取整數
* 這個函式會將所有的小數無條件捨去到比自身小的最大整數
### console.log()
測試用
練習亂數寫法:
```javascript=
<body>
<p>請猜一個0到3的整數</p>
<input id="myInput" type="text" value="">
<button id="myButton">送出</button>
<script>
var x = 4
console.log(Math.pow(x,3)); //測試用，表示x的3次方
document.getElementById('myButton').onclick = function(){
var x = Math.random(); //產生亂數
x = x * 4;
x = Math.floor(x); //取整數
console.log(x); //測試用，寫在網頁原始碼中
if( x== document.getElementById('myInput').value){
alert("恭喜您答對了!");
}else{
alert("您猜錯了，這個數字是" + x);
}
}
</script>
</body>
```
### setTimeout(function() { }, timeout);
* 在指定時間執行...的方法
```javascript=
<script>
function makeBox() {
var time = Math.random(); //設定time為亂數
time = time * 2000; //把time乘2000毫秒
setTimeout(function() { //在指定時間的方法
document.getElementById('box').style.display = "block";
//呼叫HTML的box，指定樣式為display block
}, time); //設定setTimeout的時間為變數time
}
document.getElementById('box').onclick = function(){
//當點擊box執行display none
this.style.display = "none";
makeBox(); //makeBox指定時間出來→點擊消失→出來 無限循環
}
makeBox(); //一開始出現的makeBox
</script>
```
### Date.now();
現在時間公式(抓取電腦上的時間)
#### 完整遊戲程式:
```javascript=
<head>
<style>
body {
font-family: 'Fira code','微軟正黑體';
background-color: rgba(247, 158, 192, 0.5);
color: #ff3864;
}
:root {
--bound;
}
.bold {
font-weight: bold;
}
#box {
width: var(--bound);
height: var(--bound);
background-color: red;
display: none;
position: relative;
}
</style>
</head>
<body>
<!-- 考反應遊戲 -->
<h1>考考您的反應!</h1>
<p class="blod">反應時間:<span id="time">0</span>秒</p>
<div id="box"></div>
<script>
// 設定圖型顏色隨機
function getRandomColor(){
var max = 200;
var min = 50;
var green = Math.floor(Math.random() * (max - min + 1)) + min;
var color = "rgba(247, " + green + ", 192, 1.0)";
return color;
}
//1.設定時間變數
var createdTime;
var clickedTime;
var reactionTime;
//2.設定圖型資訊
function makeBox() {
var time = Math.random();
//設定time為亂數
time = time * 2000;
//把time乘2000毫秒
setTimeout(function() {
//在指定時間公式
if(Math.random() >= 0.5){
document.getElementById('box').style.borderRadius = "70px";
//如果亂數大於0.5，圖型圓角70px
}else{
document.getElementById('box').style.borderRadius = "0px";
//反之沒有圓角
}
console.log(window.innerWidth);
console.log(window.innerHeight);
//測試視窗寬與高
//3.定義圖型位置
var min = 0;
var max = window.innerHeight - 280;
var top = Math.floor(Math.random() * (max - min +1)) + min;
min = 0;
max = window.innerWidth - 140;
var left= Math.floor(Math.random() * (max - min +1)) + min;
document.getElementById('box').style.top = top + "px";
document.getElementById('box').style.left = left + "px";
//設定隨機出現的位置，從上距與左距算過來
//4.設定圖型隨視窗大小縮放
var dynamicBound;
if(window.innerWidth > window.innerHeight){
dynamicBound = window.innerWidth / 8;
}else{
dynamicBound = window.innerHeight / 8;
}
dynamicBound = dynamicBound + "px";
document.documentElement.style.setProperty("--bound",dynamicBound)
document.getElementById('box').style.backgroundColor =getRandomColor();
//顯示圖型顏色隨機，bgC之間不需要-但要記得大寫
document.getElementById('box').style.display = "block";
//呼叫HTML的box，指定樣式為display block
createdTime = Date.now();
//抓取圖型創建時間
}, time);
//設定setTimeout的時間為變數time
}
document.getElementById('box').onclick = function(){
this.style.display = "none";
//當點擊box執行display none
clickedTime = Date.now();
//抓取點擊當下時間
reactionTime = (clickedTime - createdTime) / 1000;
//相減除以1000得到秒數
document.getElementById('time').innerHTML = reactionTime;
//替換HTML秒數時間
makeBox();
//makeBox指定時間出來→點擊消失→出來 無限循環
}
makeBox();
//一開始出現的makeBox
</script>
</body>
```
---
## CSS變數 :root{}
* 在:root命名變數，我們也可以在任意的選擇器內命名變數，後面會提到該怎麼寫，以及怎麼使用。
* 變數命名的規則為：開頭必須是兩個破折號 --。
* 在要呼叫變數的選擇器裡面，使用var()呼叫該變數，可以把它想成 function。
* 變數的大小寫是兩個不同的變數，例：--main-color和--Main-Color是不同的變數。
>可參考[
SASS, LESS 退散，原生 CSS 可以使用變數啦！](https://muki.tw/tech/native-css-variables/ "
SASS, LESS 退散，原生 CSS 可以使用變數啦！")
舉例:
定義一個變量在:root偽類上，使用變量來減少重複的代碼。
```css=
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
```
## JS 座標
[更多座標設定可參考這篇](https://www.jianshu.com/p/c8f0062b8d1f "图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别")
#### 綜合練習:滑鼠發光球球↓
:::spoiler
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root {
--mouse-x;
--mouse-y;
--radius:40px;
--factor: 1;
--scale;
}
body {
background-color: #000000;
}
#ball {
width: var(--radius);
height: var(--radius);
border-radius: 50%;
background-color: #fbd771;
position: absolute;
transform: translate(calc(var(--mouse-x) * 1px - var(--radius) / 2),calc(var(--mouse-y) * 1px - var(--radius) / 2));
}
.halo {
width: var(--radius);
height: var(--radius);
border-radius: 50%;
background-color: #FBD771;
opacity: 0.15;
position: absolute;
transform:scale(calc(var(--factor) * var(--scale)));
}
.halo:nth-of-type(1){
--factor:0.3;
}
.halo:nth-of-type(2){
--factor:0.5;
}
.halo:nth-of-type(3){
--factor:0.9;
}
</style>
</head>
<body>
<div id = "ball">
<div class="halo"></div>
<div class="halo"></div>
<div class="halo"></div>
</div>
<script>
//2.設定變數
var ball_x = 0;
var ball_y = 0;
var mouse_x = 0;
var mouse_y = 0;
var vel_x = 0;
var vel_y = 0;
//↓constant常數 宣告不能再被改變
const docStyle = document.documentElement.style;
const strength = 0.15;
const drag = 0.15;
//1.取得滑鼠標
document.addEventListener("mousemove",(event) => {
/*↓測試抓取瀏覽器X軸與Y軸的位置
console.log(event.clientX);
console.log(event.clientY);*/
//↓讓滑鼠位置相等於瀏覽器X軸與Y軸的距離
mouse_x = event.clientX;
mouse_y = event.clientY;
});
// 3.設定球球延遲動畫
function delayMotion() {
//↓宣告距離_x等於滑鼠_x - 球球_x
var distance_x = mouse_x - ball_x;
distance_x *= strength;
vel_x *= drag;
vel_x += distance_x;
ball_x += distance_x;
/*↓讓球球的位置相等於滑鼠
ball_x = mouse_x;
ball_y = mouse_y;*/
//↓宣告距離_y等於滑鼠_y - 球球_y
var distance_y = mouse_y - ball_y;
distance_y *= strength;
vel_y *= drag;
vel_y += distance_y;
ball_y += distance_y;
//↓設定CSS setProperty屬性
docStyle.setProperty("--mouse-x",ball_x);
docStyle.setProperty("--mouse-y",ball_y);
docStyle.setProperty("--scale",(vel_x + vel_y) * strength);
//↓設定CSS語法的延遲動畫
requestAnimationFrame(delayMotion);
}
//讓delayMotion顯示出來
delayMotion();
</script>
</body>
</html>
```
:::
---
<style>
h2 {
color: #2383F8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383F8;
padding:8px;
}
</style>
Sign in with Wallet
Connect another wallet