好程序員分享js實現簡單的板球遊戲

時間 2019-12-04

標籤程序員分享實現簡單板球遊戲欄目快樂工作简体版

原文原文鏈接

好程序員分享js實現簡單的板球遊戲，你們好，本次咱們來使用js來實現一個簡單的板球遊戲。截圖以下：javascript

首先，設計頁面代碼，頁面代碼很簡單，由於整個幾乎是使用js編寫的，頁面幾乎沒有代碼，以下：css

<!DOCTYPE html>html

<html>java

<head>程序員

<title></title>數組

body{dom

margin: 0px;函數

}

</style>

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

}

};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。