请选择 进入手机版 | 继续访问电脑版
查看: 4634|回复: 203

[新手教程] html5-canvas写个简单的人机对战小游戏

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-2-23 16:09:50 | 显示全部楼层 |阅读模式

今天开始写一个简单的小游戏吧,有多简单,这么说吧,代码不到100行,先上效果图:

QQ截图20170222115223.jpg

左侧为我们控制的控制板,右侧为假想的电脑控制的控制板

初始化
首先在html页面中添加中添加一个canvas元素,并给出一个id用于在js代码中获取该元素并对其进行操作
  1. <canvas id="canvas"></canvas>
复制代码

然后就是对各种参数,注释中都有给出,我就不多说了,直接看
  1. //获取canvas元素以及2d绘图环境c,以及设置canvas宽高为800x600
  2. var canvas = document.getElementById("canvas"),
  3.     c = canvas.getContext("2d"),
  4.     W = canvas.width = 800,
  5.     H = canvas.height = 600;
  6. var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 10, ballVy = 2,    //球的位置、半径以及在X轴及Y轴的速度
  7.     panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2,    //控制板的宽高以及初始位置
  8.     player1Score = 0, player2Score = 0, winnerScore = 3,    //记录玩家的分数以及得了多少分算赢
  9.     isEnd = 0;    //判断是否比赛结束的变量,0为未结束,1为已结束
复制代码

封装工具方法
  1. //绘制长方形(也就是控制板)
  2. function fillRect(x, y, w, h, style) {
  3.     c.fillStyle = style;
  4.     c.fillRect(x, y, w, h);
  5. }
  6. //绘制圆(也就是游戏中的球)
  7. function fillCircle(x, y, r, style) {
  8.     c.fillStyle = style;
  9.     c.beginPath();
  10.     c.arc(x, y, r, 0, Math.PI * 2);
  11.     c.fill();
  12. }
  13. //绘制文字(得分和显示输赢)
  14. function fillText(txt, x, y, font, style) {
  15.     c.fillStyle = style || "white";
  16.     c.font = font || "40px DejaVu Sans Mono";
  17.     c.textAlign = "center";
  18.     c.textBaseline = "middle";
  19.     c.fillText(txt, x, y);
  20. }
复制代码

添加事件

我们需要在canvas元素上添加监听事件,一是当结束的也就是isEnd为1的时候,当鼠标点击在canvas上的时候再来一把游戏,重置玩家分数以及重启动画绘制,二是我们需要控制左侧控制板的运动,不过只需要在Y轴运动即可
  1. canvas.addEventListener("click", function () {
  2.     if (isEnd) {
  3.         player1Score = 0;
  4.         player2Score = 0;
  5.         isEnd = 0;
  6.         animate();    //主要的绘制方法
  7.     }
  8. });
  9. //获取鼠标在canvas上实际Y轴位置减去控制板的高度也就是控制板实际绘制的初始位置
  10. canvas.addEventListener("mousemove", function (e) {
  11.     panel1Y = e.clientY - canvas.getBoundingClientRect().top - panelH / 2;
  12. });
复制代码

边界判断
  1. //球边界判断
  2. if (ballX - ballR - panelW < 0) {
  3.     if (ballY > panel1Y && ballY < panel1Y + panelH) {
  4.         ballVx = -ballVx;
  5.         ballVy = (ballY - (panel1Y + panelH / 2)) * .3;
  6.     } else {
  7.         player2Score++;
  8.         ballReset();
  9.     }
  10. }
  11. if (ballX + ballR + panelW > W) {
  12.     if (ballY > panel2Y && ballY < panel2Y + panelH) {
  13.         ballVx = -ballVx;
  14.         ballVy = (ballY - (panel2Y + panelH / 2)) * .3;
  15.     } else {
  16.         player1Score++;
  17.         ballReset();
  18.     }
  19. }
  20. if (ballY + ballR < 0 || ballY - ballR > H) {
  21.     ballVy = -ballVy;
  22. }
  23. //用于控制右侧控制板的运动
  24. if (panel2Y + panelH / 2 < ballY - 40) {
  25.     panel2Y = panel2Y + 5;
  26. } else if (panel2Y + panelH / 2 > ballY + 40) {
  27.     panel2Y = panel2Y - 5;
  28. }
复制代码

执行动画
  1. var RAF = (function () {
  2.     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
  3.             window.setTimeout(callback, 1000 / 60);
  4.         }
  5. })();
  6. RAF(animate);
复制代码

到此,该小游戏的介绍到此结束,简单吧!
详细代码请回复下载。。。。。
游客,如果您要查看本帖隐藏内容请回复
最佳答案
0 
wang512620 发表于 2017-2-24 12:13:55 | 显示全部楼层
挺不错的。谢谢分享
最佳答案
0 
wch20017 发表于 2017-2-24 13:04:18 | 显示全部楼层
html5-canvas写个简单的人机对战小游戏
最佳答案
0 
laidayuan 发表于 2017-2-24 14:01:35 | 显示全部楼层
very good, so cool
最佳答案
0 
az2821394 发表于 2017-2-24 20:38:21 | 显示全部楼层
没玩过不知道好玩不
最佳答案
0 
59439743 发表于 2017-2-25 08:56:58 | 显示全部楼层
看起来很不错 下载试试
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表