好程式設計師分享js實現簡單的板球遊戲
好程式設計師分享js實現簡單的板球遊戲，大家好，本次我們來使用js來實現一個簡單的板球遊戲。截圖如下：
首先，設計頁面程式碼，頁面程式碼很簡單，因為整個幾乎是使用js編寫的，頁面幾乎沒有程式碼，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin: 0px;
}
</style>
<script src
</head>
<body>
</body>
</html>
接下來就是主要的js程式碼common.js，如下：
// 畫布的寬高
var canvasWidth;
var canvasHeight;
// 方塊的背景圖片
var bg;
// 球
var ball;
// 板
var board;
// 背景方塊的寬度
var breakWidth;
// 球的座標和速度
var ballX = 100;
var ballY;
var xVal = 5;
var yVal = -5;
// 板的座標
var boardX = 0;
var boardY;
// 方塊陣列
var breakers = [];
// 板的原始長度
var boardWidth = 242;
// 計時變數
var time = 0;
// 記錄是否改變狀態
var breakerChanged = false;
var col = 10;
window.onload = function
// 建立並設定canvas
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvasWidth = canvas.width;
canvasHeight = canvas.height;
breakWidth = (canvasWidth-10) / col;
// 將畫布新增到body中
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
// 球的初始Y值
ballY = canvasHeight - 80;
// 板的初始Y值
boardY = canvasHeight - 20;
// 載入所有的圖片
loadAllImage();
// 定義鍵盤響應事件
document.onkeydown = boardMove;
// 開始啟動程式
setInterval(run, 20);
function run(){
// 清空畫布
context.clearRect(0,0,canvasWidth, canvasHeight);
// 繪製背景、小球、板
context.drawImage(bg, 0, -50, canvasWidth, canvasHeight + 50);
context.drawImage(ball, ballX, ballY);
context.drawImage(board, boardX, boardY, board.width, board.height);
// 如果處於變長的過程中
if(breakerChanged){
// 繼續計時
time++;
// 當時間達到5秒鐘
if(time >= 250){
// 還原
breakerChanged = false;
time = 0;
board.width = boardWidth;
}
}
// 繪製方塊
updateBreakers();
// 更新小球的位置
updateBall();
// 球與方塊的碰撞
ballHitBreakers();
// 球與板的碰撞
ballHitBoard();
}
function boardMove(){
// 向左移動
if(event.keyCode == 37){
boardX -= 30;
if(boardX <= 0){
boardX = 0;
}
}
// 向右移動
else if(event.keyCode == 39){
boardX += 30;
if(boardX >= canvasWidth - board.width){
boardX = canvasWidth - board.width;
}
}
}
// 簡單判斷球和板的碰撞
function ballHitBoard(){
if(hit(boardX, boardY - 60, board.width, board.height, ballX, ballY)){
yVal = -yVal;
}
}
// 簡單判斷球和方塊的碰撞
function ballHitBreakers(){
// 從後面開始迴圈
for (var i = breakers.length - 1; i >= 0; i--) {
var breaker = breakers[i];// 3個屬性,item, x, y
// 如果碰撞
if(hit(breaker.x, breaker.y, breakWidth, 30, ballX, ballY)){
// 變長的狀態
if(breaker.state == 1){
// 判斷是否已經處於變長狀態
if(breakerChanged){
// 如果已經變長，應該重新整理時間
board.width = boardWidth * 1.5;
time = 0;
}else{
// 如果開始變長，就改變狀態
board.width = boardWidth * 1.5;
breakerChanged = true;
}
}else if(breaker.state == 2){
// 判斷是否已經處於變長狀態
if(breakerChanged){
// 如果已經變長，應該重新整理時間
board.width = boardWidth * 0.5;
time = 0;
}else{
// 如果開始變長，就改變狀態
board.width = boardWidth * 0.5;
breakerChanged = true;
}
}
// 方塊消失(陣列刪除一個元素)
breakers.splice(i, 1);
// 球返回
yVal = -yVal;
}
}
}
// 簡單碰撞函式
function hit(bx, by, bw, bh, x, y){
if(x >= bx && x <= bx + bw && y >= by && y <= by + bh){
return true;
}else{
return false;
}
}
// 球的運動
function updateBall(){
ballX += xVal;
ballY += yVal;
// 靠近左邊的邊距
if(ballX <= 0){
xVal = -xVal;
}
// 靠近頂部的邊距
if(ballY <= 30){
yVal = -yVal;
}
// 測試程式碼，讓球永遠不掉落
// if(ballY >= canvasHeight - 80){
// yVal = -yVal;
// }
// 靠近右邊的邊距
if(ballX >= canvasWidth - 60){
xVal = -xVal;
}
}
// 載入所有的方塊
function createBreakers(){
// 迴圈行
for (var i = 0; i < col; i++) {
// 迴圈列
for (var j = 0; j < col; j++) {
// 得到一個4~9的隨機數
var num = Math.floor(Math.random() * 6) + 4;
// 建立一個圖片
var item = loadImage("img/ball/" + num + ".png");
var x = breakWidth * j + j * 2;
var y = 30 * i + 30;
// 鍵值對(key-value)
// {"item":item, "x":x, "y":y}
// 如果是綠色的方塊，讓板變長
if(num == 9){
breakers.push({"item":item, "x":x, "y":y, "state":1});
}
else if(num == 4){
breakers.push({"item":item, "x":x, "y":y, "state":2});
}
else{
breakers.push({"item":item, "x":x, "y":y, "state":0});
}
}
}
}
// 繪製所有的方塊
function updateBreakers(){
for (var i = 0; i < breakers.length; i++) {
context.drawImage(breakers[i].item, breakers[i].x, breakers[i].y, breakWidth, 30);
}
}
function loadAllImage(){
bg = loadImage("img/ball/bg.png");
ball = loadImage("img/ball/ball.png");
board = loadImage("img/ball/board.png");
// 建立方塊
createBreakers();
}
// 載入單張圖片
function loadImage(url){
var img = new Image();
img.src = url;
return img;
}
};
相關推薦
好程式設計師分享js實現簡單的板球遊戲
好程式設計師分享js實現簡單的板球遊戲，大家好，本次我們來使用js來實現一個簡單的板球遊戲。截圖如下： 首先，設計頁面程式碼
好程式設計師分享Web前端開發就業前景如何？
開發十年，就只剩下這套架構體系了！ >>>
好程式設計師分享Web前端知識之HTML
今天好程式設計師分享Web前端知識之HTML。Web前端技術由HTML、CSS和Javascript三大部分構成，而我們在學習
好程式設計師分享使用JavaScript正則表示式如何去掉雙引號
好程式設計師分享使用JavaScript正則表示式如何去掉雙引號最近接了一個專案，專案需求需要用js正則表示式過濾掉頁面文字域中值
好程式設計師分享HTML5精品技術文章--前端崗位需求分析
好程式設計師分享HTML5精品技術文章--前端崗位需求分析，各位小夥伴大家好，根據多年豐富的面試經歷和崗位分析，對前端面試的技
好程式設計師分享JavaScript程式碼組織結構良好的5個特點
好程式設計師分享JavaScript程式碼組織結構良好的5個特點，隨著JavaScript專案的成長，如果你不小心處理的話，他們往
好程式設計師分享該如何選擇background-image和img標籤
好程式設計師分享該如何選擇background-image和img標籤，用img標籤 如果你希望別人列印頁面時候包含這張圖片
好程式設計師分享大資料三大必備技能
大資料，人工智慧引領IT技術風潮，引法時代變革！國家鼎力扶持，前景斐然！吃瓜群眾蜂擁而至，報名培訓機構，爭當一名出色的大資料工程師
好程式設計師分享Python自動化運維開發實戰 六、流程控制
好程式設計師分享Python自動化運維開發實戰 六、流程控制 PYTHON 條件語句 Python條件語句是通過一條或多條
好程式設計師分享Python自動化運維開發實戰五-運算子與表示式
好程式設計師分享自動化運維開發實戰五-運算子與表示式 導語：1.什麼是運算子2.什麼是表示式3.python運算子分類4.pyt
好程式設計師分享Java開發常用規範技巧二
1、使用一些日期類的時候，推薦使用LocalDateTime來替代Calendar類，或者說使用Instant來替代掉Date類。
好程式設計師分享Linux重器vi編輯器
建立練習檔案 [root@tianyun ~]# ll -a > list.txt 檔案編輯器 gedit 檔案編
好程式設計師分享DDL之操作資料庫
好程式設計師分享DDL之操作資料庫，大家都知道DDL是資料庫定義語言，用來定義資料庫物件：資料庫、表、列等。今天我們就來學習一
好程式設計師分享placeholder屬性詳解
好程式設計師分享placeholder屬性詳解，HTML5裡新引入很多有趣的新特徵；有些體現在HTML裡，有些是JavaScr
好程式設計師分享Web前端效能優化
好程式設計師分享Web前端效能優化，Web前端效能優化的結果直接影響到使用者體驗，而使用者體驗則與網站的滿意度息息相關，所以，We
好程式設計師前端分享使用JS開發簡單的音樂播放器
好程式設計師前端分享使用JS開發簡單的音樂播放器，最近，我們在教學生使用JavaScript，今天就帶大家開發一款簡單的音樂播放器
好程式設計師技術分享jQuery實現類似fullpage外掛的全屏滾動效果
開發十年，就只剩下這套架構體系了！ >>>
好程式設計師web前端教程分享js檔案引用編碼方式
開發十年，就只剩下這套架構體系了！ >>>
好程式設計師web前端分享JS檢查瀏覽器型別和版本
好程式設計師web前端分享JS檢查瀏覽器型別和版本，先取得Navigator物件的userAgent屬性的小寫資訊，之後根據正則表
好程式設計師web前端分享如何理解JS的單執行緒
好程式設計師web前端分享如何理解JS單執行緒，JS本質是單執行緒的。也就是說，它並不能像JAVA語言那樣，兩個執行緒併發