js simple cricket game
Hello, everybody, let's use this js to implement a simple cricket game. Screenshot below:
First of all, design the page code page code is very simple, because almost the entire use js written 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>
Then there is the main js code common.js, as follows:
// width and height of the canvas
var canvasWidth;
var canvasHeight;
// box background image
var bg;
// Ball
was ball;
// board
was boards;
// the width of the box background
var breakWidth;
// coordinates of the ball and the speed
was ballX = 100;
var ballY;
was XVal = 5;
was yval = -5;
// coordinates plate
was boardX = 0;
var board;
// Array box
var breakers = [];
// plate original length
was board width = 242;
// Variable Timing
was h = 0;
// whether to change the state record
var breakerChanged = false;
var col = 10;
window.onload = function(){
// Create and set 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 to the body of the canvas
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
// ball initial Y value
ballY = canvasHeight - 80;
The initial value of Y // plate
Board canvasHeight = - 20;
// load all images
loadAllImage();
// define keyboard response events
document.onkeydown = boardMove;
// start programs
setInterval(run, 20);
function run(){
// Empty 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 becomes longer in
if(breakerChanged){
// continue timing
time++;
// When the time reaches five seconds
if(time >= 250){
// Restore
breakerChanged = false;
time = 0;
board.width = boardWidth;
}
}
// Draw the box
updateBreakers();
// Update the position of the ball
updateBall();
// collision with the ball square
ballHitBreakers();
// ball and plate collision
ballHitBoard();
}
function boardMove(){
// move to the 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;
}
}
}
// simple judgment collision balls and boards
function ballHitBoard(){
if(hit(boardX, boardY - 60, board.width, board.height, ballX, ballY)){
yVal = -yVal;
}
}
// simple judgment balls and box collision
function ballHitBreakers(){
// start from the back loop
for (var i = breakers.length - 1; i >= 0; i--) {
var breaker = breakers [i]; // 3 attributes, item, x, y
// If collision
if(hit(breaker.x, breaker.y, breakWidth, 30, ballX, ballY)){
// variable-length state
if(breaker.state == 1){
// determines whether the state becomes long been in
if(breakerChanged){
// If you have longer, should refresh time
board.width = boardWidth * 1.5;
time = 0;
}else{
// If you start to lengthen, it changes state
board.width = boardWidth * 1.5;
breakerChanged = true;
}
}else if(breaker.state == 2){
// determines whether the state becomes long been in
if(breakerChanged){
// If you have longer, should refresh time
board.width = boardWidth * 0.5;
time = 0;
}else{
// If you start to lengthen, it changes state
board.width = boardWidth * 0.5;
breakerChanged = true;
}
}
// square disappears (delete array element)
breakers.splice(i, 1);
// returns the ball
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;
}
}
// movement of the ball
function updateBall(){
ballX += xVal;
ballY += yVal;
// close margin left
if(ballX <= 0){
xVal = -xVal;
}
// close margins at the top
if(ballY <= 30){
yVal = -yVal;
}
// test code, never let the ball drop
//if(ballY >= canvasHeight - 80){
//yVal = -yVal;
//}
// close to the right margin
if(ballX >= canvasWidth - 60){
xVal = -xVal;
}
}
// Load all the boxes
function createBreakers(){
// Loop Line
for (var i = 0; i < col; i++) {
// Loop column
for (var j = 0; j < col; j++) {
// get a random number from 4 to 9
var num = Math.floor (Math.random () * 6) + 4;
// Create a picture
var item = loadImage("img/ball/" + num + ".png");
var x = breakWidth * j + j * 2;
where y = 30 * i + 30;
// key-value pair (key-value)
// {"item":item, "x":x, "y":y}
// If the green box to allow longer board
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 the boxes
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 the box
createBreakers();
}
// Load a single image
function loadImage(url){
was img = new Image ();
img.src = url;
return img;
}
};
You can try, specific code and resources of the annex.