使用 <canvas> 标签绘图，js实现撞球游戏（有注释）

最新推荐文章于 2024-07-07 23:10:31 发布
最新推荐文章于 2024-07-07 23:10:31 发布
阅读量191 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/wpsyp/p/6322030.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" src="js/jquery-1.8.2.min.js"></script>
<title>唐老鸭：撞球</title>
<style>

* {
   padding: 0; margin: 0;  background: #446644;
  }
canvas {
     background: #cc99cc;
     display: block;
     margin: 0 auto;
     padding:20px auto;
     border:1px solid #8f63cc ;
     margin-top: 10px
   }
.title{
  color: #0000cc;
  text-align: center;
  margin-top: 20px;
  font-size: 30px;
  background: #ccffcc;
  width: 480px;
  margin:0 auto;
  margin-top: 20px;
}
.start{
  color: #0000cc;
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
  background: #ccffcc;
  width: 100px;
  margin:0 auto;
  margin-top: 20px;
  cursor: pointer;
}
</style>
</head>

<body>
<div class="title">撞球游戏</div>
<canvas id="briksCanvas" width="480" height="460"></canvas>
<div class="start" flage="flage">开始游戏<div><strong>空格暂停</strong>
</body>

<script>
          var canvas = document.getElementById("briksCanvas");
          var ctx = canvas.getContext("2d");
          var stop_status=true;   //停止键是否有效，用来判断游戏结束后不能按停止键；
          var stop;   //停止动画
          var canvas_status=true;  //初始未按停止键
          //初始化
          //球
          var ballRadius = 10;
          var ballColor = "#f44280";

          var x = canvas.width/2;
          var y = canvas.height-25;
          //球移动速度（初始往左移动）
          var dx = -2;        //往左走
          var dy = -2;       //往上走
          //接盘
          var paddleHeight = 15;
          var paddleWidth = 75;
          var paddleX = (canvas.width-paddleWidth)/2;

          var rightPressed = false;
          var leftPressed = false;

          //bricks     顶部砖块

          var brickRowCount = 5;
          var brickColumnCount = 6;
          var brickWidth = 70;
          var brickHeight = 20;
          var brickPadding = 6;
          var brickOffsetTop = 35;
          var brickOffsetLeft = 15;

          var score = 0;
          var lives = 3;    //生命
          //初始化二维数组 ，存储砖块信息   status:1砖块显示，0砖块消失
          var bricks = [];
          for(c=0; c<brickColumnCount; c++) {
          bricks[c] = [];
          for(r=0; r<brickRowCount; r++) {
             bricks[c][r] = { x: 0, y: 0, status: 1 };
           }
          }
          //键盘右键，左键控制接盘移动开关
          function keyDownHandler(e) {
          if(e.keyCode == 39) {
             rightPressed = true;
          }
          else if(e.keyCode == 37) {
             leftPressed = true;
          }
          else if(e.keyCode == 32){
             if(stop_status){
                 if(canvas_status){
                     window.cancelAnimationFrame(stop);//可以取消该次动画。
                     canvas_status=false;
                 }else{
                     stop=requestAnimationFrame(draw);//动画继续
                     canvas_status=true;
                 }
             }
          }
          }
          function keyUpHandler(e) {
          if(e.keyCode == 39) {
             rightPressed = false;
          }
          else if(e.keyCode == 37) {
             leftPressed = false;
          }
          }

          //画球
          function drawBall() {
          ctx.beginPath();
          ctx.arc(x, y, ballRadius, 0, Math.PI*2);
          ctx.fillStyle = ballColor;
          ctx.fill();
          ctx.closePath();
          }
          //画盘
          function drawPaddle() {
          ctx.beginPath();
          ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); //居中底部
          ctx.fillStyle = "#0000ff";
          ctx.fill();
          ctx.closePath();
          }
          //砖块放置排列    画砖块
          function drawBricks() {
          for(c=0; c<brickColumnCount; c++) {
             for(r=0; r<brickRowCount; r++) {
                 if(bricks[c][r].status == 1) {
                     var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
                     var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
                     bricks[c][r].x = brickX;
                     bricks[c][r].y = brickY;
                     ctx.beginPath();
                     ctx.rect(brickX, brickY, brickWidth, brickHeight);
                     ctx.fillStyle = "#8f63cc";
                     ctx.fill();
                     ctx.closePath();
                 }
             }
          }
          }
          //分数
          function drawScore() {
          ctx.font = "16px Arial";
          ctx.fillStyle = "#f44280";
          ctx.fillText("Score: "+score, 15, 20);
          }
          //生命
          function drawLives() {
          ctx.font = "16px Arial";
          ctx.fillStyle = "#f44280";
          ctx.fillText("Lives: "+lives, canvas.width-70, 20);
          }

          function drawGO() {
          ctx.font = "16px Arial";
          ctx.fillStyle = "#f44280";
          ctx.fillText("GAME OVER",200,200);
          }
          //移动鼠标控制接盘
          function mouseMoveHandler(e) {
          var relativeX = e.clientX - canvas.offsetLeft;
          if(relativeX > 0 && relativeX < canvas.width) {
             paddleX = relativeX - paddleWidth/2;
          }
          }
        //砖块消失，球与砖块撞击时的条件判断     x,y表示球的位置
        function collisionDetection() {
          for(c=0; c<brickColumnCount; c++) {
             for(r=0; r<brickRowCount; r++) {
                 var b = bricks[c][r];
                 if(b.status == 1) {
                     if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                       //改变垂直方向
                         dy = -dy;
                         b.status = 0;
                         score++;
                         //全部撞击完成，重新开始
                         if(score == brickRowCount*brickColumnCount) {
                             document.location.reload();
                             //加快速度
                             x = canvas.width/2;
                             y = canvas.height-30;
                             dx = 3;
                             dy = -3;
                             paddleX = (canvas.width-paddleWidth)/2;
                         }
                     }
                 }
             }
          }
          }
        $(function(){
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          drawBall();
          drawPaddle();
          drawBricks();
          drawScore();
          drawLives();

          $(".start").click(function(){
              stop_status=true;
               if($(".start").attr("flage")=="flage"){
                   //重新开始之后重置砖块
                 for(c=0; c<brickColumnCount; c++) {
                    for(r=0; r<brickRowCount; r++) {
                        bricks[c][r].status =1;
                    }
                 }
                 $(".start").attr("flage","");
                 draw();

               //实时监听操作键盘和鼠标事件
               document.addEventListener("keydown", keyDownHandler, false);
               document.addEventListener("keyup", keyUpHandler, false);
               document.addEventListener("mousemove", mouseMoveHandler, false);
               }
          })
        })

          function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();
            drawBricks();
            drawScore();
            drawLives();
            collisionDetection();
          //碰左右墙壁换方向
          if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
             dx = -dx;
          }
          //到达顶部,
          if(y + dy < ballRadius) {
             dy = -dy;
          }
          else if(y + dy > canvas.height-(ballRadius+paddleHeight)) {//底部
             if(x > paddleX && x < paddleX + paddleWidth) {//盘子接住了球，改变方向
                 dy = -dy;
             }
             else {
                 lives--;
                 if(lives==0) {
                    //游戏结束，重置参数
                     $(".start").attr("flage","flage");
                     lives=4;
                     score=0;
                     stop_status=false;
                     return;
                  //  drawGO();     //结束游戏
                 }
                 else {
                     x = canvas.width/2;
                     y = canvas.height-30;
                     dx = 3;
                     dy = -3;
                     paddleX = (canvas.width-paddleWidth)/2;
                 }
             }
          }
           //接盘移动
          if(rightPressed && paddleX < canvas.width-paddleWidth) {
             paddleX += 5;
          }
          else if(leftPressed && paddleX > 0) {
             paddleX -= 5;
          }
           x += dx;
           y += dy;
          stop=requestAnimationFrame(draw);
          }
</script>
</html>

转载于:https://www.cnblogs.com/wpsyp/p/6322030.html

anshi3172
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas-弹珠游戏
莫兮的博客
03-18 460
canvas-弹珠游戏 目录 文章目录前言结果展示代码展示`pinball.html``pinball.css``requestNextAnimationFrame.js``stopwatch.js``animationTimer.js``progressbar.js``sprites.js``gameEngine.js``shapes.js``pinball.js` 前言 桌面弹珠游戏 需要花时间了解源代码 资源将会放在github-弹珠游戏 结果展示 代码展示 pinball.htm
Canvas+Js制作动量守恒的小球碰撞
weixin_30647065的博客
12-14 517
目的：通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了，有用着呢。 我们可以通过canvas画2D图形（圆、方块、三角形等等）3D图形（球体、正方体等待）。 当然这只是基础的皮毛而已，canvas的强大之处在于可以做游戏，导入模型，粒子效果，实现漫游又或者全景和VR。 这里我们介绍纯js写的2D小球碰撞。（主要是博主的Three.js不咋地） 好吧，老规矩，先上图...
canvas+js实现简单的双人坦克对战小游戏
zem
08-25 2812
相信有很多人对坦克大战的游戏模仿很有兴趣，在实现经典的坦克大战之前，我先写了个双人的坦克对战，实现了基本的对战功能。下面就开始介绍游戏的编写。 首先创建一个基本的html文件，添加canvas标签以实现游戏的展示。 <!DOCTYPE html> <html> <head> <title>双人对战坦克大战</title> &lt...
（小游戏）详解球球保卫大作战：html+js+canvas实现原理
认真和努力总没有错
03-01 1572
首先先附上我的游戏地址：http://www.yating.online/game/protectBall.html； 喜欢就给我点个星吧：https://github.com/Chenyating/easyGame pc端！！！！！！移动端没做处理； 一、简单介绍： 简单的介绍一下我的小游戏： 这个是个单恋，爱而不得的悲伤爱情故事； 索性最后是有情人终成眷属的美好故事...
撞球游戏源码
qq_39892395的博客
07-12 279
今天学习了jQuery的一个小案例： 运行效果： 小球碰撞运行效果首先是对页面的布局 HTML文件index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>撞球游戏</title> <...
一个简单的javascript小球碰撞代码
jackyrongvip的专栏
04-30 1031
一个简单的javascript小球碰撞代码，综合了键盘操作，canvas等知识了，javascript入门小游戏基础 [code="java"] var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var ...
Chart.js, 使用 <canvas> 标记的简单HTML5图表.zip
10-10
Chart.js, 使用 <canvas> 标记的简单HTML5图表 Chart.js 使用canvas元素的简单HTML5图表 chartjs.org安装你可以从发布的版本中下载最新版本的Chart.js，或者使用一个 Chart.js ( ) 。通过npm安装：npm in
Canvas实现动态的雪花效果
08-31
本文主要分享Canvas实现动态的雪花效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
原生JS使用Canvas实现拖拽式绘图功能
10-16
主要介绍了原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
js使用html2canvas实现屏幕截取的示例代码
10-19
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script> <script> $(function(){ $("#btn").click(function(){ html2canvas($("#container"), { onrendered: function(canvas) { ...
绘制canvas彩色泡泡小球碰撞
汉堡请不要欺负面条
02-24 1261
globalCompositeOperation带来的不一样的烟花 当前浏览器不支持Canvas，请更换浏览器后再试 js代码如下：  var balls = [];     window.onload = function(){         var canvas = document.getElementById("canvas");         va
理解requestAnimationFrame和cancelAnimationFrame
热门推荐
冰雪为融的博客
06-17 1万+
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。注意：若您想要在下次重绘时产生另一个动画画面，您的回调例程必须调用 requestAnimationFrame()。回调函数会被传入一个参数，DOMHighResTimeStamp，指示当...
Canvas动画
weixin_33888907的博客
04-26 128
引题最近忙完实验，在慢慢开始的学习HTML5 的canvas，很早就听过动态canvas的威名，一直没有机会和时间学习。这次系统学习HTML5和css3，自然不会放过这次机会。本文主要是总结学习canvas动画的一些基本知识，并不会介绍canvas，关于入门读者朋友可以回去翻翻书本。另外本文还会试着写几个实例，加深理解。canvas动画基本思想思想一 刷新重绘我们平时看到的canvas游戏 里，人...
JavaScript-在画布上让物体移动
梧桐下的四叶草
06-10 4371
（一）在页面上移动 Canvas Animation var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var positi
背景图片修改
weixin_30348519的博客
07-08 112
<!DOCTYPE html> <html lang="en"> <body> <script> function snow() { // 1、定义一片雪花模板 var flake = document.createElement('div'); ...
canvas requestAnimationFrame 动画
weixin_33766805的博客
07-27 178
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript/html breakout game 打砖块游戏（附代码）
m0_60558800的博客
02-23 3342
以下的打砖块游戏主要从3个方面练习javascript/html： 1. 游戏开始界面/菜单 2. 游戏音乐/声音：与Python pygame 不同的是， html 游戏音乐不可能自动播放，必须用户介入（比如按一个按钮等）才能播放 3. 游戏本身（主代码参考：MDN Web Docs） 以下是全部代码（音乐、声音文件没有附带，感兴趣的朋友可以把自己喜欢的音乐加入）： <head> <style> canvas { background: #eee; dis.
第二章-在HTML中使用JavaScript
最新发布
2301_79858637的博客
07-07 541
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
Vue前端打包
weixin_63680330的博客
07-04 315
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
HTML5 <canvas> 标签播放的 Canvas 视频怎么倍速播放
06-06
要在 HTML5 `<canvas>` 标签播放的 Canvas 视频中倍速播放，可以使用 JavaScript 和 HTML5 Video API 来实现。 以下是一个示例代码，演示如何使用 Video API 和 JavaScript 将 Canvas 视频的播放速度提高到 2 倍： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值