Javascript Games

這堂課會學到什麼？

． HTML 基礎架構

 

． JavaScript 基礎語法

 

． Canvas

 

． Snake game 實作

 

． Minesweeper 實作

HTML

HyperText Markup Language

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

Example

Javascript

Not Java !

Example

<script language="javascript">
</script>

HTML

Javascript

console.log("HelloWorld!");

Variable 

var Jizz = 7122;
console.log("Jizz is " + Jizz);

var J = 7, i = 1, z = 2;
console.log(J*1000 + i*100 + z*10 + z);

If - else

var Jizz = 7122;
var 2qbx = 7122;

if (Jizz == 2qbx) {
    console.log("No 2qbx!");
} else if (2qbx == "Miku") {
    console.log("oil 2qbx");
} else {
    console.log("error");
}

for ()

for (var i = 0; i < 7122; i++) {
    console.log(i);
}

function f()

function f() {
    console.log("03t");
}

Array

var eric = ['E', 'R', 'I', 'C'];
for (var i = 0; i < 4; i++) {
    console.log(eric[i]);
}

var num = [];
for (var i = 0; i < 100; i++) {
    num.push(i);
}

實作練習

請實作一個可以求出費氏數列第 k 項的程式

Fibonacci Sequence

var k = 71;
var mtx = [1, 1,
           1, 0];
var ans = [1, 0,
           1, 0];
function mtxMuliple2D(a, b) {
	var tmp = [0, 0, 0, 0];
	tmp[0] = a[0] * b[0] + a[2] * b[1];
	tmp[1] = a[1] * b[0] + a[3] * b[1];
        tmp[2] = a[0] * b[2] + a[2] * b[3];
	tmp[3] = a[1] * b[2] + a[3] * b[3];
	return tmp;
}
for (var p = 1; p <= k; p *= 2) {
	if (p & k) ans = mtxMuliple2D(mtx, ans);
	mtx = mtxMuliple2D(mtx, mtx);
}
console.log("ans : " + ans[0]);

Canvas

  • HTML 5 支援的一種元素
  • 作為畫布使用

Example

<canvas id="example" width="200" height="200"> </canvas>

HTML

Javascript

var example = document.getElementById('example');
var ctx = example.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

Rectangle

ctx.fillRect(x, y, width, height);

畫出一個填滿的矩形

ctx.strokeRect(x, y, width, height);

畫出一個矩形的邊框

ctx.clearRect(x, y, width, height);

清除指定矩形內的內容

Text

ctx.font

決定字體大小 & 字型

ctx.textAlign

決定文字的對齊方式

ctx.fillText(text, x, y);

將文字繪製於指定座標上

實作練習

請用 Canvas 畫出一個 3*3 的表格，分別填入數字 1~9，使得任一行、列、斜排數字的總和均為15

Snake 貪食蛇

Minesweeper 踩地雷

Made with Slides.com