1. 程式人生 > >好程式設計師分享js實現簡單的板球遊戲

好程式設計師分享js實現簡單的板球遊戲

好程式設計師分享js實現簡單的板球遊戲,大家好,本次我們來使用js來實現一個簡單的板球遊戲。截圖如下:

首先,設計頁面程式碼,頁面程式碼很簡單,因為整個幾乎是使用js編寫的,頁面幾乎沒有程式碼,如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

body{

margin: 0px;

}

</style>

<script src

="js/common.js" type="text/javascript" charset="utf-8"></script>

</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;

}

};

相關推薦

no