经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » 游戏设计 » 查看文章
通过游戏学javascript系列第一节Canvas游戏开发基础
来源：cnblogs　　作者：师者乐享　　时间：2020/12/14 17:03:01　　对本文有异议

本节教程通过一个简单的游戏小例子，讲解Canvas的基础知识。

最终效果：

点击移动的方块，方块上的分数会增加，方块的行进方向会改变，并且方块的速度会增加。

在线演示

源码

HTML5引入了canvas元素。canvas元素为我们提供了一块空白画布。我们可以使用此画布来绘制和绘制我们想要的任何东西。JavaScript为我们提供了动态制作动画并绘制到画布上所需的工具。它不仅提供绘图和动画系统，还可以处理用户交互。在本教程中，我们将使用纯JavaScript制作基本的HTML5 Canvas框架，该框架可用于制作真实的游戏。在本教程的结尾创建了一个非常简单的游戏，以演示HTML5 Canvas与JavaScript结合的优势。

HTML5 Canvas基本游戏框架

让我们围绕canvas元素创建一个基本的游戏框架。我们需要一个HTML5文件和一个JavaScript文件。HTML5文件应包含canvas元素和对JavaScript文件的引用。JavaScript文件包含将代码绘制到canvas元素的代码。

这是HTML5文件index.html：

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>Canvas Example</title>
  4. <script type="text/javascript" src="framework.js"></script>
  5. </head>
  6. <body>
  7. <canvas id="viewport" width="640" height="480"></canvas>
  8. </body>
  9. </html>

如您所见，JavaScript文件game.js包含在html文件的头部。画布元素以名称“ viewport”定义，其宽度为640像素，高度为480像素。在我们的framework.js中，我们需要使用其名称查找canvas元素，以便可以在其上进行绘制。我们正在创建的框架应支持渲染循环以及玩家与鼠标的交互。对于渲染循环，我们将使用Window.requestAnimationFrame（）。通过添加鼠标事件侦听器来启用鼠标交互。

这是JavaScript文件framework.js：

  1. // The function gets called when the window is fully loaded
  2. window.onload = function() {
  3.     // Get the canvas and context
  4.     var canvas = document.getElementById("viewport"); 
  5.     var context = canvas.getContext("2d");
  7.     // Timing and frames per second
  8.     var lastframe = 0;
  9.     var fpstime = 0;
  10.     var framecount = 0;
  11.     var fps = 0;
  12.     
  13.     // Initialize the game
  14.     function init() {
  15.         // Add mouse events
  16.         canvas.addEventListener("mousemove", onMouseMove);
  17.         canvas.addEventListener("mousedown", onMouseDown);
  18.         canvas.addEventListener("mouseup", onMouseUp);
  19.         canvas.addEventListener("mouseout", onMouseOut);
  20.     
  21.         // Enter main loop
  22.         main(0);
  23.     }
  24.     
  25.     // Main loop
  26.     function main(tframe) {
  27.         // Request animation frames
  28.         window.requestAnimationFrame(main);
  29.         
  30.         // Update and render the game
  31.         update(tframe);
  32.         render();
  33.     }
  34.     
  35.     // Update the game state
  36.     function update(tframe) {
  37.         var dt = (tframe - lastframe) / 1000;
  38.         lastframe = tframe;
  39.         
  40.         // Update the fps counter
  41.         updateFps(dt);
  42.     }
  43.     
  44.     function updateFps(dt) {
  45.         if (fpstime > 0.25) {
  46.             // Calculate fps
  47.             fps = Math.round(framecount / fpstime);
  48.             
  49.             // Reset time and framecount
  50.             fpstime = 0;
  51.             framecount = 0;
  52.         }
  53.         
  54.         // Increase time and framecount
  55.         fpstime += dt;
  56.         framecount++;
  57.     }
  58.     
  59.     // Render the game
  60.     function render() {
  61.         // Draw the frame
  62.         drawFrame();
  63.     }
  64.     
  65.     // Draw a frame with a border
  66.     function drawFrame() {
  67.         // Draw background and a border
  68.         context.fillStyle = "#d0d0d0";
  69.         context.fillRect(0, 0, canvas.width, canvas.height);
  70.         context.fillStyle = "#e8eaec";
  71.         context.fillRect(1, 1, canvas.width-2, canvas.height-2);
  72.         
  73.         // Draw header
  74.         context.fillStyle = "#303030";
  75.         context.fillRect(0, 0, canvas.width, 65);
  76.         
  77.         // Draw title
  78.         context.fillStyle = "#ffffff";
  79.         context.font = "24px Verdana";
  80.         context.fillText("HTML5 Canvas Basic Framework ", 10, 30);
  81.         
  82.         // Display fps
  83.         context.fillStyle = "#ffffff";
  84.         context.font = "12px Verdana";
  85.         context.fillText("Fps: " + fps, 13, 50);
  86.     }
  87.     
  88.     // Mouse event handlers
  89.     function onMouseMove(e) {}
  90.     function onMouseDown(e) {}
  91.     function onMouseUp(e) {}
  92.     function onMouseOut(e) {}
  93.     
  94.     // Get the mouse position
  95.     function getMousePos(canvas, e) {
  96.         var rect = canvas.getBoundingClientRect();
  98.         return {
  99.             x: Math.round((e.clientX - rect.left)/(rect.right - rect.left)*canvas.width),
  100.             y: Math.round((e.clientY - rect.top)/(rect.bottom - rect.top)*canvas.height)
  101.         };
  102.     }
  103.     
  104.     // Call init to start the game
  105.     init();
  106. };

上面的代码绘制了一个带有边框，标题和每秒帧数的简单框架。这是代码生成的内容

带有弹跳方块的游戏

现在我们有了一个框架，让我们用它创建一个简单的游戏。我们将创建一个在屏幕上具有反弹方块的游戏。当玩家单击它时，方块上的分数会增加，方块的行进方向会改变，并且方块的速度会增加。

首先，我们定义一些对象和属性。该级别定义了方块可以反弹的区域。方块本身具有位置，尺寸和运动属性。最后，有一个分数。

  1.     // Level properties
  2.     var level = {
  3.         x: 1,
  4.         y: 65,
  5.         width: canvas.width - 2,
  6.         height: canvas.height - 66
  7.     };
  8.  
  9.     // Square
  10.     var square = {
  11.         x: 0,
  12.         y: 0,
  13.         width: 0,
  14.         height: 0,
  15.         xdir: 0,
  16.         ydir: 0,
  17.         speed: 0
  18.     }
  19.  
  20.     // Score
  21.     var score = 0;

我们需要在init（）函数中初始化对象和属性。

  1.     // Initialize the game
  2.     function init() {
  3.         // Add mouse events
  4.         canvas.addEventListener("mousemove", onMouseMove);
  5.         canvas.addEventListener("mousedown", onMouseDown);
  6.         canvas.addEventListener("mouseup", onMouseUp);
  7.         canvas.addEventListener("mouseout", onMouseOut);
  8.  
  9.         // Initialize the square
  10.         square.width = 100;
  11.         square.height = 100;
  12.         square.x = level.x + (level.width - square.width) / 2;
  13.         square.y = level.y + (level.height - square.height) / 2;
  14.         square.xdir = 1;
  15.         square.ydir = 1;
  16.         square.speed = 200;
  17.  
  18.         // Initialize the score
  19.         score = 0;
  20.  
  21.         // Enter main loop
  22.         main(0);
  23.     }

这些对象需要更新，因此让我们修改update（）函数。方块需要移动，并且应该检测并解决与标高边缘的碰撞。

  1.     // Update the game state
  2.     function update(tframe) {
  3.         var dt = (tframe - lastframe) / 1000;
  4.         lastframe = tframe;
  5.  
  6.         // Update the fps counter
  7.         updateFps(dt);
  8.  
  9.         // Move the square, time-based
  10.         square.x += dt * square.speed * square.xdir;
  11.         square.y += dt * square.speed * square.ydir;
  12.  
  13.         // Handle left and right collisions with the level
  14.         if (square.x <= level.x) {
  15.             // Left edge
  16.             square.xdir = 1;
  17.             square.x = level.x;
  18.         } else if (square.x + square.width >= level.x + level.width) {
  19.             // Right edge
  20.             square.xdir = -1;
  21.             square.x = level.x + level.width - square.width;
  22.         }
  23.  
  24.         // Handle top and bottom collisions with the level
  25.         if (square.y <= level.y) {
  26.             // Top edge
  27.             square.ydir = 1;
  28.             square.y = level.y;
  29.         } else if (square.y + square.height >= level.y + level.height) {
  30.             // Bottom edge
  31.             square.ydir = -1;
  32.             square.y = level.y + level.height - square.height;
  33.         }
  34.     }

我们需要绘制方块和分数。这需要在render（）函数中完成。

  1.     // Render the game
  2.     function render() {
  3.         // Draw the frame
  4.         drawFrame();
  5.  
  6.         // Draw the square
  7.         context.fillStyle = "#ff8080";
  8.         context.fillRect(square.x, square.y, square.width, square.height);
  9.  
  10.         // Draw score inside the square
  11.         context.fillStyle = "#ffffff";
  12.         context.font = "38px Verdana";
  13.         var textdim = context.measureText(score);
  14.         context.fillText(score, square.x+(square.width-textdim.width)/2, square.y+65);
  15.     }

最后一步是添加鼠标交互。让我们将代码添加到onMouseDown（）函数中。

  1.    function onMouseDown(e) {
  2.         // Get the mouse position
  3.         var pos = getMousePos(canvas, e);
  4.  
  5.         // Check if we clicked the square
  6.         if (pos.x >= square.x && pos.x < square.x + square.width &&
  7.             pos.y >= square.y && pos.y < square.y + square.height) {
  8.  
  9.             // Increase the score
  10.             score += 1;
  11.  
  12.             // Increase the speed of the square by 10 percent
  13.             square.speed *= 1.1;
  14.  
  15.             // Give the square a random position
  16.             square.x = Math.floor(Math.random()*(level.x+level.width-square.width));
  17.             square.y = Math.floor(Math.random()*(level.y+level.height-square.height));
  18.  
  19.             // Give the square a random direction
  20.             square.xdir = Math.floor(Math.random() * 2) * 2 - 1;
  21.             square.ydir = Math.floor(Math.random() * 2) * 2 - 1;
  22.         }
  23.     }

这是通过基本框架和一些修改而成的最终游戏。单击方块以增加您的分数并前进到下一个方块。

原文链接：http://www.cnblogs.com/neuedu/p/javascript-game-canvas.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

游戏设计热门文章

  • DirectX11--深入理解与使用2D纹理资源
  • unity渲染篇：烘焙模型贴图
  • Unity导入模型出现 (Avatar Rig Configuration mis-match. Bone length in configuration does not match position in animation)?
  • Unreal: Dynamic load map from Pak file
  • 《unity 3D 游戏开发 第二版》宣雨松 分享 pdf下载
  • 空间划分的数据结构(网格/四叉树/八叉树/BSP树/k-d树/BVH/自定义划分)
  • Unity编辑器汉化(中文语言包)
  • [Unity编辑器扩展基础总结] 第3章 编辑器下的数据保存
  • Unity 3D游戏开发 pdf高清下载
  • 用C#写一个俄罗斯方块

    • 游戏设计推荐文章

  • Unity3D开发入门教程（二）—— Lua入门
  • Unity3D开发入门教程（三）——添加启动脚本
  • Unity3D开发入门教程（四）——用Lua实现组件
  • RectMask2D裁剪Canvas无效问题
  • Python编程环境设置
  • Minecraft类游戏地形生成机制
  • 3D网页小实验-基于Babylon.js与recast.js实现RTS式单位控制
  • Unity3D OpenVR 虚拟现实 保龄球打砖块游戏开发
  • [Unity编辑器扩展基础总结] 第3章 编辑器下的数据保存
  • 关于看门狗的两种模型以及带来的思考

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号