EP.27 ฝึกพิมพ์ดีด 3

noMerzy | 2016-10-11 14:27:03

ฝึกพิมพ์ดีด 3


คราวนี้จะเป็นการต่อยอดโปรแกรมฝึกพิมพ์ดีด 2 โดยการเพิ่มเมนูเลือกภาษาไทยและภาษาอังกฤษ
type.html
<!DOCTYPE html> <html> <head> <title>Type practice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> canvas { background-color: #00aadd; } </style> </head> <body onload="startGame()"> <script> //พื้นดิน var ground; //คะแนน var score; //พลังชีวิต var life; //ข้อความพลังชีวิต var hp; //อาเรย์อักษร var text = []; //เมนู var menuText, menuEng; function startGame() { //สร้างพื้นดิน ground = new component(640, 80, "green", 0, 400, 'draw'); //สร้างคะแนน score = new component("20px", "Tahoma", "white", 420, 450, 'text'); //hp hp = new component("20px", "Tahoma", "white", 20, 450, 'text'); hp.text = "HP"; //สร้างพลังชีวิต life = new component(200, 20, "red", 50, 433, 'draw'); //เริ่มเกม gameArea.start(); } //พื้นที่เกม var gameArea = { //พื้นที่วาดรูป canvas: document.createElement("canvas"), //เริ่มเกม start: function () { //ความกว้างเกม this.canvas.width = 640; //ความสูงเกม this.canvas.height = 480; //วาดรูป 2มิติ this.context = this.canvas.getContext("2d"); //แทรกลงใน body document.body.insertBefore(this.canvas, document.body.childNodes[0]); //เซ็ตเฟรมเป็น 0 this.frameNo = 0; //อัพเดทเกมทุกๆ 20 มิลลิวินาที this.interval = setInterval(updateGameArea, 20); }, //เคลียร์รูปภาพ clear: function () { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } //อีเวนต์คลิ๊ก document.addEventListener('click', function (e) { game.menuClick(e.clientX, e.clientY); }, false); var game = { stat: "menu", //สถานะของเกม option: { //ภาษาของเกม lang: "thai" }, menuScreen: function () { //ฟังก์ชั่นสร้างเมนูเลือกภาษา menuThBg = new component(260, 60, "rgba(0,0,0,0)", 180, 160, 'draw'); menuTh = new component("40px", "tahoma", 'white', 200, 200, 'text'); menuTh.text = "ภาษาไทย"; menuEngBg = new component(260, 60, "rgba(0,0,0,0)", 180, 230, 'draw'); menuEng = new component("40px", "tahoma", 'white', 200, 270, 'text'); menuEng.text = "ภาษาอังกฤษ"; menuThBg.update(); menuEngBg.update(); menuTh.update(); menuEng.update(); ground.update(); }, menuClick: function (x, y) { //ฟังก์ชั่นเมื่อเลือกภาษา var click = new component(3, 3, "white", x, y); if (click.crashWith(menuThBg)) { //ภาษาไทย this.option.lang = "thai"; this.stat = "play"; //เริ่มเกม } if (click.crashWith(menuEngBg)) { //ภาษาอังกฤษ this.option.lang = "english"; this.stat = "play"; //เริ่มเกม } }, play: function () { //ถ้าเลือดหมด เกมโอเวอร์ if (this.checkOver()) { return; } var posX, str; //เพิ่มเฟรม gameArea.frameNo += 1; //ถ้าเฟรม = 1 หรือทุกๆ 150 เฟรม if (gameArea.frameNo == 1 || everyinterval(100)) { //สุ่มเกิดอักษร 1 - 3 ตัวอักษร ยากขึ้นทุกๆ 50 ตัวอักษร randStr = Math.floor((Math.random() * (3 + Math.floor(score.score / 50))) + 1); //ลูปจำนวนที่สุ่ม for (i = 0; i < randStr; i++) { //สุ่มสปีด 1-2 randSpeed = Math.floor((Math.random() * 2) + 1); //สุ่มตำแหน่งแกนX 30-610 px posX = Math.floor(Math.random() * (580 + 1) + 30); if (game.option.lang == "thai") { //สุ่มอักษรภาษาไทย rand = Math.floor((Math.random() * 56) + 3585); } else { //สุ่มอักษรภาษาอังกฤษ rand = Math.floor((Math.random() * 26) + 97); } //สร้างอักษรจาก charcode str = String.fromCharCode(rand); //สร้างคอมโพแนนต์ text.push(new component("30px", "Tahoma", "white", posX, 0, 'text')); //ตัวอักษรที่จะแสดง text[text.length - 1].text = str; //ความเร็วของตัวอักษร text[text.length - 1].gravity = randSpeed; } } for (i = 0; i < text.length; i++) { text[i].indexArr = i; //เลื่อนตำแหน่งแกน y text[i].newPos(); //วาดรูปท่อ text[i].update(); } //อัพเดท ground.update(); hp.update(); life.update(); score.text = "คะแนน : " + score.score; score.update(); }, checkOver: function () { /* * ฟังก์ชันตรวจสอบเกมโอเวอร์ */ if (life.width < 1) { var gameOver = new component("50px", "Tahoma", "red", 200, 240, 'text'); gameOver.text = "Game Over"; gameOver.update(); ground.update(); hp.update(); life.update(); score.text = "คะแนน : " + score.score; score.update(); game.stat = "over"; return true; } return false; } } /* * ชิ้นส่วนในเกม */ function component(width, height, color, x, y, type) { //ประเภท (ไว้แยกอักษรกับวัตถุ) this.type = type; //คะแนน this.score = 0; //ข้อความ this.text; //ความกว้างวัตถุ this.width = width; //ความสูงวัตถุ this.height = height; //ตำแหน่งแกน x this.x = x; //ตำแหน่งแกน y this.y = y; //ความเร็วแนวดิ่ง this.gravity = 0; //ความเร็วแรงดึงดูด this.gravitySpeed = 0; //ลำดับอาเรย์ this.indexArr = 0; //อัพเดท วัตถุ(ตำแหน่ง, ตัวอักษร) this.update = function () { //วาดรูป 2d //this.context = this.canvas.getContext("2d"); ctx = gameArea.context; //ถ้าเป็นข้อความ if (this.type == "text") { //ความกว้างความสูงตัวอักษร ctx.font = this.width + " " + this.height; //สีตัวอักษร ctx.fillStyle = color; //วาดตัวอักษร //ctx.fillText([ตัวอักษร], [ตำแหน่งx], [ตำแหน่งy]); ctx.fillText(this.text, this.x, this.y); } if (this.type == "draw") { //สีวัตถุ ctx.fillStyle = color; //วาดวัตถุ ctx.fillRect(this.x, this.y, this.width, this.height); } } //ตำแหน่งใหม่ของชิ้นส่วน this.newPos = function () { this.y += this.gravity; //ขอบล่างของเกม this.hitBottom(); } //ตรวจสอบขอบล่างของเกม this.hitBottom = function () { //ตำแหน่งขอบล่าง = ความสูงพื้นที่เกม - ความสูงนก var ground = gameArea.canvas.height - 80; //ถ้าอักษรอยู่ต่ำกว่าพื้น if (this.y > ground) { //เลือดลด life.width -= 20; //เลือดต่ำสุด 0 if (life.width < 0) { life.width = 0; } text.splice(this.indexArr, 1); } } //ตรวจสอบการชน this.crashWith = function (otherobj) { //ด้านซ้ายของนก(x1) var left = this.x; //ด้านขวาวของนก(x2) var right = this.x + (this.width); //ด้านบนของนก(y1) var top = this.y; //ด้านล่างของนก(y2) var bottom = this.y + (this.height); //ด้านซ้ายของวัตถุอื่น(x1) var otherleft = otherobj.x; //ด้านขวาของวัตถุอื่น(x2) var otherright = otherobj.x + (otherobj.width); //ด้านบนของวัตถุอื่น(y1) var othertop = otherobj.y; //ด้านล่างของวัตถุอื่น(y2) var otherbottom = otherobj.y + (otherobj.height); //ให้ค่าการชนเป็น true(ไม่เกิดการชน) var crash = true; //ถ้าเกิดการชนกันตามสูตรตรวจสอบการชน if ((bottom < othertop) || (top > otherbottom) || (right < otherleft) || (left > otherright)) { //ให้ค่าเป็น false(เกิดการชน) crash = false; } //คืนค่าการชน return crash; } } /* * ฟังก์ชั่นอัพเดทตัวเกม */ function updateGameArea() { //ถ้าโอเวอร์ if (game.stat == "over") { return; } //ลบรูปเตรียมวาดใหม่ gameArea.clear(); //ถ้าเป็นหน้าเมนู if (game.stat == "menu") { game.menuScreen(); return; } if (game.stat == "play") { game.play(); } } /* * ฟังก์ชั่นตรวจสอบเฟรมทุกๆ n วินาที */ function everyinterval(n) { //เฟรม หารด้วย n ถ้าลงตัวให้คืนค่า true if ((gameArea.frameNo / n) % 1 == 0) { return true; } return false; } //กำหนดอีเวนต์การกดปุ่ม document.addEventListener('keypress', keyDown, false); function keyDown(e) { //ตรวจสอบการกดถูก var match = 0; if (window.event) { // IE keynum = e.keyCode; } else if (e.which) { // Netscape/Firefox/Opera keynum = e.which; } for (i = 0; i < text.length; i++) { //ถ้ากดถูก if (String.fromCharCode(keynum) === text[i].text) { //ลบอักษรออก text.splice(i, 1); //เพิ่มคะแนน score.score += 1; //เพิ่มเลือด life.width += 2; //เลือดสูงสุด 200 if (life.width > 200) { life.width = 200; } match = 1; return; } } if (match == 0) { life.width -= 10; if (life.width < 0) { life.width = 0; } } } </script> </body> </html>