网页打砖块游戏html代码

  • xxandxwx
    了解作者
  • HTML
    开发工具
  • 40.4KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 5 积分
    下载积分
  • 0
    下载次数
  • 2022-05-28 13:31
    上传日期
网页打砖块游戏html代码,有分步解释,从零到有的完整过程
打砖块.zip
  • 打砖块
  • test
  • demo1.html
    1.1KB
  • step7.html
    8.6KB
  • step2.html
    1.4KB
  • step4.html
    1.9KB
  • step1.html
    1.2KB
  • step3.html
    1.9KB
  • step5.html
    2.6KB
  • h2.jpg
    31KB
  • step6.html
    5.7KB
内容介绍
<html> <head> <title>HTML5 Course</title> <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script> </head> <body onload="init();"> <canvas id="testCanvas" width="1000" height="500"></canvas> <script> const PADDLE_WIDTH = 100; const PADDLE_HEIGHT = 20; const BRICKS_WIDTH = 60; const BRICKS_HEIGHT = 30; const BALL_RADIUS = 8; const FULL_X_SPEED = 7; var stage; var paddle; var ball; var bricks = []; var score = 0; var lives = 3; var scoreText; var gameStarted = false; const KEYCODE_LEFT = 37; const KEYCODE_RIGHT = 39 const SPACEBAR = 32; var keyboardMoveLeft = false; var keyboardMoveRight = false; var highScore = 0; function init() { if(typeof(Storage) !== "undefined") { if(localStorage.highScore==undefined) { localStorage.highScore = 0; } highScore = localStorage.highScore; } else { highScore = 0; } stage = new createjs.Stage("testCanvas"); createjs.Touch.enable(stage); createPaddle(); createBall(); createBrickGrid(); createScoreText(); stage.canvas.height = window.innerHeight; createjs.Ticker.setFPS(60); createjs.Ticker.addEventListener("tick", tick); //Changed to tick from stage stage.on("stagemousedown", function(event) { startLevel(); }); stage.on("stagemousemove", function (event) { paddle.x = stage.mouseX; }); //keyboard handlers window.onkeyup = keyUpHandler; window.onkeydown = keyDownHandler; } function startLevel() { if(!gameStarted) { console.log("Start Game"); gameStarted = true; ball.xSpeed = 5; ball.ySpeed = 5; ball.up = true; ball.right = true; } } function keyDownHandler(e) { switch(e.keyCode) { case KEYCODE_LEFT: keyboardMoveLeft = true; break; case KEYCODE_RIGHT: keyboardMoveRight = true; break; case SPACEBAR: startLevel(); break; } } function keyUpHandler(e) { switch(e.keyCode) { case KEYCODE_LEFT: keyboardMoveLeft = false; break; case KEYCODE_RIGHT: keyboardMoveRight = false; break; } } function addToScore(points) { score+=points; updateStatusLine(); } function createScoreText() { scoreText = new createjs.Text("Score: 0", "16px Arial", "#000000"); addToScore(0); scoreText.y = stage.canvas.height - 16; stage.addChild(scoreText); } function updateStatusLine() { scoreText.text = "成绩: "+score + " / 生命: "+lives+" / 得分记录: "+highScore; } function loseLife() { console.log("Lose A Life"); lives--; ball.xSpeed = 0; ball.ySpeed = 0; ball.x = paddle.x; ball.y = paddle.y - PADDLE_HEIGHT/2 - BALL_RADIUS; gameStarted = false; if(lives==0) { if(highScore<score) { highScore = score; localStorage.highScore = score; } lives = 3; score = 0; } updateStatusLine(); } function tick(event) { if(keyboardMoveLeft) { console.log("Keyboard - Left"); paddle.x-=5; } if(keyboardMoveRight) { console.log("Keyboard - Right"); paddle.x+=5; } if(paddle.x+PADDLE_WIDTH/2>stage.canvas.width) { paddle.x = stage.canvas.width - PADDLE_WIDTH/2; } if(paddle.x-PADDLE_WIDTH/2<0) { paddle.x = PADDLE_WIDTH/2; } if(!gameStarted) { ball.x = paddle.x; ball.y = paddle.y - PADDLE_HEIGHT/2 - BALL_RADIUS; stage.update(); return; } if(ball.up) { ball.y -= ball.ySpeed; } else { ball.y += ball.ySpeed; } if(ball.right) { ball.x += ball.xSpeed; } else { ball.x -= ball.xSpeed; } for(var i=0;i<bricks.length;i++) { if(checkCollision(ball,bricks[i])) { addToScore(100); console.log("Brick Hit / New Score: "+score); destroyBrick(bricks[i]); bricks.splice(i,1); i--; } } if(checkCollision(ball,paddle)) { newBallXSpeedAfterCollision(ball,paddle); } //Check if we've reached the walls if(ball.x+BALL_RADIUS>=stage.canvas.width) { ball.x = stage.canvas.width-BALL_RADIUS; ball.right = false; } if(ball.x-BALL_RADIUS<=0) { ball.x = BALL_RADIUS; ball.right = true; } if(ball.y-BALL_RADIUS<=0) { ball.y = BALL_RADIUS; ball.up = false; } if(ball.y+BALL_RADIUS>=stage.canvas.height) { loseLife(); } ball.lastX = ball.x; ball.lastY = ball.y; stage.update(); } function checkCollision(ballElement,hitElement) { var leftBorder = (hitElement.x - hitElement.getBounds().width/2); var rightBorder = (hitElement.x + hitElement.getBounds().width/2); var topBorder = (hitElement.y - hitElement.getBounds().height/2); var bottomBorder = (hitElement.y + hitElement.getBounds().height/2); var previousBallLeftBorder = ballElement.lastX - BALL_RADIUS; var previousBallRightBorder = ballElement.lastX + BALL_RADIUS; var previousBallTopBorder = ballElement.lastY - BALL_RADIUS; var previousBallBottomBorder = ballElement.lastY + BALL_RADIUS; var ballLeftBorder = ballElement.x - BALL_RADIUS; var ballRightBorder = ballElement.x + BALL_RADIUS; var ballTopBorder = ballElement.y - BALL_RADIUS; var ballBottomBorder = ballElement.y + BALL_RADIUS; if((ballLeftBorder<=rightBorder) && (ballRightBorder >= leftBorder) && (ballTopBorder <= bottomBorder) && (ballBottomBorder >= topBorder)) { if((ballTopBorder <= bottomBorder)&&(previousBallTopBorder > bottomBorder)) { //Hit from the bottom ballElement.up = false; ballElement.y = bottomBorder + BALL_RADIUS; } if((ballBottomBorder >= topBorder)&&(previousBallBottomBorder<topBorder)) { //Hit from the top ballElement.up = true; ballElement.y = topBorder - BALL_RADIUS; } if((ballLeftBorder<=rightBorder)&&(previousBallLeftBorder>rightBorder)) { //Hit from the right ballElement.right = true; ballElement.x = rightBorder + BALL_RADIUS; } if((ballRightBorder >= leftBorder)&&(previousBallRightBorder < leftBorder)) { //Hit from the left ballElement.right = false; ballElement.x = leftBorder - BALL_RADIUS; } ballElement.lastX = ballElement.x; ballElement.lastY = ballElement.y; return true; } return false; } function newBallXSpeedAfterCollision(ballElement,hitElement) { var startPoint = hitElement.x - hitElement.getBounds().width/2; var midPoint = hitElement.x; var endPoint = hitElement.x + hitElement.getBounds().width/2; if(ballElement.x<midPoint) { ball.right = false; ball.xSpeed = FULL_X_SPEED - ((ballElement.x - startPoint)/(midPoint-startPoint)) * FULL_X_SPEED } else { ball.xSpeed = FULL_X_SPEED - ((endPoint - ballElement.x)/(endPoint-midPoint)) * FULL_X_SPEED ball.right = true; } } function createBrickGrid() { for(var i = 0;i<14;i++) for(var j = 0;j<5;j++) { createBrick(i*(BRICKS_WIDTH+10)+40,j*(BRICKS_HEIGHT+5)+20); } } function createBrick(x,y) { var brick = new createjs.Shape(); brick.graphics.beginFill('#000FFF'); brick.graphics.drawRect(0, 0, BRICKS_WIDTH, BRICKS_HEIGHT); brick.graphics.endFill(); brick.regX = BRICKS_WIDTH/2; brick.regY = BRICKS_HEIGHT/2; brick.x = x; brick.y = y; brick.setBounds(brick.regX,brick.regY,BRICKS_WIDTH,BRICKS_HEIGHT); stage.addChild(brick); bricks.push(brick); } function destroyBrick(brick) { createjs.Tween.get(brick,{}).to({scaleX:0,scaleY:0}, 500) setTimeout(removeBrickFromScreen,500,brick) } function removeBrickFromScreen(brick) { stage.removeChild(brick) } function createBall() { ball = new createjs.Shape(); ball.graphics.beginFill("Red").drawCircle(0,0, BALL_RADIUS);
评论
    相关推荐
    • Essential Guide to HTML5学习笔记
      Essential Guide to HTML5学习笔记,基础的html5编程入门
    • qpopper2.53.tar.Z
      pop3 server
    • imap-4.7.tar.Z
      被广泛使用的email服务器 /IMAPD/POPD
    • 53308459Add_Dlt_TabCtrl.rar
      Tab分页的删除和添加,实现分页动态的管理。
    • ns-allinone-2.33.tar.gz
      ns2.33这是目前比较新的ns2版本,欢迎下载
    • NetVideoActiveX23.rar
      海康威视 网络监控插件 带有例子 和开发的dll文件,非常易用
    • UR054g_(R01).zip
      法国inventel的ur054g(r01)v1.1的无线网卡驱动。
    • eat.rar
      外卖叫餐系统,采用ACCESS数据库,有完整天的后台管理系统
    • KSTVTUNE.ZIP
      装摄像头驱动需要用到的文件。Microsoft DirectX 9 SDK
    • Skin++.rar
      知名的Skin++界面库,内含所有库文件和大量皮肤文件.该库使用方便,可以减少您美化程序的痛苦.本版是破解版,没有注册提示.但只供学习研究使用哦,不要用在商业用途.