Js to implement simple cricket games
Hello, this time we are going to use JS to implement a simple cricket game. Screenshot below:
First, design the page code, the page code is very simple, because the whole is almost written in JS, the page almost no code, as follows:
<! 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>
Here is the main js code common.js, as follows:
// Width and height of canvas
var canvasWidth;
var canvasHeight;
// The background image of the block
var bg;
/ / the ball
var ball;
/ / plate
var board;
// The width of the background box
var breakWidth;
// Coordinates and velocities of the ball
var ballX = 100;
var ballY;
var xVal = 5;
var yVal = -5;
// The coordinates of the board
var boardX = 0;
var boardY;
// Array of squares
var breakers = [];
// The original length of the board
var boardWidth = 242;
// Timing variable
var time = 0;
// Record whether the state changes
var breakerChanged = false;
var col = 10;
window.onload = function(){
// Create and set the canvas
var canvas = document.createElement(“canvas”);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvasWidth = canvas.width;
canvasHeight = canvas.height;
breakWidth = (canvasWidth-10) / col;
// Add the canvas to the body
document.body.appendChild(canvas);
var context = canvas.getContext(“2d”);
// The ball’s initial Y value
ballY = canvasHeight – 80;
// The board’s initial Y value
boardY = canvasHeight – 20;
// Load all images
loadAllImage();
// Define keyboard response events
document.onkeydown = boardMove;
// Start the program
setInterval(run, 20);
function run(){
// Empty the canvas
Context. ClearRect (0, 0, canvasWidth, canvasHeight);
// Draw background, ball, board
context.drawImage(bg, 0, -50, canvasWidth, canvasHeight + 50);
context.drawImage(ball, ballX, ballY);
context.drawImage(board, boardX, boardY, board.width, board.height);
// If you are in the process of getting longer
if(breakerChanged){
// Continue timing
time++;
// When the time reaches 5 seconds
if(time >= 250){
/ / reduction
breakerChanged = false;
time = 0;
board.width = boardWidth;
}
}
// Draw a square
updateBreakers();
// Update the position of the ball
updateBall();
// Collision of ball and square
ballHitBreakers();
// The ball hits the board
ballHitBoard();
}
function boardMove(){
// Move left
if(event.keyCode == 37){
boardX -= 30;
if(boardX <= 0){
boardX = 0;
}
}
// Move to the right
else if(event.keyCode == 39){
boardX += 30;
if(boardX >= canvasWidth – board.width){
boardX = canvasWidth – board.width;
}
}
}
// Simply determine the collision between the ball and the board
function ballHitBoard(){
if(hit(boardX, boardY – 60, board.width, board.height, ballX, ballY)){
yVal = -yVal;
}
}
// Simply determine the collision of balls and squares
function ballHitBreakers(){
// Start the loop from the back
for (var i = breakers.length – 1; i >= 0; i–) {
var breaker = breakers[i]; // 3 attributes,item, x, y
// If a collision occurs
if(hit(breaker.x, breaker.y, breakWidth, 30, ballX, ballY)){
// The lengthened state
if(breaker.state == 1){
// Determine if you are already in a lengthened state
if(breakerChanged){
// If it has become longer, the time should be refreshed
Board.width = boardWidth * 1.5;
time = 0;
}else{
// If it starts to get longer, change the state
Board.width = boardWidth * 1.5;
breakerChanged = true;
}
}else if(breaker.state == 2){
// Determine if you are already in a lengthened state
if(breakerChanged){
// If it has become longer, the time should be refreshed
Board.width = boardWidth * 0.5;
time = 0;
}else{
// If it starts to get longer, change the state
Board.width = boardWidth * 0.5;
breakerChanged = true;
}
}
// Block disappears (array removes an element)
breakers.splice(i, 1);
/ / the ball back
yVal = -yVal;
}
}
}
// Simple collision function
function hit(bx, by, bw, bh, x, y){
if(x >= bx && x <= bx + bw && y >= by && y <= by + bh){
return true;
}else{
return false;
}
}
// Ball movement
function updateBall(){
ballX += xVal;
ballY += yVal;
// Close to the left margin
if(ballX <= 0){
xVal = -xVal;
}
// Near the top margin
if(ballY <= 30){
yVal = -yVal;
}
// Test the code so that the ball never drops
//if(ballY >= canvasHeight – 80){
//yVal = -yVal;
/ /}
// Close to the right margin
if(ballX >= canvasWidth – 60){
xVal = -xVal;
}
}
// Load all squares
function createBreakers(){
/ / loop line
for (var i = 0; i < col; i++) {
/ / cycle
for (var j = 0; j < col; j++) {
// Get a random number from 4 to 9
var num = Math.floor(Math.random() * 6) + 4;
// Create an image
var item = loadImage(“img/ball/” + num + “.png”);
var x = breakWidth * j + j * 2;
var y = 30 * i + 30;
// key-value pairs
// {“item”:item, “x”:x, “y”:y}
// If it is a green square, make the board longer
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});
}
}
}
}
// Draw all squares
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”);
// Create a block
createBreakers();
}
// Load a single image
function loadImage(url){
var img = new Image();
img.src = url;
return img;
}
};
You can try, see the attachment for specific codes and resources.